Kolommen definiëren en rijen renderen

Elke kolom in TanStack Table wordt beschreven door een ColumnDef-object. De twee belangrijkste velden zijn accessorKey (de eigenschapsnaam in je gegevensobject) en header (de tekenreeks met het kolomlabel of de renderfunctie).

De aanpak met accessorKey is ideaal voor vlakke gegevens; voor complexe of berekende waarden heb je accessorFn nodig.

Als je gegevens een rechtstreekse eigenschap hebben, zoals name of email, gebruik je accessorKey: 'name'. Als je een waarde moet berekenen, bijvoorbeeld door firstName en lastName te combineren, gebruik je accessorFn: row => row.firstName + ' ' + row.lastName.

Beide zijn volledig getypeerd wanneer je het generieke type voor de rijgegevens aan ColumnDef meegeeft.

Het veld cell in een ColumnDef accepteert een functie die de celcontext ontvangt en JSX retourneert. Zo geef je statuslabels, knoppen, afbeeldingen of andere aangepaste UI in een cel weer.

Voor gewone tekstwaarden volstaat cell.renderValue(). Voor alles wat uitgebreider is, haal je informatie via destructurering uit cell.getContext().

Definieer je kolommen buiten het component om te voorkomen dat je ze bij elke render opnieuw maakt. Geef de reeks samen met je gegevens en getCoreRowModel door aan useReactTable.

TypeScript leidt de kolomtypen automatisch af wanneer je ColumnDef van je gegevenstype voorziet, zodat je automatisch aanvullen krijgt voor waarden van accessorKey.

getCoreRowModel is een fabrieksfunctie die je importeert uit @tanstack/react-table. Je geeft de geretourneerde waarde door aan useReactTable, zodat de instantie weet hoe die de basislijst met rijen uit je gegevensreeks moet opbouwen.

Extra rijmodellen (voor sortering, filtering en paginering) worden daar bovenop gelegd door extra modelfabrieken door te geven.

Roep table.getHeaderGroups() aan en gebruik map over het resultaat om je thead te renderen. Elke headergroep heeft een headers-array; elk headerobject heeft een kolomdefinitie en een id.

Gebruik flexRender(header.column.columnDef.header, header.getContext()) om de inhoud van de koptekst te renderen, of het nu om een tekenreeks of een functie die JSX retourneert gaat.

Roep table.getRowModel().rows aan en gebruik map om elke rij naar een tr-element te vertalen. Roep daarin row.getVisibleCells() aan en gebruik map om elke cel naar een td-element te vertalen.

Gebruik flexRender(cell.column.columnDef.cell, cell.getContext()) om de celinhoud te renderen, rekening houdend met elke aangepaste celrenderfunctie die in de kolom is gedefinieerd.

flexRender is een hulpfunctie die een React-component, een functie die JSX retourneert of een gewone waarde accepteert en die op een consistente manier rendert. Hierdoor kunnen kolomdefinities zowel eenvoudige tekenreeksen als volledige renderfuncties voor kopteksten en cellen gebruiken.

Dankzij deze uniforme API hoef je vóór het renderen het type van de definitie niet te controleren.

cell.renderValue() retourneert de onbewerkte accessorwaarde, opgemaakt als tekenreeks. Voor meer controle biedt cell.getContext() de volledige rendercontext, met daarin de rij, kolom, tabelinstantie en onbewerkte waarde.

Aangepaste celrenderfuncties gebruiken de context om gerelateerde rijgegevens te benaderen die verder gaan dan de enkele accessorwaarde.

Elke ColumnDef accepteert een veld meta waaraan je willekeurige metagegevens kunt koppelen, zoals isSticky: true of alignment: 'right'. Open die in je renderfunctie via column.columnDef.meta.

Om kolommen links of rechts vast te zetten, biedt TanStack Table status en hulpmethoden voor het vastzetten van kolommen op het kolomobject.

Definieer een ColumnDef-array met accessorKey, header en eventueel cell. Roep useReactTable aan met data, columns en getCoreRowModel. Gebruik getHeaderGroups met map voor thead en getRowModel().rows voor tbody, en gebruik flexRender om elke koptekst en cel te renderen.

Met deze minimale opzet krijg je een volledig functionele tabel waarvan je de opmaak volledig zelf bepaalt.

Definieer kolommen met ColumnDef, met accessorKey voor directe velden of accessorFn voor berekende waarden. Geef columns en getCoreRowModel door aan useReactTable en render vervolgens met getHeaderGroups voor kopteksten en getRowModel().rows voor rijen in de tabelinhoud.

De hulpfunctie flexRender verwerkt definities van kopteksten en cellen als tekenreeks of functie op dezelfde manier.