Интерактивные таблицы на React: фильтрация, сортировка, группировка

Мы часто сталкиваемся с запросами на создание интерактивных таблиц для B2B-приложений. Основная боль — производительность при фильтрации, сортировке и группировке тысяч строк. Расскажем, как мы решаем эту задачу с помощью TanStack Table — headless-библиотеки, которая даёт полный контроль над UI и поведением. За 5 лет опыта мы реализовали более 30 проектов с таблицами данных, и TanStack Table — наш выбор по умолчанию. Один из проектов — CRM-система с таблицей заказов на 50 000 строк. Клиентская сортировка приводила к фризам на 10 секунд. Мы предложили server-side обработку — проблема решилась.

Как реализовать интерактивные таблицы с фильтрацией, сортировкой и группировкой?

TanStack Table v8 — современное решение для React. Установка: npm install @tanstack/react-table. Основные концепции: useReactTable принимает конфигурацию с моделями (getCoreRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getPaginationRowModel). Это позволяет быстро добавить функциональность без boilerplate. Для больших таблиц используем react-virtual для виртуализации строк — это снижает нагрузку на DOM.

Пошаговая инструкция:

1. Определите интерфейс данных, например Order.
2. Создайте колонки через createColumnHelper.
3. Настройте состояние: sorting, columnFilters, grouping, pagination.
4. Подключите модели строк.
5. Рендерите таблицу: хедеры с сортировкой, фильтры для колонок, тело с группировкой и агрегацией, пагинацию.

Пример: Таблица заказов с группировкой и фильтрацией — интерактивные таблицы на

import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getPaginationRowModel, flexRender, createColumnHelper } from '@tanstack/react-table';

interface Order {
  id: string;
  customerName: string;
  status: OrderStatus;
  total: number;
  category: string;
  createdAt: Date;
}

const columnHelper = createColumnHelper<Order>();

const columns = [
  columnHelper.accessor('id', {
    header: '№',
    size: 80,
    cell: ({ getValue }) => <code className="text-xs">{getValue().slice(0, 8)}</code>
  }),
  columnHelper.accessor('customerName', {
    header: 'Покупатель',
    filterFn: 'includesString'
  }),
  columnHelper.accessor('status', {
    header: 'Статус',
    cell: ({ getValue }) => <StatusBadge status={getValue()} />,
    filterFn: (row, columnId, filterValue) => filterValue.includes(row.getValue(columnId))
  }),
  columnHelper.accessor('total', {
    header: 'Сумма',
    cell: ({ getValue }) => formatCurrency(getValue()),
    sortDescFirst: true,
    aggregationFn: 'sum',
    aggregatedCell: ({ getValue }) => (
      <strong className="font-semibold">{formatCurrency(getValue<number>())}</strong>
    )
  }),
  columnHelper.accessor('category', {
    header: 'Категория'
  }),
  columnHelper.accessor('createdAt', {
    header: 'Дата',
    cell: ({ getValue }) => format(getValue(), 'dd.MM.yyyy HH:mm'),
    sortingFn: 'datetime'
  })
];

