Przykłady tabel danych w React: TanStack Table v9 z Tailwind | We.Inc
Sprawdzone typami przykłady TanStack Table v9 dla React: sortowanie, globalne wyszukiwanie, paginacja, zaznaczanie wierszy, widoczność kolumn, przyklejony nagłówek i dane z serwera, ostylowane w Tailwind.
Przykłady tabel danych w React z TanStack Table
TanStack Table to headless biblioteka tabel dla React: obsługuje sortowanie, filtrowanie, paginację i zaznaczanie, a markup piszesz sam. W wersji 9 rejestrujesz każdą funkcję w tableFeatures, dodajesz row model dla każdego kroku wykonywanego po stronie klienta, wywołujesz useTable i renderujesz nagłówki oraz komórki przez FlexRender. Poniższe przykłady są sprawdzone typami względem wersji 9.3.
Wybierz podejście
Wiersze
Podejście
Poniżej około 50, bez interakcji
Zwykła tabela HTML
Od setek do kilku tysięcy
TanStack Table po stronie klienta
Dziesiątki tysięcy lub więcej
TanStack Table z ręcznym (serwerowym) sortowaniem i stronicowaniem
Bardzo długie pojedyncze strony
Dodaj wirtualizację wierszy
Wypróbuj gotową tabelę, a potem skopiuj kod, który ją tworzy. Podgląd na żywo na tej stronie jest rysowany zwykłym stanem React, aby strona pozostała lekka; kod obok to wersja TanStack v9, która robi to samo w Twojej aplikacji.
Zainstaluj @tanstack/react-table.
Wypisz potrzebne funkcje w tableFeatures, z miejscem na row model dla każdego kroku wykonywanego w przeglądarce.
Zdefiniuj kolumny za pomocą createColumnHelper, poza komponentem.
Wywołaj useTable z funkcjami, kolumnami i danymi.
Renderuj grupy nagłówków i wiersze własnym markupem i FlexRender.
Nadaj wierszom stabilne id przez getRowId, aby zaznaczenie przetrwało sortowanie i ponowne pobranie danych.
Po włączeniu ukrywania kolumn renderuj row.getVisibleCells(), a nie getAllCells().
Zdefiniuj zapasową pustą tablicę raz, poza komponentem; nowe [] przy każdym renderze unieważnia row modele.
Umieść przycisk sortowania w każdym sortowalnym th, aby był dostępny z klawiatury.
Formatuj liczby i daty w funkcji komórki, aby sortowanie nadal korzystało z surowej wartości.
Najczęściej zadawane pytania
Czy React Table to to samo co TanStack Table?
Tak. react-table v7 od wersji v8 nazywa się TanStack Table i jest publikowany jako @tanstack/react-table. Wersja 9 zachowuje podejście headless, ale wymaga jawnego rejestrowania funkcji, dzięki czemu bundle są mniejsze.
Czy TanStack Table zawiera style?
Nie. Daje tylko stan i row modele. Elementy table, th i td piszesz sam i stylujesz je w Tailwind, CSS lub bibliotece komponentów, takiej jak shadcn/ui.
Czy sortowanie i paginacja powinny działać na serwerze?
Tak, gdy pełny zbiór danych jest zbyt duży, by wysłać go do przeglądarki. Ustaw opcje manual, wyślij stan sortowania i strony do swojego API i przekaż łączną liczbę wierszy, aby kontrolki stron działały.
Jak utrzymać nagłówek widoczny podczas przewijania?
Nadaj kontenerowi maksymalną wysokość i overflow auto, a thead ustaw jako sticky z top 0 i kolorem tła, aby wiersze nie prześwitywały.
Gotowe style
Jeśli wolisz zacząć od gotowego projektu, w naszej galerii komponentów znajdziesz tabelę danych w Tailwind z sortowaniem, wyszukiwaniem, zaznaczaniem wierszy i paginacją, którą skopiujesz jako React lub HTML. W projektach shadcn/ui zajrzyj do naszego przewodnika po formularzach i tabelach shadcn.
Typowe błędy
Deklarowanie kolumn wewnątrz komponentu bez memoizacji, co przebudowuje tabelę przy każdym renderze.
Włączenie manualPagination przy jednoczesnym przekazywaniu wszystkich wierszy, przez co pierwsza strona pokazuje wszystko.
Odwracanie kolejności w własnej funkcji sortującej. Zwracaj porównanie rosnące; biblioteka sama odwróci je dla sortowania malejącego.
Konfiguracja TanStack Table
Instalacja
Jeden pakiet. Nie ma stylów i sam niczego nie renderuje: markup tabeli piszesz Ty, dlatego tak dobrze pasuje do Tailwind.
Najmniejsza działająca tabela
Funkcje są wypisane na początku i przekazane raz. Utrzymuj funkcje, kolumny i tablicę danych stabilne (poza komponentem lub w stanie), inaczej tabela przebuduje wiersze przy każdym renderze.
Funkcje i row modele
Co zarejestrować dla każdego zachowania (v9)
Chcesz
Funkcja
Miejsce na row model (po stronie klienta)
Sortowanie po kliknięciu nagłówka
rowSortingFeature
sortedRowModel: createSortedRowModel()
Pole wyszukiwania po wszystkich kolumnach
columnFilteringFeature + globalFilteringFeature
filteredRowModel: createFilteredRowModel()
Filtry dla poszczególnych kolumn
columnFilteringFeature
filteredRowModel: createFilteredRowModel()
Strony wierszy
rowPaginationFeature
paginatedRowModel: createPaginatedRowModel()
Zaznaczanie checkboxami
rowSelectionFeature
Brak
Pokazywanie i ukrywanie kolumn
columnVisibilityFeature
Brak
Pracę wykonuje serwer
Te same funkcje
Bez miejsc; ustaw manualSorting, manualFiltering, manualPagination
Wszystko w jednym komponencie, ostylowane klasami Tailwind. Wiersz nagłówka pozostaje na miejscu, bo przewija się kontener, a thead jest sticky. aria-sort informuje czytniki ekranu, w którą stronę posortowana jest kolumna.
Dane po stronie serwera
Sortowanie i paginacja po stronie serwera
Przy dużych zbiorach danych serwer sortuje i zwraca jedną stronę. Pomiń miejsca na row modele, ustaw flagi manual i przekaż rowCount, aby tabela wiedziała, ile jest stron. Stan sortowania i strony steruje zapytaniem.