Ordinamento, filtraggio e paginazione

Per aggiungere l’ordinamento, importi getSortedRowModel e lo aggiunga alla configurazione di useReactTable. È inoltre necessario uno stato di ordinamento, ovvero un array di oggetti {id, desc}, e un gestore onSortingChange collegato allo stato di React.

Il modello di righe ordinate avvolge il modello di righe principale e riordina le righe in base allo stato di ordinamento corrente.

Ogni intestazione di colonna espone column.getToggleSortingHandler(), che deve essere collegato all’evento onClick dell’elemento th. Facendo clic, si alternano gli stati crescente, decrescente e non ordinato.

column.getIsSorted() restituisce 'asc', 'desc' o false, consentendo di visualizzare la freccia indicatrice dell’ordinamento appropriata.

TanStack Table supporta l’ordinamento simultaneo su più colonne. Per aggiungere una seconda colonna all’array di ordinamento senza rimuovere la prima, l’utente tiene premuto il tasto Shift mentre fa clic sull’intestazione della seconda colonna.

L’array sortingState contiene tutte le colonne attivamente ordinate, in ordine di priorità, e il modello di righe ordinate applica i criteri in sequenza.

Abiliti il filtraggio globale importando getFilteredRowModel e aggiungendo lo stato globalFilter insieme a un gestore onGlobalFilterChange. Colleghi un elemento input allo stato per filtrare contemporaneamente tutte le colonne.

Per impostazione predefinita, il filtro globale utilizza una strategia di corrispondenza fuzzy o includes, configurabile tramite filterFns.

Le singole colonne possono esporre i propri filtri tramite column.getFilterValue() e column.setFilterValue(). Aggiunga un input di filtro sotto ogni intestazione di colonna e lo colleghi a questi metodi.

I filtri di colonna e i filtri globali si combinano: per comparire nel modello di righe filtrate, una riga deve superare tutti i filtri attivi.

Importi getPaginationRowModel e lo aggiunga alla configurazione di useReactTable insieme a un oggetto di stato della paginazione, contenente pageIndex e pageSize, e a un gestore onPaginationChange.

Il modello di righe impaginato suddivide le righe filtrate e ordinate, mostrando solo la porzione relativa alla pagina corrente.

L’istanza della tabella espone table.nextPage(), table.previousPage(), table.firstPage() e table.lastPage() per la navigazione. Utilizzi table.getCanNextPage() e table.getCanPreviousPage() per disabilitare i pulsanti quando si raggiungono i limiti.

table.setPageIndex(n) consente di passare direttamente a una pagina specifica, mentre table.setPageSize(n) modifica il numero di righe visualizzate per pagina.

table.getPageCount() restituisce il numero totale di pagine, calcolato dividendo il numero di righe filtrate per pageSize. table.getState().pagination.pageIndex restituisce l’indice corrente della pagina, a base zero.

Utilizzi questi valori per creare nell’interfaccia di paginazione un contatore come "Pagina 3 di 12".

I modelli di righe sono componibili: getCoreRowModel fornisce la base, getFilteredRowModel la avvolge applicando i filtri, getSortedRowModel avvolge i dati filtrati applicando l’ordinamento e getPaginationRowModel suddivide il risultato per la pagina corrente.

L’ordine è importante: l’ordinamento viene applicato dopo il filtraggio e la paginazione per ultima.

TanStack Table memorizza internamente i calcoli dei modelli di righe. L’ordinamento e il filtraggio di grandi insiemi di dati sono efficienti perché vengono ricalcolati solo i modelli di righe modificati.

Per insiemi di dati estremamente grandi, con oltre 100.000 righe, combini la paginazione con la virtualizzazione (react-virtual) per evitare di eseguire il rendering di tutte le righe della pagina contemporaneamente.

Colleghi getSortedRowModel allo stato di ordinamento, getFilteredRowModel a globalFilter e agli stati dei filtri di colonna, e getPaginationRowModel allo stato della paginazione. Ogni funzionalità è opzionale e si combina senza problemi con le altre.

Le intestazioni delle colonne gestiscono l’ordinamento tramite getToggleSortingHandler; gli input gestiscono i filtri tramite setFilterValue e onGlobalFilterChange; i pulsanti gestiscono la paginazione tramite nextPage, previousPage e setPageIndex.

Quale oggetto contiene l’indice della pagina corrente e la dimensione della pagina nello stato della paginazione di TanStack Table?

L’ordinamento richiede getSortedRowModel, uno stato di ordinamento e gestori per il clic sulle intestazioni delle colonne. Il filtraggio utilizza getFilteredRowModel con uno stato dei filtri globale e dei filtri per colonna. La paginazione utilizza getPaginationRowModel con lo stato pageIndex e pageSize.

I tre modelli di righe si combinano automaticamente: prima il filtraggio, poi l’ordinamento e infine la paginazione.