Wybór wierszy i tabele wirtualizowane

Należy dodać kolumnę zaznaczania do tablicy ColumnDef, używając identyfikatora 'select'. Komórka renderuje checkbox połączony z row.getToggleSelectedHandler(). Nagłówek renderuje checkbox zaznaczania wszystkich wierszy za pomocą table.getToggleAllRowsSelectedHandler().

Należy również przekazać stan rowSelection i onRowSelectionChange do useReactTable.

row.getIsSelected() zwraca true, gdy wiersz jest obecnie zaznaczony, dzięki czemu można łatwo zastosować wyróżniający kolor tła zaznaczonych wierszy.

row.getIsSomeSelected() obsługuje nieokreślony stan checkboxa, gdy zaznaczona jest tylko część wierszy w grupie (co jest przydatne w tabelach grupowanych).

table.getSelectedRowModel().rows zwraca tablicę wszystkich obecnie zaznaczonych obiektów wierszy. Każdy wiersz ma właściwość row.original zawierającą oryginalny obiekt danych.

W ten sposób można tworzyć przyciski akcji zbiorczych działających na zaznaczonym zbiorze, takich jak "Usuń zaznaczone" lub "Eksportuj zaznaczone".

Przyciski akcji należy renderować warunkowo na podstawie table.getSelectedRowModel().rows.length > 0. Gdy nie zaznaczono żadnych wierszy, należy ukryć lub wyłączyć pasek akcji zbiorczych, aby uniknąć mylących interakcji z pustym stanem.

W interfejsie należy wyświetlać liczbę zaznaczonych elementów: "{count} zaznaczonych wierszy" informuje użytkowników o bieżącym zaznaczeniu.

Renderowanie 10 000 wierszy jako węzłów DOM jest bardzo powolne. Przeglądarka musi rozmieścić, narysować i utrzymywać tysiące elementów. Użytkownicy odczuwają szarpane przewijanie i wolne początkowe renderowanie.

Wirtualizacja renderuje tylko wiersze aktualnie widoczne w obszarze widoku, znacznie zmniejszając rozmiar DOM i poprawiając wydajność.

Należy zainstalować @tanstack/react-virtual razem z @tanstack/react-table. Te dwie biblioteki są od siebie niezależne, ale zostały zaprojektowane do współpracy. TanStack Table zarządza logiką danych, a TanStack Virtual zarządza tym, które elementy są renderowane w DOM.

Punktem integracji jest tablica wierszy z table.getRowModel().rows.

Należy wywołać useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }). Wartość count określa liczbę istniejących elementów wirtualnych i odpowiada bieżącej liczbie wierszy tabeli po zastosowaniu wszystkich filtrów.

estimateSize udostępnia początkowe przybliżenie wysokości wiersza; rzeczywiste wysokości są mierzone podczas renderowania wierszy.

Należy wywołać virtualizer.getVirtualItems(), aby pobrać tylko wiersze, które powinny obecnie znajdować się w DOM. Następnie należy przejść po tej tablicy, pobrać rzeczywisty wiersz za pomocą table.getRowModel().rows[virtualRow.index] i renderować tylko te elementy tr.

Każdy element wirtualny ma właściwość start służącą do pozycjonowania absolutnego w kontenerze przewijania.

Aby zachować prawidłową pozycję przewijania, należy dodać górny element div o wysokości równej wartości start pierwszego elementu wirtualnego oraz dolny element div o wysokości równej całkowitemu rozmiarowi pomniejszonemu o koniec ostatniego elementu.

Te niewidoczne elementy div wypełniają miejsce, które zajmowałyby nierenderowane wiersze, dzięki czemu pasek przewijania zachowuje właściwe proporcje.

Należy przekazać measureElement: el => el.getBoundingClientRect().height do useVirtualizer, aby dokładnie mierzyć dynamiczne wysokości wierszy. Ref każdego wiersza należy przypisać do elementu tr, aby wirtualizator mógł zmierzyć jego rzeczywistą wysokość po renderowaniu.

Obsługuje to wiersze o różnej zawartości (tekst wielowierszowy, rozwinięte wiersze) bez przesunięć układu.

TanStack Table z sortowaniem, filtrowaniem, paginacją, zaznaczaniem wierszy i TanStack Virtual współdziała jako spójna całość. Liczba wierszy przekazywana do useVirtualizer powinna pochodzić z table.getRowModel().rows po przetworzeniu danych przez wszystkie aktywne modele wierszy.

Po włączeniu paginacji najpierw należy zastosować paginację, a następnie wirtualizować wiersze bieżącej strony, aby zapewnić płynne przewijanie na dużej stronie.

Jaka metoda zwraca oryginalne obiekty danych dla wszystkich obecnie zaznaczonych wierszy?

Zaznaczanie wierszy korzysta z kolumny checkboxów z getToggleSelectedHandler, stanu rowSelection oraz table.getSelectedRowModel().rows do uzyskiwania dostępu do zaznaczonych danych. Wirtualizacja z useVirtualizer renderuje tylko widoczne wiersze za pomocą getVirtualItems, elementów div wypełniających odstępy oraz opcjonalnego measureElement do obsługi dynamicznych wysokości.

Wszystkie funkcje TanStack Table (sortowanie, filtrowanie, paginacja i zaznaczanie) dobrze współdziałają z renderowaniem wirtualnym.