Definere kolonner og gjengi rader

Hver kolonne i TanStack Table beskrives av et ColumnDef-objekt. De to viktigste feltene er accessorKey (egenskapsnavnet i dataobjektet) og header (kolonneetiketten som tekststreng eller renderingsfunksjon).

accessorKey-tilnærmingen er ideell for flate data, mens komplekse eller beregnede verdier krever accessorFn.

Når dataene Deres har en direkte egenskap som name eller email, bruker De accessorKey: 'name'. Når De må beregne en verdi, for eksempel ved å kombinere firstName og lastName, bruker De accessorFn: row => row.firstName + ' ' + row.lastName.

Begge blir fullt typet når De oppgir row-dataets generic til ColumnDef.

cell-feltet i en ColumnDef tar imot en funksjon som mottar cellekonteksten og returnerer JSX. Slik gjengir De badges, knapper, bilder eller et hvilket som helst annet egendefinert brukergrensesnitt i en celle.

For rene tekstverdier er cell.renderValue() tilstrekkelig. For alt som er mer omfattende, kan De destrukturere info fra cell.getContext().

Definer kolonnematrisen utenfor komponenten for å unngå å opprette den på nytt ved hver rendering. Send matrisen til useReactTable sammen med data og getCoreRowModel.

TypeScript deduserer kolonnetypene når De angir ColumnDef med datatypen Deres, og gir Dem autofullføring for accessorKey-verdier.

getCoreRowModel er en fabrikkfunksjon som importeres fra @tanstack/react-table. De sender returverdien til useReactTable for å fortelle instansen hvordan den skal bygge den grunnleggende listen med rader fra datamatrisen.

Ytterligere radmodeller (sorterte, filtrerte og paginerte) legges oppå ved å sende inn flere modellfabrikker.

Kall table.getHeaderGroups() og map over resultatet for å gjengi thead. Hver header-gruppe har en headers-array, og hver header har en kolonnedefinisjon og en id.

Bruk flexRender(header.column.columnDef.header, header.getContext()) for å gjengi innholdet i overskriften, enten det er en tekststreng eller en funksjon som returnerer JSX.

Kall table.getRowModel().rows og map hver rad til et tr-element. Inni den kaller De row.getVisibleCells() og mapper hver celle til en td.

Bruk flexRender(cell.column.columnDef.cell, cell.getContext()) for å gjengi celleinnholdet, samtidig som en eventuell egendefinert cell-renderer som er definert i kolonnen, respekteres.

flexRender er en hjelpefunksjon som tar imot enten en React-komponent, en funksjon som returnerer JSX eller en vanlig verdi, og gjengir den på en ensartet måte. Den gjør det mulig for kolonnedefinisjoner å bruke enten enkle tekststrenger eller fullstendige renderingsfunksjoner for overskrifter og celler.

Denne samlede API-en betyr at De ikke trenger å kontrollere definisjonens type før rendering.

cell.renderValue() returnerer den rå accessor-verdien formatert som en tekststreng. For mer kontroll gir cell.getContext() Dem hele renderingskonteksten, inkludert raden, kolonnen, tabellinstansen og råverdien.

Egendefinerte cell-renderere bruker konteksten til å få tilgang til relaterte data fra raden utover den ene accessor-verdien.

Hver ColumnDef godtar et meta-felt der De kan legge til vilkårlige metadata, som isSticky: true eller alignment: 'right'. Hent dette i rendereren via column.columnDef.meta.

For å feste kolonner til venstre eller høyre tilbyr TanStack Table state for column pinning og hjelpemetoder på kolonneobjektet.

Definer en ColumnDef-array med accessorKey, header og eventuelt cell. Kall useReactTable med data, columns og getCoreRowModel. Map getHeaderGroups for thead og getRowModel().rows for tbody, og bruk flexRender til å gjengi hver overskrift og celle.

Dette minimale oppsettet gir Dem en fullt funksjonell tabell med fullstendig egendefinert styling.

Definer kolonner ved hjelp av ColumnDef, med accessorKey for direkte felter eller accessorFn for beregnede verdier. Send columns og getCoreRowModel til useReactTable, og gjengi deretter med getHeaderGroups for overskrifter og getRowModel().rows for body-rader.

Hjelpefunksjonen flexRender håndterer både tekststrengbaserte og funksjonsbaserte overskrifts- og celldefinisjoner på en ensartet måte.