Selezione delle righe e tabelle virtualizzate

Aggiunga una colonna di selezione al suo array ColumnDef utilizzando l’id 'select'. La cella esegue il rendering di una casella di controllo collegata a row.getToggleSelectedHandler(). L’intestazione esegue il rendering di una casella di controllo per selezionare tutte le righe tramite table.getToggleAllRowsSelectedHandler().

Passi inoltre lo stato rowSelection e onRowSelectionChange a useReactTable.

row.getIsSelected() restituisce true quando una riga è selezionata, risultando ideale per applicare uno stile di sfondo evidenziato alle righe selezionate.

row.getIsSomeSelected() gestisce lo stato indeterminato della casella di controllo quando è selezionata solo una parte delle righe di un gruppo, una situazione utile nelle tabelle raggruppate.

table.getSelectedRowModel().rows restituisce un array contenente tutti gli oggetti riga attualmente selezionati. Ogni riga dispone di una proprietà row.original che contiene l’oggetto dati originale.

È così possibile creare pulsanti per le azioni collettive che operano sull’insieme selezionato, come "Elimina selezionati" o "Esporta selezionati".

Esegua il rendering condizionale dei pulsanti delle azioni in base a table.getSelectedRowModel().rows.length > 0. Quando non è selezionata alcuna riga, nasconda o disabiliti la barra degli strumenti delle azioni collettive per evitare interazioni con uno stato vuoto che potrebbero confondere l’utente.

Visualizzi nell’interfaccia il numero di elementi selezionati: "{count} righe selezionate" consente di mantenere l’utente informato sulla selezione.

Eseguire il rendering di 10.000 righe come nodi DOM è estremamente lento. Il browser deve calcolare il layout, eseguire il paint e gestire migliaia di elementi. L’utente sperimenta uno scorrimento poco fluido e un rendering iniziale lento.

La virtualizzazione esegue il rendering solo delle righe attualmente visibili nell’area di visualizzazione, riducendo drasticamente le dimensioni del DOM e migliorando le prestazioni.

Installi @tanstack/react-virtual insieme a @tanstack/react-table. Le due librerie sono separate, ma sono progettate per completarsi a vicenda. TanStack Table gestisce la logica dei dati, mentre TanStack Virtual gestisce quali elementi vengono renderizzati nel DOM.

Il punto di integrazione è l’array di righe restituito da table.getRowModel().rows.

Chiami useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }). count determina il numero di elementi virtuali esistenti, in linea con il numero corrente di righe della tabella dopo l’applicazione di tutti i filtri.

estimateSize fornisce una stima iniziale dell’altezza delle righe; le altezze effettive vengono misurate durante il rendering delle righe.

Chiami virtualizer.getVirtualItems() per ottenere solo le righe che dovrebbero essere attualmente presenti nel DOM. Esegua il mapping su questo array, acceda alla riga reale tramite table.getRowModel().rows[virtualRow.index] ed esegua il rendering solo di quegli elementi tr.

Ogni elemento virtuale dispone di una proprietà start per il posizionamento assoluto all’interno del contenitore scorrevole.

Per mantenere corretta la posizione di scorrimento, aggiunga un div distanziatore superiore con un’altezza uguale a start del primo elemento virtuale e un div distanziatore inferiore con un’altezza uguale alla dimensione totale meno end dell’ultimo elemento.

Questi div invisibili riempiono lo spazio che occuperebbero le righe non renderizzate, mantenendo proporzionata la barra di scorrimento.

Passi measureElement: el => el.getBoundingClientRect().height a useVirtualizer per ottenere altezze dinamiche precise. Il ref di ogni riga viene collegato all’elemento tr, consentendo al virtualizer di misurarne l’altezza effettiva dopo il rendering.

In questo modo è possibile gestire righe con contenuti di altezza variabile, come testo su più righe e righe espanse, senza spostamenti del layout.

TanStack Table con ordinamento, filtraggio, paginazione, selezione delle righe e TanStack Virtual si combina in modo uniforme. Il numero di righe passato a useVirtualizer deve provenire da table.getRowModel().rows dopo che tutti i modelli di righe attivi hanno elaborato i dati.

Con la paginazione abilitata, impagini prima i dati e poi virtualizzi le righe della pagina corrente per ottenere uno scorrimento fluido anche in una pagina di grandi dimensioni.

La selezione delle righe utilizza una colonna con caselle di controllo e getToggleSelectedHandler, lo stato rowSelection e table.getSelectedRowModel().rows per accedere ai dati selezionati. La virtualizzazione con useVirtualizer esegue il rendering solo delle righe visibili utilizzando getVirtualItems, div distanziatori e, facoltativamente, measureElement per le altezze dinamiche.

Tutte le funzionalità di TanStack Table, ovvero ordinamento, filtraggio, paginazione e selezione, si combinano senza problemi con il rendering virtuale.