Rijselectie en gevirtualiseerde tabellen

Voeg een selectiekolom toe aan je array met ColumnDef-objecten met de id 'select'. De cel geeft een selectievakje weer dat is gekoppeld aan row.getToggleSelectedHandler(). De kop geeft een selectievakje voor alles selecteren weer met table.getToggleAllRowsSelectedHandler().

Geef ook rowSelection-status en onRowSelectionChange door aan useReactTable.

row.getIsSelected() retourneert true wanneer een rij momenteel is geselecteerd. Dat is ideaal om geselecteerde rijen een gemarkeerde achtergrondstijl te geven.

row.getIsSomeSelected() verwerkt de onbepaalde selectievakstatus wanneer slechts enkele rijen in een groep zijn geselecteerd, wat handig is voor gegroepeerde tabellen.

table.getSelectedRowModel().rows retourneert een array met alle momenteel geselecteerde rijobjecten. Elke rij heeft een eigenschap row.original met het oorspronkelijke gegevensobject.

Zo bouw je knoppen voor acties op meerdere items, zoals "Geselecteerde verwijderen" of "Geselecteerde exporteren".

Geef actieknoppen conditioneel weer op basis van table.getSelectedRowModel().rows.length > 0. Als er geen rijen zijn geselecteerd, verberg of schakel je de werkbalk voor bulkacties uit om verwarrende interacties met een lege toestand te voorkomen.

Toon het aantal geselecteerde rijen in de interface: "{count} rijen geselecteerd" houdt gebruikers op de hoogte van hun selectie.

10.000 rijen als DOM-knooppunten weergeven is extreem traag. De browser moet de lay-out berekenen, duizenden elementen tekenen en beheren. Gebruikers ervaren haperend scrollen en trage eerste weergaven.

Virtualisatie geeft alleen de rijen weer die momenteel in de viewport zichtbaar zijn. Daardoor wordt de DOM aanzienlijk kleiner en verbeteren de prestaties.

Installeer @tanstack/react-virtual naast @tanstack/react-table. De twee bibliotheken zijn afzonderlijk, maar ontworpen om elkaar aan te vullen. TanStack Table beheert je datalogica; TanStack Virtual beheert welke items in de DOM worden weergegeven.

Het koppelpunt is de array met rijen uit table.getRowModel().rows.

Roep useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }) aan. De waarde van count bepaalt hoeveel virtuele items er bestaan, in overeenstemming met het huidige aantal rijen na alle filters.

estimateSize levert een eerste schatting van de rijhoogte; de werkelijke hoogten worden gemeten terwijl rijen worden weergegeven.

Roep virtualizer.getVirtualItems() aan om alleen de rijen op te halen die momenteel in de DOM horen te staan. Pas een map-bewerking toe op deze array, haal de echte rij op via table.getRowModel().rows[virtualRow.index] en geef alleen die tr-elementen weer.

Elk virtueel item heeft een eigenschap start voor absolute positionering binnen de scrollcontainer.

Voeg bovenaan een opvuldiv toe met een hoogte die gelijk is aan start van het eerste virtuele item, en onderaan een opvuldiv met een hoogte die gelijk is aan de totale grootte min het einde van het laatste item.

Deze onzichtbare divs vullen de ruimte op die niet weergegeven rijen zouden innemen, zodat de schuifbalk de juiste verhouding behoudt.

Geef measureElement: el => el.getBoundingClientRect().height door aan useVirtualizer voor nauwkeurige dynamische rijhoogten. De verwijzing van elke rij wordt aan het tr-element gekoppeld, zodat de virtualizer de werkelijke weergegeven hoogte kan meten.

Dit werkt voor rijen met wisselende inhoud, zoals tekst over meerdere regels en uitgevouwen rijen, zonder verschuivingen in de lay-out.

TanStack Table met sortering, filtering, paginering, rijselectie en TanStack Virtual kan volledig worden gecombineerd. Het aantal rijen dat je aan useVirtualizer doorgeeft, moet afkomstig zijn van table.getRowModel().rows nadat alle actieve rijmodellen de gegevens hebben verwerkt.

Als paginering is ingeschakeld, pas je eerst paginering toe en virtualiseer je daarna de rijen van de huidige pagina voor soepel scrollen binnen een grote pagina.

Rijselectie gebruikt een selectiekolom met getToggleSelectedHandler, rowSelection-status en table.getSelectedRowModel().rows om geselecteerde gegevens op te halen. Virtualisatie met useVirtualizer geeft alleen zichtbare rijen weer met getVirtualItems, opvuldivs en eventueel measureElement voor dynamische hoogten.

Alle functies van TanStack Table, zoals sorteren, filteren, pagineren en selecteren, kunnen probleemloos worden gecombineerd met virtuele weergave.