Разработка интерактивных таблиц на TanStack Table под ключ

Реализация интерактивных таблиц (TanStack Table) на сайте

Представьте: ваш интерфейс управления заказами начинает тормозить уже на 1000 строк, а клиенты жалуются на долгую загрузку страницы. Мы сталкивались с этим десятки раз — и знаем, как исправить. Таблица с сортировкой и пагинацией — одна из самых частых задач во фронтенде, и одна из самых часто реализуемых плохо. jQuery DataTables встречается в легаси, но в современных React-приложениях стандарт де-факто — TanStack Table (ранее react-table). Это headless-библиотека без встроенных стилей, дающая полный контроль над разметкой. Размер ~14 КБ gzipped, с Tree-shaking ещё меньше. Активно поддерживается, имеет TypeScript-типы и совместима с React Server Components в Next.js. Если вы используете Vue, Solid или Svelte — есть адаптированные версии.

Проблемы, которые решаем

Большинство самописных таблиц страдают от нескольких типовых ошибок:

• Отсутствие виртуализации — при 5000 строк DOM перегружается, React фризит на 2–3 секунды.
• Клиентская пагинация на больших датасетах — загрузка 50 000 строк убивает пропускную способность сети и память браузера.
• Нет debounce при фильтрации — на каждое нажатие клавиши летит запрос, сервер захлёбывается.

TanStack Table решает это на уровне библиотеки: вы выбираете только нужные фичи и конфигурируете поведение. Она не навязывает модель данных — вы сами определяете, как хранить и загружать строки. Замена jQuery DataTables на TanStack Table может сократить время разработки на 30%, что снижает бюджет проекта.

Сравнение библиотек для таблиц

Это оптимальный выбор для React/Vue/Solid/Svelte. AG Grid оправдан только при необходимости Excel-режима редактирования на 100 000+ строк. jQuery DataTables — исключительно для поддержки легаси. Библиотека в 10 раз быстрее jQuery DataTables при работе с 10 000 строк за счёт виртуализации и отсутствия лишних DOM-операций.

Почему TanStack Table?

Он headless: никаких стилей в комплекте, только логика. Вы сами решаете, как выглядит таблица — идеально вписывается в дизайн-систему. Размер ~14 КБ gzipped, с Tree-shaking ещё меньше. С версии 8 поддерживает TypeScript и Server Components — в Next.js работает без проблем. Всё, что нужно — передать данные и колонки, а хук useReactTable сам управляет состоянием сортировки, фильтрации и пагинации.

Базовая реализация на React

Установка:

npm install @tanstack/react-table 

import { useState } from 'react' import { ColumnDef, flexRender, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, useReactTable, SortingState, } from '@tanstack/react-table' type Order = { id: string customer: string amount: number status: 'pending' | 'paid' | 'cancelled' createdAt: string } function OrdersTable({ data }: { data: Order[] }) { const [sorting, setSorting] = useState<SortingState>([]) const [globalFilter, setGlobalFilter] = useState('') const columns: ColumnDef<Order>[] = [ { accessorKey: 'id', header: '№ заказа', cell: info => <span className='font-mono text-sm'>{info.getValue()}</span>, }, { accessorKey: 'customer', header: 'Клиент', enableSorting: true }, { accessorKey: 'amount', header: 'Сумма', cell: info => `${info.getValue<number>().toLocaleString('ru-RU')} ₽`, sortingFn: 'basic', }, { accessorKey: 'status', header: 'Статус', cell: info => <StatusBadge status={info.getValue()} />, enableSorting: false }, { accessorKey: 'createdAt', header: 'Дата', sortingFn: 'datetime' }, ] const table = useReactTable({ data, columns, state: { sorting, globalFilter }, onSortingChange: setSorting, onGlobalFilterChange: setGlobalFilter, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getPaginationRowModel: getPaginationRowModel(), getFilteredRowModel: getFilteredRowModel(), initialState: { pagination: { pageSize: 25 } }, }) return ( <div> <input value={globalFilter} onChange={e => setGlobalFilter(e.target.value)} placeholder='Поиск по всем полям...' className='mb-4 w-64 border rounded px-3 py-2' /> <table className='w-full border-collapse'> <thead> {table.getHeaderGroups().map(headerGroup => ( <tr key={headerGroup.id}> {headerGroup.headers.map(header => ( <th key={header.id} onClick={header.column.getToggleSortingHandler()} className={header.column.getCanSort() ? 'cursor-pointer select-none' : ''} > {flexRender(header.column.columnDef.header, header.getContext())} {{ asc: ' ↑', desc: ' ↓' }[header.column.getIsSorted() as string] ?? ''} </th> ))} </tr> ))} </thead> <tbody> {table.getRowModel().rows.map(row => ( <tr key={row.id} className='hover:bg-gray-50'> {row.getVisibleCells().map(cell => ( <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td> ))} </tr> ))} </tbody> </table> <div className='flex items-center gap-2 mt-4'> <button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}> ← </button> <span> Страница {table.getState().pagination.pageIndex + 1} из {table.getPageCount()} </span> <button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}> → </button> <select value={table.getState().pagination.pageSize} onChange={e => table.setPageSize(Number(e.target.value))}> {[10, 25, 50, 100].map(size => ( <option key={size} value={size}>по {size}</option> ))} </select> </div> </div> ) } 

