Zeilenauswahl und virtualisierte Tabellen

Fügen Sie Ihrem ColumnDef-Array eine Auswahlspalte mit der ID 'select' hinzu. Die Zelle rendert ein Kontrollkästchen, das mit row.getToggleSelectedHandler() verbunden ist. Die Überschrift rendert mithilfe von table.getToggleAllRowsSelectedHandler() ein Kontrollkästchen zur Auswahl aller Zeilen.

Übergeben Sie useReactTable außerdem den rowSelection-State und onRowSelectionChange.

row.getIsSelected() gibt true zurück, wenn eine Zeile aktuell ausgewählt ist. Dies eignet sich perfekt, um ausgewählten Zeilen einen hervorgehobenen Hintergrundstil zuzuweisen.

row.getIsSomeSelected() behandelt den unbestimmten Zustand des Kontrollkästchens, wenn nur einige Zeilen einer Gruppe ausgewählt sind (nützlich für gruppierte Tabellen).

table.getSelectedRowModel().rows gibt ein Array aller aktuell ausgewählten Zeilenobjekte zurück. Jede Zeile besitzt eine row.original-Eigenschaft, die das ursprüngliche Datenobjekt enthält.

Auf diese Weise erstellen Sie Schaltflächen für Massenaktionen, die auf die ausgewählte Menge angewendet werden, z. B. „Ausgewählte löschen“ oder „Ausgewählte exportieren“.

Rendern Sie Aktionsschaltflächen abhängig davon, ob table.getSelectedRowModel().rows.length > 0 ist. Wenn keine Zeilen ausgewählt sind, blenden Sie die Toolbar für Massenaktionen aus oder deaktivieren Sie sie, um verwirrende Interaktionen mit einem leeren Zustand zu vermeiden.

Zeigen Sie die Anzahl der ausgewählten Zeilen in der Oberfläche an: „{count} Zeilen ausgewählt“ informiert die Benutzer über ihre Auswahl.

Das Rendern von 10.000 Zeilen als DOM-Knoten ist extrem langsam. Der Browser muss Tausende von Elementen layouten, zeichnen und verwalten. Benutzer erleben ruckeliges Scrollen und langsame erste Render-Vorgänge.

Virtualisierung rendert nur die Zeilen, die aktuell im Viewport sichtbar sind. Dadurch wird die DOM-Größe erheblich reduziert und die Performance verbessert.

Installieren Sie @tanstack/react-virtual zusammen mit @tanstack/react-table. Die beiden Bibliotheken sind getrennt, wurden aber als Ergänzung füreinander entwickelt. TanStack Table verwaltet Ihre Datenlogik, während TanStack Virtual festlegt, welche Elemente im DOM gerendert werden.

Die Integrationsstelle ist das Zeilen-Array aus table.getRowModel().rows.

Rufen Sie useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }) auf. count bestimmt, wie viele virtuelle Elemente existieren, entsprechend der aktuellen Zeilenanzahl der Tabelle nach allen Filtern.

estimateSize liefert eine anfängliche Schätzung der Zeilenhöhe; die tatsächlichen Höhen werden beim Rendern der Zeilen gemessen.

Rufen Sie virtualizer.getVirtualItems() auf, um nur die Zeilen abzurufen, die aktuell im DOM vorhanden sein sollten. Iterieren Sie über dieses Array, greifen Sie über table.getRowModel().rows[virtualRow.index] auf die echte Zeile zu und rendern Sie nur diese tr-Elemente.

Jedes virtuelle Element besitzt eine start-Eigenschaft für die absolute Positionierung innerhalb des Scroll-Containers.

Um die korrekte Scrollposition beizubehalten, fügen Sie ein oberes Spacer-div mit einer Höhe hinzu, die dem start-Wert des ersten virtuellen Elements entspricht, sowie ein unteres Spacer-div mit einer Höhe, die der Gesamtgröße abzüglich des end-Werts des letzten Elements entspricht.

Diese unsichtbaren div-Elemente füllen den Platz, den nicht gerenderte Zeilen einnehmen würden, und halten dadurch den Scrollbalken proportional korrekt.

Übergeben Sie measureElement: el => el.getBoundingClientRect().height an useVirtualizer, um genaue dynamische Zeilenhöhen zu erhalten. Die ref jeder Zeile wird am tr-Element angebracht, damit der Virtualizer die tatsächlich gerenderte Höhe messen kann.

Damit werden Zeilen mit variierendem Inhalt (mehrzeiliger Text, aufgeklappte Zeilen) ohne Layout-Verschiebungen unterstützt.

TanStack Table mit Sortierung, Filtern, Pagination, Zeilenauswahl und TanStack Virtual lässt sich vollständig kombinieren. Die an useVirtualizer übergebene Zeilenanzahl sollte aus table.getRowModel().rows stammen, nachdem alle aktiven Zeilenmodelle die Daten verarbeitet haben.

Bei aktivierter Pagination paginieren Sie zuerst und virtualisieren dann die Zeilen der aktuellen Seite, um innerhalb einer großen Seite flüssiges Scrollen zu ermöglichen.

Welche Methode gibt die ursprünglichen Datenobjekte für alle aktuell ausgewählten Zeilen zurück?

Die Zeilenauswahl verwendet eine Kontrollkästchenspalte mit getToggleSelectedHandler, den rowSelection-State und table.getSelectedRowModel().rows, um auf ausgewählte Daten zuzugreifen. Die Virtualisierung mit useVirtualizer rendert mithilfe von getVirtualItems, Spacer-divs und optionalem measureElement für dynamische Höhen nur sichtbare Zeilen.

Alle TanStack-Table-Funktionen (Sortierung, Filter, Pagination und Auswahl) lassen sich problemlos mit virtuellem Rendern kombinieren.