Filozofia TanStack Table i projektowanie headless

Biblioteka headless UI zapewnia całą potrzebną logikę, zarządzanie stanem i zachowanie, ale celowo nie dostarcza żadnego kodu HTML ani stylów. To Państwo kontrolują każdy piksel wyrenderowanego wyniku.

Takie podejście oznacza, że nigdy nie trzeba walczyć z nadpisywaniem CSS ani zmagać się z narzuconą przez bibliotekę strukturą DOM.

W przypadku tradycyjnego komponentu tabeli zmiana wyglądu wymaga nadpisania dziesiątek stylów, a czasem także obchodzenia strukturalnego HTML za pomocą nieeleganckich rozwiązań. Biblioteka headless przekazuje Państwu dane i stan, a następnie pozostawia pełną kontrolę nad prezentacją.

Rezultatem jest całkowita swoboda projektowania: mogą Państwo używać Tailwind, CSS Modules, Emotion lub zwykłego CSS bez przeszkód.

TanStack Table v8 działa z React, Vue, Solid, Svelte, a nawet z Vanilla JavaScript. Jego podstawowa logika jest niezależna od frameworka, a poszczególne adaptery opakowują ją w znane hooki.

Oznacza to, że umiejętności można przenosić między frameworkami, a interfejs API pozostaje spójny.

W React wywołują Państwo useReactTable({ data, columns, getCoreRowModel }) i otrzymują obiekt tabeli. Ten obiekt stanowi centrum całej funkcjonalności.

Przechowuje cały bieżący stan (sortowanie, paginację, zaznaczenie) i udostępnia metody pomocnicze, które sterują renderowaniem JSX.

TanStack Table nigdy nie renderuje w Państwa imieniu żadnego elementu HTML. To Państwo tworzą własną tabelę oraz elementy thead, tbody, tr, th i td, a następnie pytają obiekt tabeli, jaką treść należy w nich umieścić.

Różni się to od AG Grid lub Ant Design Table, które renderują własny DOM i udostępniają ograniczoną liczbę miejsc na dostosowanie.

AG Grid, Material Table i Ant Design Table zawierają kompletne mechanizmy renderowania, wbudowane style oraz rozbudowane interfejsy funkcji dostępne od razu. Pozwalają szybciej tworzyć prototypy, ale trudniej je głęboko dostosować.

TanStack Table wymaga większej ilości konfiguracji na początku, ale pozwala zbudować w pełni dostępną tabelę idealnie zgodną z identyfikacją wizualną, bez walki z nadpisywaniem stylów.

Ponieważ TanStack Table nie dostarcza stylów, a importują Państwo tylko używane modele wierszy (sortowanie, filtrowanie, paginacja), rozmiar pakietu pozostaje mały.

Płacą Państwo tylko za włączone funkcje, dzięki czemu biblioteka dobrze sprawdza się w aplikacjach, w których wydajność ma duże znaczenie.

Ponieważ TanStack Table nie generuje żadnego kodu HTML, integracja z Tailwind CSS sprowadza się do dodania nazw klas do własnych elementów tr i td. To samo dotyczy CSS Modules i dowolnego innego podejścia do stylowania.

Nie ma tu walki o specyficzność, ponieważ nie istnieją wbudowane style wymagające nadpisania.

Podejście headless wymaga jednak napisania większej ilości kodu na początku. Muszą Państwo samodzielnie napisać pętlę renderowania i ręcznie podłączyć obsługę stanu.

Po zbudowaniu bazowego komponentu tabeli można go jednak ponownie wykorzystać w całej aplikacji, zachowując spójne stylowanie.

Hook useReactTable przyjmuje obiekt konfiguracji zawierający co najmniej data (tablicę obiektów), columns (tablicę ColumnDef) oraz getCoreRowModel.

Zwrócona instancja tabeli udostępnia getHeaderGroups() dla nagłówków oraz getRowModel().rows dla wierszy treści, które mapują Państwo w JSX.

Należy rozpocząć od zainstalowania @tanstack/react-table, zdefiniowania tablicy columns, wywołania useReactTable, a następnie wyrenderowania własnego elementu table za pomocą metod pomocniczych. Biblioteka obsługuje cały stan i dane pochodne, a za cały kod znaczników odpowiadają Państwo.

To klarowne rozdzielenie odpowiedzialności sprawia, że komponenty tabel można testować, a system projektowy pozostaje spójny.

TanStack Table to niezależna od frameworka biblioteka tabel headless, która zapewnia stan i logikę, pozostawiając całe renderowanie Państwu. Wywołują Państwo useReactTable, otrzymują instancję tabeli i mapują jej metody pomocnicze, aby zbudować własny kod znaczników.

Oznacza to brak konfliktów stylów, pełną swobodę wyboru frameworka CSS oraz rozmiar pakietu zależny wyłącznie od używanych funkcji.