Esempi di Data Table React: TanStack Table v9 con Tailwind | We.Inc
Esempi tipizzati di TanStack Table v9 per React: ordinamento, ricerca globale, paginazione, selezione delle righe, visibilità delle colonne, un header sticky e dati lato server, con stili Tailwind.
Esempi di Data Table React con TanStack Table
TanStack Table è una libreria headless per tabelle React: gestisce ordinamento, filtri, paginazione e selezione mentre tu scrivi il markup. Nella versione 9 registri ogni funzionalità con tableFeatures, aggiungi un row model per ogni passaggio lato client, chiami useTable e renderizzi header e celle con FlexRender. Gli esempi qui sotto sono verificati con i tipi della 9.3.
Scegli un approccio
Righe
Approccio
Meno di circa 50, nessuna interazione
Una semplice tabella HTML
Da centinaia a qualche migliaio
TanStack Table, lato client
Decine di migliaia o più
TanStack Table con ordinamento e paginazione manuali (lato server)
Pagine singole molto lunghe
Aggiungi la virtualizzazione delle righe
Prova la tabella finita, poi copia il codice che la costruisce. L'anteprima dal vivo in questa pagina è disegnata con il semplice state di React così la pagina resta leggera; il codice accanto è la versione TanStack v9 che fa la stessa cosa nella tua app.
Installa @tanstack/react-table.
Elenca le funzionalità che ti servono in tableFeatures, con uno slot di row model per ogni passaggio eseguito nel browser.
Definisci le colonne con createColumnHelper, fuori dal componente.
Chiama useTable con features, columns e data.
Renderizza gruppi di header e righe con il tuo markup e FlexRender.
Dai alle righe un id stabile con getRowId così la selezione sopravvive a ordinamento e nuovi caricamenti.
Renderizza row.getVisibleCells(), non getAllCells(), quando nascondere le colonne è attivo.
Definisci il fallback per i dati vuoti una volta sola fuori dal componente; un nuovo [] a ogni render invalida i row model.
Metti un pulsante di ordinamento dentro ogni th ordinabile così è raggiungibile da tastiera.
Formatta numeri e date nella funzione della cella così l'ordinamento usa ancora il valore grezzo.
Domande frequenti
React Table è la stessa cosa di TanStack Table?
Sì. react-table v7 è stato rinominato TanStack Table dalla v8 e pubblicato come @tanstack/react-table. La versione 9 mantiene l'idea headless ma ti chiede di registrare le funzionalità in modo esplicito, il che rende i bundle più piccoli.
TanStack Table include degli stili?
No. Ti dà solo state e row model. Scrivi tu gli elementi table, th e td e li stilizzi con Tailwind, CSS o una libreria di componenti come shadcn/ui.
Ordinamento e paginazione devono avvenire sul server?
Quando l'intero dataset è troppo grande per essere inviato al browser, sì. Imposta le opzioni manual, invia lo stato di ordinamento e pagina alla tua API e passa il numero totale di righe così i controlli di pagina funzionano.
Come mantengo l'header visibile durante lo scroll?
Dai al contenitore un'altezza massima e overflow auto, e rendi il thead sticky con top 0 e un colore di sfondo così le righe non si vedono attraverso.
Stili già pronti
Se preferisci partire da un design finito, la nostra galleria di componenti ha una data table Tailwind con ordinamento, ricerca, selezione delle righe e paginazione che puoi copiare in React o HTML. Per i progetti shadcn/ui, consulta la nostra guida a form e tabelle shadcn.
Errori comuni
Dichiarare le colonne dentro il componente senza memoizzarle, il che ricostruisce la tabella a ogni render.
Attivare manualPagination ma passare comunque tutte le righe, così la prima pagina mostra tutto.
Invertire l'ordine dentro una funzione di ordinamento personalizzata. Restituisci un confronto crescente; la libreria lo inverte per l'ordine decrescente.
Configurare TanStack Table
Installazione
Un solo pacchetto. Non ha stili e da solo non renderizza nulla: scrivi tu il markup della tabella, ed è per questo che si adatta così bene a Tailwind.
La tabella funzionante più piccola
Le funzionalità vengono elencate all'inizio e passate una volta sola. Mantieni stabili features, columns e l'array di dati (fuori dal componente o nello state), altrimenti la tabella ricostruisce le righe a ogni render.
Tutto in un solo componente, con classi Tailwind. La riga di header resta ferma perché il contenitore scorre e il thead è sticky. aria-sort indica agli screen reader in quale verso è ordinata una colonna.
Dati lato server
Ordinamento e paginazione lato server
Per dataset grandi il server ordina e restituisce una pagina. Ometti gli slot dei row model, imposta i flag manual e passa rowCount così la tabella sa quante pagine esistono. Lo stato di ordinamento e di pagina guida la richiesta.