Benutzerdefinierte Sortierung mit React-Table-Bibliothek

1. Erstellen und verwalten Sie Tabellen mit React Table
2. Benutzerdefiniertes Sortieren mit der react-table-Bibliothek

Moderne Websites enthalten viele visuelle Elemente und können manchmal mit Informationen überladen sein. Visuelle Hilfsmittel wie Tabellen können Ihnen dabei helfen, Informationen so zu verwalten, dass sie für Ihre Kunden leicht verdaulich sind.

Tabellen können besonders nützlich für Vergleiche zwischen Produkten, Dienstleistungen und anderen Optionen sein.

Erstellen und verwalten Sie Tabellen mit React Table

Viele Bibliotheken ermöglichen es Ihnen, Tabellen in React zu erstellen und zu verwalten. Sie alle haben einen anderen Ansatz; Einige rendern die Benutzeroberfläche, während sich andere nur auf die Datenverwaltung konzentrieren.

react-table ist die zweite Art von Hilfsprogramm. Es bietet Hooks, die zum Erstellen und Verwalten von Tabellen mit erweiterten Funktionen wie Sortieren, Filtern und Suchen verwendet werden können.

Im Allgemeinen können diese Haken auch andere Verwendungen haben. Entwickler können sie verwenden, um andere Arten von Rasterelementen zum Speichern von Daten zu verwalten.

React Table ist ein kopfloses Dienstprogramm, was bedeutet, dass es kein visuelles Tabellenelement bereitstellt. Stattdessen können Hooks aus der React Table-Bibliothek verwendet werden, um mit den Daten selbst zu arbeiten und sie in abstrakten Spalten und Zeilen anzuordnen.

Dank dieser Funktion haben React-Entwickler die Freiheit, das Erscheinungsbild ihrer Tabellen anzupassen. React Table behandelt alles, was mit Daten zu tun hat, und Sie können das Skelett der Tabelle entwerfen.

Benutzerdefiniertes Sortieren mit der react-table-Bibliothek

Um die benutzerdefinierte Sortierfunktion in React zu implementieren, müssen Sie den Haken useSortBy aus der Bibliothek react-table verwenden.

Der useSortBy-Hook akzeptiert mehrere Argumente, die zum Sortieren der Tabelle erforderlich sind.

Mit der Funktion sortType können Sie zwei Datenreihen vergleichen und sortieren. Der Wert kann entweder ein String oder eine Funktion sein.

Die Funktion akzeptiert die folgenden Argumente: sortType(rowA, rowB, columnId, desc). Die ersten beiden Argumente sind Zeilen, die verglichen werden müssen.

Wenn die erste größer ist, gibt die Funktion 1 zurück; wenn nicht, -1. Das Argument columnId gibt die Spalte zum Sortieren von Zeilen an. Das letzte Argument gibt die Sortierrichtung an.

Es kann desc (kurz für absteigend) oder asc (aufsteigend) sein.