Interactive Table Implementation (TanStack Table) on a Website
Imagine: your order management interface starts lagging at just 1000 rows, and clients complain about slow page loading. We've encountered this dozens of times — and we know how to fix it. A table with sorting and pagination is one of the most common frontend tasks, and one of the most commonly implemented poorly. jQuery DataTables is found in legacy, but in modern React applications the de facto standard is TanStack Table (formerly react-table). It is a headless library without built-in styles, giving full control over markup. Size ~14 KB gzipped, even smaller with Tree-shaking. Actively maintained, has TypeScript types, and is compatible with React Server Components in Next.js. If you use Vue, Solid, or Svelte — there are adapted versions.
Problems We Solve
Most custom tables suffer from several typical mistakes:
- Lack of virtualization — with 5000 rows the DOM gets overloaded, React freezes for 2–3 seconds.
- Client-side pagination on large datasets — loading 50,000 rows kills network bandwidth and browser memory.
- No debounce on filtering — each keystroke sends a request, overwhelming the server.
TanStack Table addresses this at the library level: you choose only the features you need and configure behavior. It does not impose a data model — you decide how to store and load rows. Replacing jQuery DataTables with TanStack Table can reduce development time by 30%, lowering the project budget.
Library Comparison for Tables
| Library | Size | Flexibility | Performance | Community |
|---|---|---|---|---|
| TanStack Table v8 | ~14 KB gzipped | Full (headless) | High (virtualization) | >30K GitHub stars |
| jQuery DataTables | ~80 KB (with jQuery) | Low (styles included) | Medium (no virtualization) | Legacy |
| AG Grid Community | ~200 KB gzipped | High (many features) | Very High | >10K GitHub stars |
This is the optimal choice for React/Vue/Solid/Svelte. AG Grid is only justified when you need Excel-like editing on 100,000+ rows. jQuery DataTables — exclusively for legacy support. The library is 10x faster than jQuery DataTables when handling 10,000 rows thanks to virtualization and the absence of unnecessary DOM operations.
Why TanStack Table?
It is headless: no styles included, only logic. You decide how the table looks — it fits perfectly into your design system. Size ~14 KB gzipped, even smaller with Tree-shaking. Version 8 supports TypeScript and Server Components — works seamlessly in Next.js. All you need is to pass data and columns, and the useReactTable hook manages sorting, filtering, and pagination state.
Basic Implementation on React
Installation:
npm install @tanstack/react-table
Example table component with search, sorting, and pagination
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>
)
}
How to Implement Server-Side Pagination with React Query?
For datasets over 10,000 rows, client-side pagination is unacceptable — you can't load all the data. Use manualPagination, manualSorting, manualFiltering and load data via 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,
})
Key are the manual* flags — they disable built-in handling, passing control to the server. React Query with keepPreviousData: true prevents the interface from jumping during loading.
Comparison of Pagination Models
| Parameter | Client-side | Server-side |
|---|---|---|
| Data size | up to 10,000 rows | any amount |
| Initial load time | depends on dataset | instant (1 page) |
| Filtering | on client (offline) | on server (SQL indexes) |
| Server load | one large load | many small requests |
How to Export Table to CSV and Excel?
Export filtered data to CSV with BOM for Cyrillic:
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)
}
If needed — export to XLSX using exceljs. We configure cell format, merging, and styles.
Virtualization for 100,000+ Rows
Note: when there are many rows but pagination is client-side — row virtualization via @tanstack/react-virtual renders only visible rows:
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 rows render in ~20 ms — only the viewport ends up in the DOM.
What's Included in the Work
- Analysis of data structure and API, selection of pagination model.
- Design of column configuration, sorting, filters.
- Implementation using TanStack Table with integration into the design system.
- Setup of server-side pagination, export, virtualization.
- Documentation on usage and support.
Timelines: basic table with sorting and pagination — 1 day. With server-side pagination, filters, and export — 2–3 days. Virtualization adds 1–2 days. We estimate the project for free — just write to us. Order a turnkey table development — get a ready solution in 1 day. Get a consultation on integrating TanStack Table into your project.
We have been doing frontend development for 5+ years, completed 50+ projects with tables. We use the modern stack: React, TypeScript, TanStack Table, React Query. The result — fast, flexible tables that don't lag on large data. Savings on licensing compared to AG Grid can reach 40% of the budget.
Guarantee — we fix bugs for free within 30 days after delivery. Contact us — we'll estimate your project in one day.