Sélection de lignes et tableaux virtualisés

Ajoutez une colonne de sélection à votre tableau ColumnDef en utilisant l’identifiant 'select'. La cellule affiche une case à cocher reliée à row.getToggleSelectedHandler(). L’en-tête affiche une case à cocher permettant de tout sélectionner, avec table.getToggleAllRowsSelectedHandler().

Transmettez également l’état rowSelection et onRowSelectionChange à useReactTable.

row.getIsSelected() renvoie true lorsqu’une ligne est actuellement sélectionnée, ce qui est idéal pour appliquer un style d’arrière-plan mis en évidence aux lignes sélectionnées.

row.getIsSomeSelected() gère l’état indéterminé d’une case à cocher lorsque seules certaines lignes d’un groupe sont sélectionnées, ce qui est utile pour les tables groupées.

table.getSelectedRowModel().rows renvoie un tableau de tous les objets ligne actuellement sélectionnés. Chaque ligne possède une propriété row.original contenant l’objet de données d’origine.

C’est ainsi que vous créez des boutons d’actions groupées qui agissent sur l’ensemble sélectionné, comme "Supprimer la sélection" ou "Exporter la sélection".

Affichez conditionnellement les boutons d’action en fonction de table.getSelectedRowModel().rows.length > 0. Lorsqu’aucune ligne n’est sélectionnée, masquez ou désactivez la barre d’outils des actions groupées afin d’éviter de dérouter l’utilisateur avec des interactions vides.

Affichez le nombre d’éléments sélectionnés dans l’interface : "{count} lignes sélectionnées" permet aux utilisateurs de savoir ce qui est sélectionné.

Rendre 10 000 lignes sous forme de nœuds DOM est extrêmement lent. Le navigateur doit mettre en page, peindre et maintenir des milliers d’éléments. Les utilisateurs constatent un défilement saccadé et des rendus initiaux lents.

La virtualisation ne rend que les lignes actuellement visibles dans la fenêtre d’affichage, ce qui réduit considérablement la taille du DOM et améliore les performances.

Installez @tanstack/react-virtual en complément de @tanstack/react-table. Les deux bibliothèques sont distinctes, mais conçues pour se compléter. TanStack Table gère la logique de vos données ; TanStack Virtual gère les éléments rendus dans le DOM.

Le point d’intégration est le tableau de lignes provenant de table.getRowModel().rows.

Appelez useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }). count détermine le nombre d’éléments virtualisés existants, qui correspond au nombre actuel de lignes de la table après l’application de tous les filtres.

estimateSize fournit une estimation initiale de la hauteur des lignes ; leurs hauteurs réelles sont mesurées au fur et à mesure de leur rendu.

Appelez virtualizer.getVirtualItems() pour obtenir uniquement les lignes qui doivent actuellement se trouver dans le DOM. Parcourez ce tableau, accédez à la ligne réelle via table.getRowModel().rows[virtualRow.index] et ne rendez que ces éléments tr.

Chaque élément virtualisé possède une propriété start pour son positionnement absolu dans le conteneur de défilement.

Pour conserver une position de défilement correcte, ajoutez un div d’espacement supérieur dont la hauteur est égale à start du premier élément virtualisé, ainsi qu’un div d’espacement inférieur dont la hauteur est égale à la taille totale moins la fin du dernier élément.

Ces divs invisibles remplissent l’espace qu’occuperaient les lignes non rendues et maintiennent une proportion correcte de la barre de défilement.

Transmettez measureElement: el => el.getBoundingClientRect().height à useVirtualizer pour obtenir des hauteurs de lignes dynamiques précises. La référence de chaque ligne est attachée à l’élément tr afin que le virtualiseur mesure sa hauteur réelle après rendu.

Cela prend en charge les lignes dont le contenu varie (texte sur plusieurs lignes, lignes développées) sans provoquer de décalages de mise en page.

TanStack Table avec tri, filtrage, pagination, sélection des lignes et TanStack Virtual se combine entièrement. Le nombre de lignes transmis à useVirtualizer doit provenir de table.getRowModel().rows après le traitement des données par tous les modèles de lignes actifs.

Lorsque la pagination est activée, paginez d’abord, puis virtualisez les lignes de la page actuelle pour obtenir un défilement fluide au sein d’une page volumineuse.

Quelle méthode renvoie les objets de données d’origine de toutes les lignes actuellement sélectionnées ?

La sélection des lignes utilise une colonne de cases à cocher avec getToggleSelectedHandler, l’état rowSelection et table.getSelectedRowModel().rows pour accéder aux données sélectionnées. La virtualisation avec useVirtualizer ne rend que les lignes visibles à l’aide de getVirtualItems, de divs d’espacement et, éventuellement, de measureElement pour les hauteurs dynamiques.

Toutes les fonctionnalités de TanStack Table (tri, filtrage, pagination, sélection) se combinent proprement avec le rendu virtualisé.