function OrdersTable({ data }) {
  const [sorting, setSorting] = useState([{ id: 'createdAt', desc: true }]);
  const [columnFilters, setColumnFilters] = useState([]);
  const [globalFilter, setGlobalFilter] = useState('');
  const [grouping, setGrouping] = useState<string[]>([]);
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });

  const table = useReactTable({
    data,
    columns,
    state: {
      sorting,
      columnFilters,
      globalFilter,
      grouping,
      pagination
    },
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    onGlobalFilterChange: setGlobalFilter,
    onGroupingChange: setGrouping,
    onPaginationChange: setPagination,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getGroupedRowModel: getGroupedRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getPaginationRowModel: getPaginationRowModel()
  });

  return (
    <div>
      {/* Глобальный поиск */}
      <input
        value={globalFilter}
        onChange={e => setGlobalFilter(e.target.value)}
        placeholder="Поиск по всем полям..."
        className="mb-4 px-3 py-2 border rounded-lg w-64"
      />

      {/* Группировка */}
      <div className="flex gap-2 mb-4">
        <span className="text-sm text-gray-600">Группировка:</span>
        {['status', 'category'].map(col => (
          <button
            key={col}
            onClick={() => setGrouping(prev =>
              prev.includes(col) ? prev.filter(c => c !== col) : [...prev, col]
            )}
            className={`text-xs px-2 py-1 rounded border ${
              grouping.includes(col) ? 'bg-blue-50 border-blue-300' : 'border-gray-200'
            }`}
          >
            {col}
          </button>
        ))}
      </div>

      {/* Таблица */}
      <div className="overflow-x-auto rounded-lg border border-gray-200">
        <table className="w-full text-sm">
          <thead className="bg-gray-50">
            {table.getHeaderGroups().map(headerGroup => (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map(header => (
                  <th
                    key={header.id}
                    className="px-4 py-3 text-left font-medium text-gray-600 whitespace-nowrap"
                    style={{ width: header.getSize() }}
                  >
                    <div className="flex items-center gap-1">
                      <span
                        className={header.column.getCanSort() ? 'cursor-pointer select-none' : ''}
                        onClick={header.column.getToggleSortingHandler()}
                      >
                        {flexRender(header.column.columnDef.header, header.getContext())}
                      </span>
                      {header.column.getIsSorted() === 'asc' && ' ↑'}
                      {header.column.getIsSorted() === 'desc' && ' ↓'}
                    </div>
                    {/* Фильтр для каждой колонки */}
                    {header.column.getCanFilter() && (
                      <ColumnFilter column={header.column} />
                    )}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody className="divide-y divide-gray-100">
            {table.getRowModel().rows.map(row => (
              <tr
                key={row.id}
                className={`hover:bg-gray-50 ${row.getIsGrouped() ? 'bg-gray-50 font-medium' : ''}`}
              >
                {row.getVisibleCells().map(cell => (
                  <td key={cell.id} className="px-4 py-3">
                    {cell.getIsGrouped() ? (
                      <button
                        onClick={row.getToggleExpandedHandler()}
                        className="flex items-center gap-1"
                      >
                        {row.getIsExpanded() ? '▼' : '▶'}
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                        ({row.subRows.length})
                      </button>
                    ) : cell.getIsAggregated() ? (
                      flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext())
                    ) : flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Пагинация */}
      <TablePagination table={table} />
    </div>
  );
}

Почему стоит выбрать server-side обработку для больших таблиц?

При работе с более чем 10 000 строк клиентская обработка становится медленной — LCP растёт, пользователи испытывают фризы. Server-side сортировка и фильтрация решают проблему: данные загружаются порциями, а сортировка выполняется на сервере. TanStack Table documentation: "Headless UI library for building powerful tables and datagrids." Пример реализации:

function ServerSideTable() {
  const [sorting, setSorting] = useState([]);
  const [columnFilters, setColumnFilters] = useState([]);
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
  const { data, isLoading } = useQuery({
    queryKey: ['orders', { sorting, columnFilters, pagination }],
    queryFn: () => fetch('/api/orders?' + new URLSearchParams({
      sort: sorting.map(s => `${s.id}:${s.desc ? 'desc' : 'asc'}`).join(','),
      filters: JSON.stringify(columnFilters),
      page: String(pagination.pageIndex + 1),
      per_page: String(pagination.pageSize)
    })).then(r => r.json())
  });
  const table = useReactTable({
    data: data?.items ?? [],
    rowCount: data?.total ?? 0,
    manualSorting: true,
    manualFiltering: true,
    manualPagination: true,
    // ...
  });
}

Сравнение подходов: client-side vs server-side

Для таблиц с объёмом данных до 1 000 строк client-side обычно быстрее, поскольку не требует сетевых запросов. При росте данных server-side становится единственно возможным вариантом — он в 5-10 раз снижает время отклика интерфейса.

Детальный анализ производительности: при 100 000 строк client-side рендеринг может занимать более 5 секунд, в то время как server-side с пагинацией по 50 строк загружается за 0.2 сек. TanStack Table с virtualized rows (через react-virtual) позволяет рендерить только видимые строки, что ещё больше ускоряет интерфейс. В отличие от коммерческих решений, TanStack Table — бесплатная open-source библиотека, что существенно экономит бюджет проекта.

Какие преимущества даёт группировка строк в интерактивной таблице?

Группировка позволяет объединять строки по значению колонки, например, по статусу или категории. Это упрощает анализ данных: сразу видно количество записей в каждой группе и агрегированные значения (сумма, среднее и т.д.). В TanStack Table группировка реализуется через getGroupedRowModel и getExpandedRowModel, а пользователь может сворачивать и разворачивать группы. Группировка эффективна при работе с иерархическими данными и часто используется в системах аналитики.

Типичные ошибки при разработке таблиц с фильтрацией и сортировкой

• Игнорирование виртуализации: без react-virtual даже 5 000 строк могут вызвать задержки. Всегда подключайте @tanstack/react-virtual.
• Отсутствие debounce при фильтрации: каждый ввод символа вызывает перерисовку. Используйте useDebounce с задержкой 300 мс.
• Неправильная настройка колонок: size и minSize должны быть заданы, иначе таблица может разъезжаться.
• Забытая агрегация при группировке: если не задать aggregationFn, сгруппированные строки покажут undefined.

Что входит в разработку интерактивной таблицы под ключ?

• Аналитика: определение набора колонок, типов данных, требований к производительности.
• Проектирование: выбор архитектуры (client-side/server-side), UI-компонентов.
• Реализация: настройка сортировки, фильтрации, группировки, пагинации, экспорта, кастомных фильтров (date range, multiselect).
• Тестирование: проверка на больших объёмах данных, Edge-кейсы, оптимизация Core Web Vitals.
• Деплой и документация: размещение на сервере, описание API и инструкция для разработчиков.
• Обучение: передача знаний команде заказчика.

Мы гарантируем, что таблица будет работать с Core Web Vitals в норме (LCP < 2.5s, CLS < 0.1). Получите консультацию по вашему проекту — свяжитесь с нами.

Типовые сроки и этапы

Сроки разработки

• Базовая таблица (сортировка, фильтры, пагинация, группировка): от 5 до 7 дней.
• Добавление server-side, экспорта в Excel/CSV, кастомных виджетов: ещё от 5 до 7 дней.

Стоимость рассчитывается индивидуально, зависит от сложности и объёма данных. Обращайтесь — подберём оптимальное решение.