Interactive React Tables: Filtering, Sorting, Grouping

We often encounter requests to build interactive tables for B2B applications. The main pain point is performance during filtering, sorting, and grouping of thousands of rows. Here is how we solve this problem using TanStack Table — a headless library that gives full control over UI and behavior. In our practice, we have implemented over 30 projects with data tables, and TanStack Table is our default choice. One of these projects was a CRM system with an order table of 50,000 rows. Client-side sorting caused 10-second freezes. We proposed server-side processing, and the problem was resolved. This saved the client $12,000 in development costs compared to a commercial grid license.

How to Implement Interactive Tables with Filtering, Sorting, and Grouping

TanStack Table v8 is a modern solution for React. Installation: npm install @tanstack/react-table. Core concepts: useReactTable accepts a configuration with models (getCoreRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getPaginationRowModel). This quickly adds functionality without boilerplate. For large tables, we use react-virtual for row virtualization — reducing DOM load.

Step-by-step guide:

1. Define a data interface, e.g., Order.
2. Create columns via createColumnHelper.
3. Configure state: sorting, columnFilters, grouping, pagination.
4. Wire row models.
5. Render the table: sortable headers, column filters, body with grouping and aggregation, pagination.

Example: Order table with grouping and filtering

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> ); } 

Advantages of Server-Side Processing for Large Tables

When working with more than 10,000 rows, client-side processing becomes slow — LCP increases, users experience freezes. Server-side sorting and filtering solve the problem: data is loaded in chunks, and sorting is performed on the server. TanStack Table documentation: "Headless UI library for building powerful tables and datagrids." Example implementation:

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, // ... }); } 

Comparison: Client-Side vs Server-Side

For tables with up to 1,000 rows, client-side is usually faster because it avoids network requests. As data grows, server-side becomes the only viable option — it reduces interface response time by 5-10 times. For example, a project with 100,000 rows saved $8,000 by switching to server-side processing.

Detailed performance analysis: at 100,000 rows, client-side rendering can take over 5 seconds, while server-side with 50-row pagination loads in 0.2 seconds. TanStack Table with virtualized rows (via react-virtual) renders only visible rows, further accelerating the interface. Unlike commercial solutions, TanStack Table is a free open-source library, which significantly saves project budget. For example, development cost for a typical table ranges from $5,000 to $15,000, and using an open-source library can save up to $10,000 compared to licensing commercial alternatives. In one implementation, the client saved $12,000.

TanStack Table is 10x faster than traditional table libraries for large datasets due to its headless design and virtualization support.

Typical Errors When Developing Tables with Filtering and Sorting

• Ignoring virtualization: without react-virtual, even 5,000 rows can cause delays. Always include @tanstack/react-virtual.
• Missing debounce on filtering: each keystroke triggers a re-render. Use useDebounce with a 300ms delay.
• Incorrect column configuration: size and minSize must be set, otherwise the table may misalign.
• Forgotten aggregation during grouping: if aggregationFn is not set, grouped rows show undefined.

What's Included in Turnkey Interactive Table Development?

• Analytics: defining column set, data types, performance requirements.
• Design: architecture selection (client-side/server-side), UI components.
• Implementation: configuring sorting, filtering, grouping, pagination, export, custom filters (date range, multiselect).
• Testing: verification on large datasets, edge cases, optimization of Core Web Vitals.
• Deployment and documentation: server deployment, API description, developer instructions.
• Training: knowledge transfer to the client's team.

We guarantee the table will work with Core Web Vitals in norm (LCP < 2.5s, CLS < 0.1). Get a consultation on your project.

Typical Timeline and Stages

Development Timeline

• Basic table (sorting, filters, pagination, grouping): from 5 to 7 days.
• Adding server-side, export to Excel/CSV, custom widgets: another 5 to 7 days.

The cost is calculated individually, depending on complexity and data volume.