Sortieren, Filtern und Seitennummerierung

Um Sortierung hinzuzufügen, importieren Sie getSortedRowModel und fügen Sie es zur Konfiguration von useReactTable hinzu. Außerdem benötigen Sie einen Sortierzustand (ein Array aus Objekten der Form {id, desc}) und einen onSortingChange-Handler, der mit dem React-State verbunden ist.

Das sortierte Zeilenmodell kapselt das Kernzeilenmodell und ordnet die Zeilen anhand des aktuellen Sortierzustands neu an.

Jede Spaltenüberschrift stellt column.getToggleSortingHandler() bereit, den Sie mit dem onClick-Handler Ihres th-Elements verbinden. Durch Klicken wird zwischen aufsteigender, absteigender und unsortierter Reihenfolge gewechselt.

column.getIsSorted() gibt 'asc', 'desc' oder false zurück. Damit können Sie den passenden Pfeil als Sortierindikator anzeigen.

TanStack Table unterstützt die gleichzeitige Sortierung nach mehreren Spalten. Halten Sie beim Klicken auf eine zweite Spaltenüberschrift die Shift-Taste gedrückt, um sie zum Sortier-Array hinzuzufügen, ohne die erste Sortierung zu entfernen.

Das sortingState-Array enthält alle aktiven Sortierspalten in Prioritätsreihenfolge, und das sortierte Zeilenmodell wendet sie nacheinander an.

Aktivieren Sie das globale Filtern, indem Sie getFilteredRowModel importieren und den globalFilter-State sowie einen onGlobalFilterChange-Handler hinzufügen. Verbinden Sie ein input-Element mit dem State, um alle Spalten gleichzeitig zu filtern.

Der globale Filter verwendet standardmäßig eine Fuzzy-Match- oder Includes-Strategie, die über filterFns konfiguriert werden kann.

Einzelne Spalten können über column.getFilterValue() und column.setFilterValue() eigene Filter bereitstellen. Fügen Sie unter jeder Spaltenüberschrift ein Filter-Eingabefeld hinzu und verbinden Sie es mit diesen Methoden.

Spalten- und globale Filter werden kombiniert: Zeilen müssen alle aktiven Filter erfüllen, um im gefilterten Zeilenmodell zu erscheinen.

Importieren Sie getPaginationRowModel und fügen Sie es zusammen mit einem Pagination-State-Objekt (pageIndex und pageSize) und einem onPaginationChange-Handler zur Konfiguration von useReactTable hinzu.

Das Pagination-Zeilenmodell beschränkt die gefilterten und sortierten Zeilen auf den Ausschnitt der aktuellen Seite.

Die Tabelleninstanz stellt table.nextPage(), table.previousPage(), table.firstPage() und table.lastPage() zur Navigation bereit. Verwenden Sie table.getCanNextPage() und table.getCanPreviousPage(), um Schaltflächen an den Grenzen zu deaktivieren.

Mit table.setPageIndex(n) springen Sie direkt zu einer bestimmten Seite; table.setPageSize(n) ändert, wie viele Zeilen pro Seite angezeigt werden.

table.getPageCount() gibt die Gesamtzahl der Seiten zurück, basierend auf der Anzahl gefilterter Zeilen geteilt durch pageSize. table.getState().pagination.pageIndex liefert den aktuellen, bei null beginnenden Seitenindex.

Verwenden Sie diese Werte, um in Ihrer Pagination-Oberfläche einen Seitenzähler wie „Seite 3 von 12“ zu erstellen.

Zeilenmodelle lassen sich kombinieren: getCoreRowModel stellt die Basis bereit, getFilteredRowModel kapselt sie und wendet Filter an, getSortedRowModel kapselt die gefilterten Daten und wendet Sortierung an, und getPaginationRowModel beschränkt das Ergebnis auf die aktuelle Seite.

Die Reihenfolge ist wichtig: Zuerst wird gefiltert, danach sortiert und zuletzt paginiert.

TanStack Table memoisiert Berechnungen der Zeilenmodelle intern. Das Sortieren und Filtern großer Datensätze ist effizient, weil nur geänderte Zeilenmodelle neu berechnet werden.

Für extrem große Datensätze (100.000+ Zeilen) kombinieren Sie Pagination mit Virtualisierung (react-virtual), um zu vermeiden, dass alle Seitenzeilen auf einmal gerendert werden.

Verbinden Sie getSortedRowModel mit dem Sortierzustand, getFilteredRowModel mit dem globalen Filter- und den Spaltenfilterzuständen und getPaginationRowModel mit dem Pagination-State. Jede Funktion muss explizit aktiviert werden und lässt sich problemlos mit den anderen kombinieren.

Spaltenüberschriften steuern die Sortierung über getToggleSortingHandler; Eingabefelder steuern Filter über setFilterValue und onGlobalFilterChange; Schaltflächen steuern die Pagination über nextPage, previousPage und setPageIndex.

Welches Objekt enthält den aktuellen Seitenindex und die Seitengröße im Pagination-State von TanStack Table?

Für die Sortierung benötigen Sie getSortedRowModel, einen Sortierzustand und Click-Handler für die Spaltenüberschriften. Zum Filtern verwenden Sie getFilteredRowModel mit globalem und spaltenbezogenem Filterzustand. Die Pagination verwendet getPaginationRowModel mit einem State für pageIndex und pageSize.

Alle drei Zeilenmodelle lassen sich automatisch kombinieren: zuerst filtern, dann sortieren und zuletzt paginieren.