Tri, filtrage et pagination

Pour ajouter le tri, importez getSortedRowModel et ajoutez-le à votre configuration de useReactTable. Vous avez également besoin d’un état de tri (un tableau d’objets {id, desc}) et d’un gestionnaire onSortingChange relié à l’état React.

Le modèle de lignes triées enveloppe le modèle de lignes de base et réordonne les lignes selon l’état de tri actuel.

Chaque en-tête de colonne expose column.getToggleSortingHandler(), que vous associez à onClick de votre élément th. Les clics font alterner les états de tri croissant, décroissant et sans tri.

column.getIsSorted() renvoie 'asc', 'desc' ou false, ce qui vous permet d’afficher la flèche indiquant le tri approprié.

TanStack Table prend en charge le tri simultané sur plusieurs colonnes. L’utilisateur maintient la touche Maj en cliquant sur l’en-tête d’une deuxième colonne afin de l’ajouter au tableau de tri sans retirer la première colonne.

Le tableau sortingState contient toutes les colonnes actuellement triées, dans l’ordre de priorité, et le modèle de lignes triées les applique successivement.

Activez le filtrage global en important getFilteredRowModel et en ajoutant l’état globalFilter ainsi qu’un gestionnaire onGlobalFilterChange. Reliez un élément de saisie à cet état pour filtrer toutes les colonnes en une seule fois.

Par défaut, le filtre global utilise une stratégie de correspondance approximative ou d’inclusion, configurable via filterFns.

Les colonnes individuelles peuvent exposer leurs propres filtres via column.getFilterValue() et column.setFilterValue(). Ajoutez un champ de saisie sous chaque en-tête de colonne et reliez-le à ces méthodes.

Les filtres de colonne et les filtres globaux se combinent : une ligne doit satisfaire tous les filtres actifs pour apparaître dans le modèle de lignes filtrées.

Importez getPaginationRowModel et ajoutez-le à la configuration de useReactTable, avec un objet d’état de pagination (pageIndex et pageSize) et un gestionnaire onPaginationChange.

Le modèle de lignes paginées extrait des lignes filtrées et triées uniquement la portion correspondant à la page actuelle.

L’instance de la table expose table.nextPage(), table.previousPage(), table.firstPage() et table.lastPage() pour la navigation. Utilisez table.getCanNextPage() et table.getCanPreviousPage() pour désactiver les boutons aux limites.

table.setPageIndex(n) permet d’accéder directement à une page donnée ; table.setPageSize(n) modifie le nombre de lignes affichées par page.

table.getPageCount() renvoie le nombre total de pages, calculé en divisant le nombre de lignes filtrées par pageSize. table.getState().pagination.pageIndex fournit l’index actuel de la page, en commençant à zéro.

Utilisez ces valeurs pour créer un compteur de pages tel que "Page 3 sur 12" dans votre interface de pagination.

Les modèles de lignes se composent : getCoreRowModel fournit la base, getFilteredRowModel l’enveloppe en appliquant les filtres, getSortedRowModel enveloppe les données filtrées en appliquant le tri, et getPaginationRowModel extrait le résultat correspondant à la page actuelle.

L’ordre est important : le tri intervient après le filtrage et la pagination en dernier.

TanStack Table mémorise en interne les calculs des modèles de lignes. Le tri et le filtrage de grands ensembles de données sont efficaces, car seuls les modèles de lignes modifiés sont recalculés.

Pour les ensembles de données extrêmement volumineux (100 000 lignes ou plus), combinez la pagination avec la virtualisation (react-virtual) afin d’éviter de rendre toutes les lignes de la page en même temps.

Reliez getSortedRowModel à l’état de tri, getFilteredRowModel à globalFilter et aux états des filtres de colonne, et getPaginationRowModel à l’état de pagination. Chaque fonctionnalité est activée explicitement et se combine proprement avec les autres.

Les en-têtes de colonne pilotent le tri via getToggleSortingHandler ; les champs de saisie pilotent le filtrage via setFilterValue et onGlobalFilterChange ; les boutons pilotent la pagination via nextPage, previousPage et setPageIndex.

Quel objet contient l’index de la page actuelle et la taille de page dans l’état de pagination de TanStack Table ?

Le tri nécessite getSortedRowModel, un état de tri et des gestionnaires de clic pour les en-têtes de colonne. Le filtrage utilise getFilteredRowModel avec un état de filtre global et par colonne. La pagination utilise getPaginationRowModel avec l’état pageIndex et pageSize.

Les trois modèles de lignes se combinent automatiquement : filtrage d’abord, tri ensuite, pagination en dernier.