The Data Table Nightmare in React
Working with Data Tables is always among the most frustrating tasks for frontend developers. If you only need to display a few static rows, a plain HTML <table> tag is enough. However, once requirements involve sorting, filtering, or pagination, you’ll find yourself sinking deep into a mess of logic and state.
I once participated in refactoring a project with about 50,000 lines of code. There, data tables were patched together using various UI libraries. The hard-learned lesson: if you choose the wrong tool from the start, future maintenance will cost you weeks just to fix a single display bug. TanStack Table v8 (formerly React Table) was born to solve this problem with a completely different mindset.
Three Common Approaches to Building Tables
Before writing the first line of code, let’s look at common methods to understand why experts prioritize TanStack Table.
1. Using Plain HTML Tables
- Pros: Super lightweight, zero extra bytes added to the bundle size.
- Cons: You have to write all the logic yourself. Sorting alone is enough to make the code lengthy and extremely bug-prone.
2. Using Components from UI Libraries (MUI, Ant Design, Chakra UI)
- Pros: Ready to use. Copy-paste and you have a polished interface immediately.
- Cons: Extremely difficult to customize deeply. If a designer requests a “unique” table layout not available in the template, you’ll struggle with tedious CSS overrides.
3. Using Headless UI (TanStack Table v8)
Before writing the first line of code, let’s look at common methods to understand why experts prioritize TanStack Table. Using Components from UI Libraries (MUI, Ant Design, Chakra UI) is popular, but Headless UI offers more flexibility.
Why TanStack Table v8 is Worth Every Penny?
In reality, TanStack Table v8 weighs only about 14-15kb but is incredibly powerful. It offers full TypeScript support, helping you catch errors as soon as you map data incorrectly. The biggest selling point is the complete separation of Logic and UI. You can build your own Design System for tables without being bound by any specific standards.
Never choose a UI library just because it looks good out of the box. If your project tends to have frequently changing requirements, using a rigid library will turn into a nightmare when you need to refactor.
A-Z Guide to Implementing TanStack Table v8
To get started, install the library package into your project:
npm install @tanstack/react-tableStep 1: Define the Column Structure
In TanStack Table, columns act as a blueprint. They define where the data comes from and how it is displayed.
import { createColumnHelper } from '@tanstack/react-table';
const data = [
{ id: 1, name: 'Nguyen Van A', email: '[email protected]', role: 'Admin' },
{ id: 2, name: 'Tran Thi B', email: '[email protected]', role: 'Editor' },
];
const columnHelper = createColumnHelper();
const columns = [
columnHelper.accessor('id', {
header: 'ID',
cell: info => info.getValue(),
}),
columnHelper.accessor('name', {
header: 'Full Name',
cell: info => <span className="font-bold">{info.getValue()}</span>,
}),
columnHelper.accessor('email', {
header: 'Email',
}),
];Step 2: Initialize the Table Instance
Use the useReactTable hook to control the entire state of the table.
import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
function MyDataTable() {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
});
return (
<table className="w-full border-collapse">
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id} className="border p-2 bg-gray-50">
{flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id} className="border p-2">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
);
}Step 3: Adding Sorting Functionality
To enable Sorting, you need to add getSortedRowModel and manage the sorting state via React’s useState.
const [sorting, setSorting] = useState([]);
const table = useReactTable({
data,
columns,
state: { sorting },
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
});Step 4: Adding Filtering (Search) Functionality
Filtering requires getFilteredRowModel. You can create a simple input field to quickly filter data across all columns (Global Filter).
const [globalFilter, setGlobalFilter] = useState('');
const table = useReactTable({
state: { sorting, globalFilter },
onGlobalFilterChange: setGlobalFilter,
getFilteredRowModel: getFilteredRowModel(),
// ... other configs
});Step 5: Adding Pagination Functionality
Pagination prevents the browser from “lagging” when handling thousands of rows of data simultaneously.
const table = useReactTable({
getPaginationRowModel: getPaginationRowModel(),
initialState: { pagination: { pageSize: 10 } },
// ... other configs
});Real-world Experience Handling Large Datasets
When working with real data from an API, never handle Sorting or Pagination on the client side if the list reaches 10,000 rows. Instead, use Manual Pagination. TanStack Table provides flags like manualPagination: true so you can sync the table state directly with the server.
A small tip I often use is combining it with React Query. When a user clicks to change pages, React Query automatically fetches the new data. This approach makes the application much smoother and more professional.
Finally, optimize performance by memoizing columns and data. Having the table re-render constantly every time a user types a character into the search box is a major “no-no” in UI optimization.
Hopefully, this article helps you master the “Headless UI” mindset. Don’t hesitate to try advanced features like Column Resizing or Row Selection to take the user experience to a new level.
