Definire le colonne e renderizzare le righe

Ogni colonna in TanStack Table viene descritta da un oggetto ColumnDef. I due campi più importanti sono accessorKey (il nome della proprietà nell'oggetto dei dati) e header (la stringa dell'etichetta della colonna o una funzione di rendering).

L'approccio con accessorKey è ideale per i dati piatti; per valori complessi o calcolati è necessario usare accessorFn.

Quando i dati contengono una proprietà diretta come name o email, si usa accessorKey: 'name'. Quando è necessario calcolare un valore, ad esempio combinando firstName e lastName, si usa accessorFn: row => row.firstName + ' ' + row.lastName.

Entrambi sono completamente tipizzati quando si fornisce il tipo generico dei dati della riga a ColumnDef.

Il campo cell di un ColumnDef accetta una funzione che riceve il contesto della cella e restituisce JSX. È così che si esegue il rendering di badge, pulsanti, immagini o qualsiasi altro elemento UI personalizzato all'interno di una cella.

Per valori di testo semplici è sufficiente cell.renderValue(). Per contenuti più ricchi, si destrutturano le informazioni da cell.getContext().

Definisca le colonne all'esterno del componente per evitare di ricrearle a ogni rendering. Passi l'array a useReactTable insieme a data e getCoreRowModel.

TypeScript dedurrà i tipi delle colonne quando si annota ColumnDef con il tipo dei dati, offrendo il completamento automatico per i valori di accessorKey.

getCoreRowModel è una funzione factory importata da @tanstack/react-table. Se ne passa il valore restituito a useReactTable per indicare all'istanza come costruire l'elenco di base delle righe a partire dall'array di dati.

Ulteriori row model (ordinati, filtrati o paginati) vengono sovrapposti passando altre funzioni factory.

Si chiama table.getHeaderGroups() e si scorre il risultato con map per eseguire il rendering di thead. Ogni gruppo di intestazioni contiene un array headers; ogni intestazione contiene una definizione di colonna e un id.

Si usa flexRender(header.column.columnDef.header, header.getContext()) per eseguire il rendering del contenuto dell'intestazione, sia che si tratti di una stringa sia di una funzione che restituisce JSX.

Si chiama table.getRowModel().rows e si associa ogni riga a un elemento tr. Al suo interno, si chiama row.getVisibleCells() e si associa ogni cella a un elemento td.

Si usa flexRender(cell.column.columnDef.cell, cell.getContext()) per eseguire il rendering del contenuto delle celle, rispettando qualsiasi renderer personalizzato definito nella colonna.

flexRender è un metodo di supporto che accetta un componente React, una funzione che restituisce JSX oppure un valore semplice, ed esegue il rendering in modo coerente. Permette alle definizioni delle colonne di usare stringhe semplici o funzioni di rendering complete per intestazioni e celle.

Questa API unificata evita di dover verificare il tipo della definizione prima di eseguirne il rendering.

cell.renderValue() restituisce il valore grezzo dell'accessor formattato come stringa. Per un controllo maggiore, cell.getContext() fornisce il contesto completo del rendering, inclusi la riga, la colonna, l'istanza della tabella e il valore grezzo.

I renderer personalizzati delle celle usano il contesto per accedere ai dati correlati della riga oltre il singolo valore dell'accessor.

Ogni ColumnDef accetta un campo meta al quale è possibile associare metadati arbitrari, come isSticky: true o alignment: 'right'. È possibile accedervi nel renderer tramite column.columnDef.meta.

Per fissare le colonne a sinistra o a destra, TanStack Table fornisce lo stato di column pinning e metodi di supporto sull'oggetto colonna.

Definisca l'array ColumnDef con accessorKey, header e un cell opzionale. Chiami useReactTable con data, columns e getCoreRowModel. Esegua il mapping di getHeaderGroups per thead e di getRowModel().rows per tbody, usando flexRender per eseguire il rendering di ogni intestazione e cella.

Questa configurazione minima fornisce una tabella completamente funzionale e con stili completamente personalizzabili.

Quando è necessario usare accessorFn invece di accessorKey nella definizione di una colonna TanStack Table?

Definisca le colonne usando ColumnDef con accessorKey per i campi diretti o accessorFn per i valori calcolati. Passi columns e getCoreRowModel a useReactTable, quindi esegua il rendering usando getHeaderGroups per le intestazioni e getRowModel().rows per le righe del corpo.

L'utilità flexRender gestisce in modo uniforme sia le definizioni di intestazioni e celle basate su stringhe sia quelle basate su funzioni.