Sortowanie, filtrowanie i paginacja

Aby dodać sortowanie, należy zaimportować getSortedRowModel i dodać je do konfiguracji useReactTable. Potrzebny jest również stan sortowania (tablica obiektów {id, desc}) oraz procedura obsługi onSortingChange połączona ze stanem React.

Model posortowanych wierszy opakowuje podstawowy model wierszy i zmienia kolejność wierszy na podstawie bieżącego stanu sortowania.

Każdy nagłówek kolumny udostępnia column.getToggleSortingHandler(), który należy przypisać do onClick elementu th. Klikanie przełącza kolejno stany rosnący, malejący i niesortowany.

column.getIsSorted() zwraca 'asc', 'desc' lub false, co pozwala wyświetlić odpowiednią strzałkę sortowania.

TanStack Table obsługuje jednoczesne sortowanie według wielu kolumn. Przytrzymanie klawisza Shift podczas klikania nagłówka drugiej kolumny dodaje ją do tablicy sortowania bez usuwania pierwszej kolumny.

Tablica sortingState zawiera wszystkie aktywne kolumny sortowania w kolejności priorytetów, a model posortowanych wierszy stosuje te kryteria kolejno.

Filtrowanie globalne można włączyć, importując getFilteredRowModel i dodając stan globalFilter oraz procedurę obsługi onGlobalFilterChange. Należy połączyć element input ze stanem, aby filtrować wszystkie kolumny jednocześnie.

Filtr globalny domyślnie używa strategii fuzzy match lub includes; można ją skonfigurować za pomocą filterFns.

Poszczególne kolumny mogą udostępniać własne filtry za pomocą column.getFilterValue() i column.setFilterValue(). Pod każdym nagłówkiem kolumny należy dodać pole wejściowe i połączyć je z tymi metodami.

Filtry kolumn i filtry globalne są stosowane łącznie: aby wiersz pojawił się w przefiltrowanym modelu wierszy, musi przejść przez wszystkie aktywne filtry.

Należy zaimportować getPaginationRowModel i dodać je do konfiguracji useReactTable wraz z obiektem stanu paginacji (pageIndex i pageSize) oraz procedurą obsługi onPaginationChange.

Model paginowanych wierszy wybiera z przefiltrowanych i posortowanych wierszy tylko fragment należący do bieżącej strony.

Instancja tabeli udostępnia metody table.nextPage(), table.previousPage(), table.firstPage() i table.lastPage() do nawigacji. Za pomocą table.getCanNextPage() i table.getCanPreviousPage() można wyłączać przyciski na granicach paginacji.

table.setPageIndex(n) przechodzi bezpośrednio do określonej strony, a table.setPageSize(n) zmienia liczbę wierszy wyświetlanych na stronie.

table.getPageCount() zwraca całkowitą liczbę stron na podstawie liczby przefiltrowanych wierszy podzielonej przez pageSize. table.getState().pagination.pageIndex zawiera bieżący indeks strony numerowany od zera.

Za pomocą tych wartości można zbudować w interfejsie paginacji licznik stron, na przykład "Strona 3 z 12".

Modele wierszy można łączyć: getCoreRowModel udostępnia podstawę, getFilteredRowModel opakowuje ją i stosuje filtry, getSortedRowModel opakowuje przefiltrowane dane i je sortuje, a getPaginationRowModel wybiera z wyniku fragment należący do bieżącej strony.

Kolejność ma znaczenie: sortowanie odbywa się po filtrowaniu, a paginacja jest wykonywana na końcu.

TanStack Table wewnętrznie zapamiętuje wyniki obliczeń modeli wierszy. Sortowanie i filtrowanie dużych zbiorów danych jest wydajne, ponieważ ponownie obliczane są tylko zmienione modele wierszy.

W przypadku bardzo dużych zbiorów danych (100 000 lub więcej wierszy) należy połączyć paginację z wirtualizacją (react-virtual), aby uniknąć jednoczesnego renderowania wszystkich wierszy strony.

Należy połączyć getSortedRowModel ze stanem sortowania, getFilteredRowModel ze stanem globalFilter i filtrów kolumn oraz getPaginationRowModel ze stanem paginacji. Każda z tych funkcji jest opcjonalna i dobrze współdziała z pozostałymi.

Nagłówki kolumn sterują sortowaniem za pomocą getToggleSortingHandler, pola wejściowe sterują filtrowaniem za pomocą setFilterValue i onGlobalFilterChange, a przyciski sterują paginacją za pomocą nextPage, previousPage i setPageIndex.

Jaki obiekt przechowuje bieżący indeks strony i rozmiar strony w stanie paginacji TanStack Table?

Sortowanie wymaga getSortedRowModel, stanu sortowania oraz procedur obsługi kliknięcia nagłówka kolumny. Filtrowanie korzysta z getFilteredRowModel oraz globalnego i przypisanego do kolumn stanu filtrów. Paginacja korzysta z getPaginationRowModel oraz stanu pageIndex i pageSize.

Wszystkie trzy modele wierszy łączą się automatycznie: najpierw filtrowanie, następnie sortowanie, a na końcu paginacja.