React-Datentabellen-Beispiele: TanStack Table v9 mit Tailwind | We.Inc
Typgeprüfte TanStack-Table-v9-Beispiele für React: Sortierung, globale Suche, Paginierung, Zeilenauswahl, Spaltensichtbarkeit, ein Sticky Header und serverseitige Daten, gestaltet mit Tailwind.
React-Datentabellen-Beispiele mit TanStack Table
TanStack Table ist eine Headless-Tabellenbibliothek für React: Sie kümmert sich um Sortierung, Filterung, Paginierung und Auswahl, während du das Markup schreibst. In Version 9 registrierst du jedes Feature mit tableFeatures, fügst für jeden clientseitigen Schritt ein Row Model hinzu, rufst useTable auf und renderst Header und Zellen mit FlexRender. Die Beispiele unten sind gegen 9.3 typgeprüft.
Wähle einen Ansatz
Zeilen
Ansatz
Unter etwa 50, ohne Interaktion
Eine einfache HTML-Tabelle
Hunderte bis einige Tausend
TanStack Table, clientseitig
Zehntausende oder mehr
TanStack Table mit manueller (serverseitiger) Sortierung und Paginierung
Sehr lange Einzelseiten
Zeilenvirtualisierung hinzufügen
Probiere die fertige Tabelle aus und kopiere dann den Code, der sie baut. Die Live-Vorschau auf dieser Seite nutzt einfachen React-State, damit die Seite schlank bleibt; der Code daneben ist die TanStack-v9-Version, die in deiner App dasselbe tut.
Installiere @tanstack/react-table.
Liste die benötigten Features in tableFeatures auf, mit einem Row-Model-Slot für jeden Schritt, der im Browser passiert.
Definiere Spalten mit createColumnHelper außerhalb der Komponente.
Rufe useTable mit Features, Spalten und Daten auf.
Rendere Header-Gruppen und Zeilen mit deinem eigenen Markup und FlexRender.
Gib Zeilen mit getRowId eine stabile ID, damit die Auswahl Sortierung und erneutes Laden übersteht.
Rendere row.getVisibleCells(), nicht getAllCells(), sobald das Ausblenden von Spalten aktiv ist.
Definiere den Fallback für leere Daten einmal außerhalb der Komponente; ein neues [] bei jedem Render macht die Row Models ungültig.
Setze in jedes sortierbare th einen Sortier-Button, damit es per Tastatur erreichbar ist.
Formatiere Zahlen und Datumsangaben in der Zellfunktion, damit die Sortierung weiter den Rohwert verwendet.
Häufige Fragen
Ist React Table dasselbe wie TanStack Table?
Ja. react-table v7 wurde ab v8 in TanStack Table umbenannt und als @tanstack/react-table veröffentlicht. Version 9 behält die Headless-Idee bei, verlangt aber, dass du Features explizit registrierst, was die Bundles kleiner hält.
Bringt TanStack Table Styles mit?
Nein. Es liefert nur State und Row Models. Du schreibst die Elemente table, th und td selbst und gestaltest sie mit Tailwind, CSS oder einer Komponentenbibliothek wie shadcn/ui.
Sollten Sortierung und Paginierung auf dem Server passieren?
Wenn der vollständige Datensatz zu groß ist, um ihn an den Browser zu senden, ja. Setze die manual-Optionen, sende den Sortier- und Seitenstatus an deine API und übergib die Gesamtzahl der Zeilen, damit die Seitensteuerung funktioniert.
Wie bleibt der Header beim Scrollen sichtbar?
Gib dem Wrapper eine maximale Höhe und overflow auto, und mach das thead mit top 0 und einer Hintergrundfarbe sticky, damit die Zeilen nicht durchscheinen.
Fertiges Styling
Wenn du lieber mit einem fertigen Design startest: Unsere Komponentengalerie enthält eine Tailwind-Datentabelle mit Sortierung, Suche, Zeilenauswahl und Paginierung, die du als React oder HTML kopieren kannst. Für shadcn/ui-Projekte sieh dir unseren Leitfaden zu shadcn-Formularen und -Tabellen an.
Häufige Fehler
Spalten innerhalb der Komponente deklarieren, ohne sie zu memoisieren, wodurch die Tabelle bei jedem Render neu aufgebaut wird.
manualPagination einschalten, aber trotzdem alle Zeilen übergeben, sodass die erste Seite alles anzeigt.
Die Reihenfolge in einer eigenen Sortierfunktion umkehren. Gib einen aufsteigenden Vergleich zurück; die Bibliothek dreht ihn für absteigend um.
TanStack Table einrichten
Installieren
Ein Paket. Es hat keine Styles und rendert selbst nichts: Du schreibst das Tabellen-Markup, deshalb passt es so gut zu Tailwind.
Die kleinste funktionierende Tabelle
Features werden vorab aufgelistet und einmal übergeben. Halte Features, Spalten und das Daten-Array stabil (außerhalb der Komponente oder im State), sonst baut die Tabelle ihre Zeilen bei jedem Render neu auf.
Features und Row Models
Was du für jedes Verhalten registrierst (v9)
Du willst
Feature
Row-Model-Slot (clientseitig)
Per Klick auf einen Header sortieren
rowSortingFeature
sortedRowModel: createSortedRowModel()
Ein Suchfeld über alle Spalten
columnFilteringFeature + globalFilteringFeature
filteredRowModel: createFilteredRowModel()
Filter pro Spalte
columnFilteringFeature
filteredRowModel: createFilteredRowModel()
Zeilen auf Seiten verteilen
rowPaginationFeature
paginatedRowModel: createPaginatedRowModel()
Auswahl per Checkbox
rowSelectionFeature
Keiner
Spalten ein- und ausblenden
columnVisibilityFeature
Keiner
Der Server erledigt die Arbeit
Dieselben Features
Keine Slots; setze manualSorting, manualFiltering, manualPagination
Alles in einer Komponente, gestaltet mit Tailwind-Klassen. Die Kopfzeile bleibt stehen, weil der Wrapper scrollt und das thead sticky ist. aria-sort teilt Screenreadern mit, in welche Richtung eine Spalte sortiert ist.
Serverseitige Daten
Serverseitige Sortierung und Paginierung
Bei großen Datensätzen sortiert der Server und liefert eine Seite zurück. Lass die Row-Model-Slots weg, setze die manual-Flags und übergib rowCount, damit die Tabelle weiß, wie viele Seiten es gibt. Sortier- und Seitenstatus steuern die Anfrage.