React data table voorbeelden: TanStack Table v9 met Tailwind | We.Inc
Getypecheckte TanStack Table v9 voorbeelden voor React: sorteren, globaal zoeken, paginering, rijselectie, kolomzichtbaarheid, een sticky header en server-side data, gestyled met Tailwind.
React data table voorbeelden met TanStack Table
TanStack Table is een headless tabelbibliotheek voor React: hij regelt sorteren, filteren, paginering en selectie, terwijl u zelf de markup schrijft. In versie 9 registreert u elke feature met tableFeatures, voegt u per client-side stap een row model toe, roept u useTable aan en rendert u headers en cellen met FlexRender. De voorbeelden hieronder zijn getypecheckt tegen 9.3.
Kies een aanpak
Rijen
Aanpak
Minder dan ongeveer 50, geen interactie
Een gewone HTML-tabel
Honderden tot een paar duizend
TanStack Table, client side
Tienduizenden of meer
TanStack Table met handmatig (server) sorteren en pagineren
Zeer lange enkele pagina's
Voeg rijvirtualisatie toe
Probeer de afgewerkte tabel en kopieer dan de code die hem bouwt. De live preview op deze pagina is getekend met gewone React-state zodat de pagina licht blijft; de code ernaast is de TanStack v9-versie die hetzelfde doet in uw app.
Installeer @tanstack/react-table.
Zet de features die u nodig hebt in tableFeatures, met een row-model-slot voor elke stap die in de browser gebeurt.
Definieer kolommen met createColumnHelper, buiten het component.
Roep useTable aan met features, kolommen en data.
Render headergroepen en rijen met uw eigen markup en FlexRender.
Geef rijen een stabiele id met getRowId zodat de selectie sorteren en opnieuw ophalen overleeft.
Render row.getVisibleCells(), niet getAllCells(), zodra kolommen verborgen kunnen worden.
Definieer de fallback voor lege data één keer buiten het component; een nieuwe [] bij elke render maakt de row models ongeldig.
Zet in elke sorteerbare th een sorteerknop zodat die met het toetsenbord bereikbaar is.
Formatteer getallen en datums in de cell-functie zodat sorteren nog steeds de ruwe waarde gebruikt.
Veelgestelde vragen
Is React Table hetzelfde als TanStack Table?
Ja. react-table v7 heet vanaf v8 TanStack Table en wordt gepubliceerd als @tanstack/react-table. Versie 9 houdt het headless idee aan, maar vraagt u features expliciet te registreren, wat bundles kleiner houdt.
Bevat TanStack Table stijlen?
Nee. Het geeft u alleen state en row models. U schrijft zelf de elementen table, th en td en styled ze met Tailwind, CSS of een componentbibliotheek zoals shadcn/ui.
Moeten sorteren en pagineren op de server gebeuren?
Als de volledige dataset te groot is om naar de browser te sturen, ja. Zet de manual-opties aan, stuur de sorteer- en paginastate naar uw API en geef het totale aantal rijen door zodat de paginaknoppen werken.
Hoe houd ik de header zichtbaar tijdens het scrollen?
Geef de wrapper een maximale hoogte en overflow auto, en maak de thead sticky met top 0 en een achtergrondkleur zodat de rijen er niet doorheen schijnen.
Kant-en-klare styling
Begint u liever met een afgewerkt ontwerp, dan heeft onze componentengalerij een Tailwind data table met sorteren, zoeken, rijselectie en paginering die u als React of HTML kunt kopiëren. Voor shadcn/ui-projecten, zie onze gids over shadcn-formulieren en tabellen.
Veelgemaakte fouten
Kolommen binnen het component declareren zonder ze te memoïseren, waardoor de tabel bij elke render opnieuw wordt opgebouwd.
manualPagination aanzetten maar toch alle rijen doorgeven, zodat de eerste pagina alles toont.
De volgorde omdraaien in een eigen sorteerfunctie. Geef een oplopende vergelijking terug; de bibliotheek draait die om voor aflopend.
TanStack Table instellen
Installeren
Eén package. Het heeft geen stijlen en rendert zelf niets: u schrijft de tabelmarkup, en daarom past het zo goed bij Tailwind.
De kleinste werkende tabel
Features worden vooraf opgesomd en één keer doorgegeven. Houd features, kolommen en de data-array stabiel (buiten het component of in state), anders bouwt de tabel zijn rijen bij elke render opnieuw op.
Features en row models
Wat u per gedrag registreert (v9)
U wilt
Feature
Row-model-slot (client side)
Op een header klikken om te sorteren
rowSortingFeature
sortedRowModel: createSortedRowModel()
Een zoekveld over alle kolommen
columnFilteringFeature + globalFilteringFeature
filteredRowModel: createFilteredRowModel()
Filters per kolom
columnFilteringFeature
filteredRowModel: createFilteredRowModel()
Pagina's met rijen
rowPaginationFeature
paginatedRowModel: createPaginatedRowModel()
Selectie met checkboxes
rowSelectionFeature
Geen
Kolommen tonen en verbergen
columnVisibilityFeature
Geen
De server doet het werk
Dezelfde features
Geen slots; zet manualSorting, manualFiltering, manualPagination
Alles in één component, gestyled met Tailwind-klassen. De headerrij blijft staan omdat de wrapper scrollt en de thead sticky is. aria-sort vertelt schermlezers in welke richting een kolom is gesorteerd.
Server-side data
Server-side sorteren en pagineren
Bij grote datasets sorteert de server en stuurt hij één pagina terug. Laat de row-model-slots weg, zet de manual-vlaggen aan en geef rowCount door zodat de tabel weet hoeveel pagina's er zijn. De sorteer- en paginastate sturen het verzoek aan.