Exemples de data table React : TanStack Table v9 avec Tailwind | We.Inc
Exemples TanStack Table v9 typés pour React : tri, recherche globale, pagination, sélection de lignes, visibilité des colonnes, en-tête fixe et données côté serveur, stylés avec Tailwind.
Exemples de data table React avec TanStack Table
TanStack Table est une bibliothèque de tableaux React headless : elle gère le tri, le filtrage, la pagination et la sélection pendant que vous écrivez le balisage. En version 9, vous déclarez chaque fonctionnalité avec tableFeatures, ajoutez un row model pour chaque étape côté client, appelez useTable, puis affichez en-têtes et cellules avec FlexRender. Les exemples ci-dessous sont vérifiés au typage avec la 9.3.
Choisir une approche
Lignes
Approche
Moins d'environ 50, sans interaction
Un simple tableau HTML
Quelques centaines à quelques milliers
TanStack Table, côté client
Des dizaines de milliers ou plus
TanStack Table avec tri et pagination manuels (serveur)
Pages uniques très longues
Ajoutez la virtualisation des lignes
Essayez le tableau fini, puis copiez le code qui le construit. L'aperçu en direct de cette page est dessiné avec du simple state React pour que la page reste légère ; le code à côté est la version TanStack v9 qui fait la même chose dans votre application.
Installez @tanstack/react-table.
Listez les fonctionnalités nécessaires dans tableFeatures, avec un emplacement de row model pour chaque étape effectuée dans le navigateur.
Définissez les colonnes avec createColumnHelper, en dehors du composant.
Appelez useTable avec les fonctionnalités, les colonnes et les données.
Affichez les groupes d'en-têtes et les lignes avec votre propre balisage et FlexRender.
Donnez aux lignes un identifiant stable avec getRowId pour que la sélection survive au tri et au rechargement des données.
Affichez row.getVisibleCells(), pas getAllCells(), dès que le masquage de colonnes est activé.
Définissez une seule fois le repli pour données vides, en dehors du composant ; un nouveau [] à chaque rendu invalide les row models.
Placez un bouton de tri dans chaque th triable pour qu'il soit accessible au clavier.
Formatez nombres et dates dans la fonction de cellule pour que le tri utilise toujours la valeur brute.
Questions fréquentes
React Table et TanStack Table, c'est la même chose ?
Oui. react-table v7 a été renommé TanStack Table à partir de la v8 et publié sous @tanstack/react-table. La version 9 garde le principe headless mais vous demande de déclarer explicitement les fonctionnalités, ce qui réduit la taille des bundles.
TanStack Table inclut-il des styles ?
Non. Il fournit uniquement l'état et les row models. Vous écrivez les éléments table, th et td et les stylez avec Tailwind, du CSS ou une bibliothèque de composants comme shadcn/ui.
Le tri et la pagination doivent-ils se faire côté serveur ?
Oui, quand le jeu de données complet est trop gros pour être envoyé au navigateur. Activez les options manuelles, envoyez l'état de tri et de page à votre API, et transmettez le nombre total de lignes pour que les contrôles de pagination fonctionnent.
Comment garder l'en-tête visible pendant le défilement ?
Donnez au conteneur une hauteur maximale et overflow auto, et rendez le thead sticky avec top 0 et une couleur de fond pour que les lignes ne transparaissent pas.
Un style prêt à l'emploi
Si vous préférez partir d'un design fini, notre galerie de composants propose une data table Tailwind avec tri, recherche, sélection de lignes et pagination, à copier en React ou en HTML. Pour les projets shadcn/ui, consultez notre guide des formulaires et tableaux shadcn.
Erreurs fréquentes
Déclarer les colonnes dans le composant sans les mémoïser, ce qui reconstruit le tableau à chaque rendu.
Activer manualPagination tout en passant toutes les lignes, si bien que la première page affiche tout.
Inverser l'ordre dans une fonction de tri personnalisée. Renvoyez une comparaison croissante ; la bibliothèque l'inverse pour l'ordre décroissant.
Mettre en place TanStack Table
Installation
Un seul paquet. Il n'a pas de styles et n'affiche rien par lui-même : c'est vous qui écrivez le balisage du tableau, d'où sa parfaite compatibilité avec Tailwind.
Le plus petit tableau fonctionnel
Les fonctionnalités sont listées en amont et passées une seule fois. Gardez les fonctionnalités, les colonnes et le tableau de données stables (hors du composant ou dans le state), sinon le tableau reconstruit ses lignes à chaque rendu.
Fonctionnalités et row models
Ce qu'il faut déclarer pour chaque comportement (v9)
Trier, rechercher, paginer, sélectionner, masquer des colonnes, en-tête fixe
Tout dans un seul composant, stylé avec des classes Tailwind. La ligne d'en-tête reste en place parce que le conteneur défile et que le thead est sticky. aria-sort indique aux lecteurs d'écran dans quel sens une colonne est triée.
Données côté serveur
Tri et pagination côté serveur
Pour les gros jeux de données, le serveur trie et renvoie une seule page. Omettez les emplacements de row model, activez les options manuelles et passez rowCount pour que le tableau sache combien de pages existent. L'état de tri et de page pilote la requête.