Определение столбцов и отображение строк

Каждый столбец в TanStack Table описывается объектом ColumnDef. Два наиболее важных поля — accessorKey (имя свойства объекта данных) и header (строка с названием столбца или функция отрисовки).

Подход с accessorKey идеально подходит для плоских данных, а для сложных или вычисляемых значений нужен accessorFn.

Если в данных есть непосредственное свойство, например name или email, используйте accessorKey: 'name'. Если значение нужно вычислить, например объединить firstName и lastName, используйте accessorFn: row => row.firstName + ' ' + row.lastName.

Оба варианта получают полную типизацию, если передать обобщённый тип данных строки в ColumnDef.

Поле cell в ColumnDef принимает функцию, которая получает контекст ячейки и возвращает JSX. Так можно отображать внутри ячейки метки, кнопки, изображения или любой другой пользовательский интерфейс.

Для обычных текстовых значений достаточно cell.renderValue(). Для более сложного содержимого извлеките нужные сведения из cell.getContext().

Определяйте columns вне компонента, чтобы не создавать их заново при каждом рендеринге. Передайте массив в useReactTable вместе с data и getCoreRowModel.

TypeScript выведет типы столбцов, если указать ColumnDef с типом ваших данных, и предоставит автодополнение для значений accessorKey.

getCoreRowModel — фабричная функция, импортируемая из @tanstack/react-table. Передайте её возвращаемое значение в useReactTable, чтобы указать экземпляру, как построить базовый список строк из вашего массива data.

Дополнительные модели строк (отсортированные, отфильтрованные и разбитые на страницы) добавляются поверх него передачей дополнительных фабрик моделей.

Вызовите table.getHeaderGroups() и переберите результат, чтобы отобразить thead. Каждая группа заголовков содержит массив headers, а каждый header — определение столбца и идентификатор.

Используйте flexRender(header.column.columnDef.header, header.getContext()), чтобы отобразить содержимое заголовка независимо от того, является ли оно строкой или функцией, возвращающей JSX.

Вызовите table.getRowModel().rows и преобразуйте каждую строку в элемент tr. Внутри вызовите row.getVisibleCells() и преобразуйте каждую ячейку в td.

Используйте flexRender(cell.column.columnDef.cell, cell.getContext()), чтобы отобразить содержимое ячейки с учётом пользовательского средства отрисовки, заданного в столбце.

flexRender — это вспомогательная функция, которая принимает компонент React, функцию, возвращающую JSX, или обычное значение и единообразно отображает его. Благодаря этому определения столбцов могут использовать как простые строки, так и полноценные функции отрисовки для заголовков и ячеек.

Единый API избавляет от необходимости проверять тип определения перед отрисовкой.

cell.renderValue() возвращает исходное значение accessor, отформатированное как строка. Для большего контроля cell.getContext() предоставляет полный контекст отрисовки, включая строку, столбец, экземпляр таблицы и исходное значение.

Пользовательские средства отрисовки ячеек используют этот контекст, чтобы получать связанные данные строки, не ограничиваясь одним значением accessor.

Каждый ColumnDef принимает поле meta, в котором можно хранить произвольные метаданные, например isSticky: true или alignment: 'right'. Получить их в средстве отрисовки можно через column.columnDef.meta.

Для закрепления столбцов слева или справа TanStack Table предоставляет состояние закрепления столбцов и вспомогательные методы в объекте столбца.

Определите массив ColumnDef с полями accessorKey, header и необязательным cell. Вызовите useReactTable с data, columns и getCoreRowModel. Переберите getHeaderGroups для thead и getRowModel().rows для tbody, используя flexRender для отрисовки каждого заголовка и каждой ячейки.

Эта минимальная настройка даёт полностью функциональную таблицу с полностью настраиваемым оформлением.

Когда в определении столбца TanStack Table следует использовать accessorFn вместо accessorKey?

Определяйте столбцы с помощью ColumnDef: используйте accessorKey для непосредственных полей или accessorFn для вычисляемых значений. Передайте columns и getCoreRowModel в useReactTable, а затем отобразите заголовки через getHeaderGroups, а строки тела — через getRowModel().rows.

Вспомогательная функция flexRender единообразно обрабатывает определения заголовков и ячеек в виде строк или функций.