Как реализовать серверную пагинацию с React Query?

Для датасетов от 10 000 строк клиентская пагинация неприемлема — все данные не загрузить. Используем manualPagination, manualSorting, manualFiltering и загружаем данные через React Query:

const [{ pageIndex, pageSize }, setPagination] = useState({ pageIndex: 0, pageSize: 25 }) const { data, isFetching } = useQuery({ queryKey: ['orders', pageIndex, pageSize, sorting, globalFilter], queryFn: () => fetchOrders({ page: pageIndex + 1, limit: pageSize, sortBy: sorting[0]?.id, sortDir: sorting[0]?.desc ? 'desc' : 'asc', search: globalFilter }), keepPreviousData: true, }) const table = useReactTable({ data: data?.rows ?? [], columns, pageCount: data?.pageCount ?? -1, state: { sorting, pagination: { pageIndex, pageSize }, globalFilter }, manualPagination: true, manualSorting: true, manualFiltering: true, onPaginationChange: setPagination, }) 

Ключевое — флаги manual* — они отключают встроенную обработку, передавая управление серверу. React Query с keepPreviousData: true не даёт интерфейсу дёргаться при загрузке.

Сравнение моделей пагинации

Как экспортировать таблицу в CSV и Excel?

Выводим отфильтрованные данные в CSV с BOM для кириллицы:

function exportToCSV(table: Table<Order>) { const headers = table.getAllColumns().filter(col => col.getIsVisible()).map(col => col.columnDef.header as string) const rows = table.getFilteredRowModel().rows.map(row => row.getVisibleCells().map(cell => { const value = cell.getValue() return typeof value === 'string' && value.includes(',') ? `"${value}"` : value }) ) const csv = [headers, ...rows].map(r => r.join(',')).join('\n') const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8' }) const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = `orders-${Date.now()}.csv` a.click() URL.revokeObjectURL(url) } 

При необходимости — экспорт в XLSX через exceljs. Настраиваем формат ячеек, объединение, стили.

Виртуализация для 100 000+ строк

Отметим: когда строк много, но пагинация клиентская — виртуализация строк через @tanstack/react-virtual рендерит только видимые строки:

import { useVirtualizer } from '@tanstack/react-virtual' const tableContainerRef = useRef<HTMLDivElement>(null) const { rows } = table.getRowModel() const rowVirtualizer = useVirtualizer({ count: rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 48, overscan: 10, }) 

10 000 строк рендерятся за ~20 мс — в DOM попадает только viewport.

Что входит в работу

1. Анализ структуры данных и API, выбор модели пагинации.
2. Проектирование конфигурации колонок, сортировки, фильтров.
3. Реализация на TanStack Table с интеграцией в дизайн-систему.
4. Настройка серверной пагинации, экспорта, виртуализации.
5. Документация по использованию и поддержке.

Сроки: базовая таблица с сортировкой и пагинацией — 1 день. С серверной пагинацией, фильтрами и экспортом — 2–3 дня. Для виртуализации добавляем 1–2 дня. Оцениваем проект бесплатно — напишите нам. Закажите разработку таблицы под ключ — получите готовое решение за 1 день. Получите консультацию по внедрению TanStack Table в ваш проект.

Мы занимаемся разработкой фронтенда 5+ лет, реализовали 50+ проектов с таблицами. Используем современный стек: React, TypeScript, TanStack Table, React Query. Результат — быстрые, гибкие таблицы, которые не тормозят на больших данных. Экономия на лицензировании по сравнению с AG Grid может достигать 40% бюджета.

Гарантия — исправляем баги бесплатно в течение 30 дней после сдачи. Свяжитесь с нами — рассчитаем ваш проект за один день.