Інтерактивні таблиці на 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 днів.

Вартість розраховується індивідуально, залежить від складності та об'єму даних. Звертайтеся — підберемо оптимальне рішення.