Definiowanie kolumn i renderowanie wierszy

Każda kolumna w TanStack Table jest opisana obiektem ColumnDef. Dwa najważniejsze pola to accessorKey (nazwa właściwości w obiekcie danych) oraz header (ciąg znaków z etykietą kolumny lub funkcja renderująca).

Podejście z accessorKey idealnie nadaje się do płaskich danych, natomiast złożone lub obliczane wartości wymagają accessorFn.

Gdy dane mają bezpośrednią właściwość, taką jak name lub email, należy użyć accessorKey: 'name'. Gdy trzeba obliczyć wartość, na przykład połączyć firstName i lastName, należy użyć accessorFn: row => row.firstName + ' ' + row.lastName.

Oba rozwiązania są w pełni typowane po podaniu generyku danych wiersza dla ColumnDef.

Pole cell w obiekcie ColumnDef przyjmuje funkcję, która otrzymuje kontekst komórki i zwraca JSX. W ten sposób można renderować w komórce odznaki, przyciski, obrazy lub dowolny niestandardowy interfejs.

W przypadku zwykłych wartości tekstowych wystarczy cell.renderValue(). Przy bogatszej zawartości należy wyodrębnić potrzebne informacje z cell.getContext().

Kolumny należy zdefiniować poza komponentem, aby uniknąć ich ponownego tworzenia przy każdym renderowaniu. Tablicę należy przekazać do useReactTable razem z data i getCoreRowModel.

TypeScript wywnioskuje typy kolumn, gdy podadzą Państwo typ danych dla ColumnDef, zapewniając autouzupełnianie wartości accessorKey.

getCoreRowModel to funkcja-fabryka importowana z @tanstack/react-table. Jej wartość zwracaną należy przekazać do useReactTable, aby poinformować instancję, jak tworzyć podstawową listę wierszy z tablicy danych.

Dodatkowe modele wierszy (posortowane, przefiltrowane i podzielone na strony) nakłada się na ten model, przekazując dodatkowe funkcje-fabryki modeli.

Należy wywołać table.getHeaderGroups() i zmapować wynik, aby wyrenderować thead. Każda grupa nagłówków ma tablicę headers, a każdy nagłówek ma definicję kolumny i identyfikator.

Należy użyć flexRender(header.column.columnDef.header, header.getContext()), aby wyrenderować treść nagłówka, niezależnie od tego, czy jest ona ciągiem znaków, czy funkcją zwracającą JSX.

Należy wywołać table.getRowModel().rows i zmapować każdy wiersz na element tr. Następnie trzeba wywołać row.getVisibleCells() i zmapować każdą komórkę na element td.

Należy użyć flexRender(cell.column.columnDef.cell, cell.getContext()), aby wyrenderować zawartość komórki, uwzględniając niestandardowy renderer komórki zdefiniowany w kolumnie.

flexRender to funkcja pomocnicza, która przyjmuje komponent React, funkcję zwracającą JSX albo zwykłą wartość i renderuje każdy z tych typów w spójny sposób. Dzięki niej definicje kolumn mogą używać zarówno prostych ciągów znaków, jak i pełnych funkcji renderujących dla nagłówków i komórek.

Ten ujednolicony interfejs API oznacza, że przed renderowaniem nie trzeba sprawdzać typu definicji.

cell.renderValue() zwraca surową wartość pobraną przez accessor, sformatowaną jako ciąg znaków. Aby uzyskać większą kontrolę, cell.getContext() udostępnia pełny kontekst renderowania obejmujący wiersz, kolumnę, instancję tabeli i surową wartość.

Niestandardowe renderery komórek używają kontekstu, aby uzyskać dostęp do powiązanych danych wiersza wykraczających poza pojedynczą wartość accessor.

Każdy ColumnDef przyjmuje pole meta, w którym można umieszczać dowolne metadane, takie jak isSticky: true lub alignment: 'right'. Dostęp do nich w rendererze uzyskuje się za pośrednictwem column.columnDef.meta.

Do przypinania kolumn z lewej lub prawej strony TanStack Table udostępnia stan przypinania kolumn oraz metody pomocnicze na obiekcie kolumny.

Należy zdefiniować tablicę ColumnDef z polami accessorKey, header i opcjonalnym cell. Następnie trzeba wywołać useReactTable z data, columns i getCoreRowModel. Dla thead należy zmapować getHeaderGroups, a dla tbody — getRowModel().rows, używając flexRender do renderowania każdego nagłówka i każdej komórki.

Ta minimalna konfiguracja zapewnia w pełni funkcjonalną tabelę z całkowicie niestandardowym stylowaniem.

Kiedy w definicji kolumny TanStack Table należy użyć accessorFn zamiast accessorKey?

Kolumny należy definiować za pomocą ColumnDef, używając accessorKey dla bezpośrednich pól lub accessorFn dla wartości obliczanych. Następnie należy przekazać columns i getCoreRowModel do useReactTable, a potem renderować tabelę za pomocą getHeaderGroups dla nagłówków oraz getRowModel().rows dla wierszy treści.

Narzędzie flexRender jednolicie obsługuje zarówno ciągi znaków, jak i funkcje używane w definicjach nagłówków i komórek.