16. Table: введение

Что такое TanStack Table?

@tanstack/react-table — headless движок для создания таблиц. Он предоставляет всю логику (сортировка, фильтрация, пагинация, группировка), но не рендерит ни одного HTML-элемента. Вы полностью контролируете разметку и стили.

Установка

npm install @tanstack/react-table

useReactTable: Основной хук

import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  type ColumnDef,
} from '@tanstack/react-table'

const table = useReactTable({
  data,               // Массив данных
  columns,            // Определения колонок
  getCoreRowModel: getCoreRowModel(),  // Базовая модель строк
})

Определение колонок

type User = { id: number; name: string; email: string; age: number; role: string }

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'name',    // Ключ из объекта данных
    header: 'Имя',
    cell: (info) => info.getValue(),
  },
  {
    accessorFn: (row) => `${row.age} лет`,  // Вычисляемое значение
    id: 'ageDisplay',
    header: 'Возраст',
  },
  {
    id: 'actions',
    header: 'Действия',
    cell: ({ row }) => (
      <button onClick={() => deleteUser(row.original.id)}>Удалить</button>
    ),
  },
]

Рендеринг таблицы

function Table() {
  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() })

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id}>
                {flexRender(header.column.columnDef.header, header.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

flexRender

flexRender — утилита для рендеринга заголовков и ячеек. Принимает компонент или примитив:

// header может быть строкой или компонентом
header: 'Имя'
header: ({ column }) => <SortableHeader column={column} />

// cell может быть строкой или компонентом
cell: (info) => info.getValue()
cell: ({ row }) => <UserAvatar user={row.original} />

ColumnDef типы

Тип	Описание
accessorKey	Простой ключ из объекта данных
accessorFn	Функция-аксессор для вычисляемых значений
id + accessorFn	Колонка с явным ID и функцией
display columns	Колонки без данных (действия, чекбоксы)
group columns	Группировка нескольких колонок