TanStack Table v8 is a headless, framework-agnostic table library with a powerful plugin-based row model system. It separates table logic from rendering, giving developers full control over UI while handling complex features like sorting, filtering, and pagination.
0 / 5 completed
1 / 5
What is the purpose of useReactTable() in TanStack Table v8?
useReactTable() creates a TanStack Table instance. You pass data, columns, getCoreRowModel(), and optional feature row models (e.g., getSortedRowModel()). The returned table instance exposes methods like getHeaderGroups(), getRowModel(), and state for rendering a fully controlled or partially managed table.
2 / 5
How are column definitions typed in TanStack Table v8 with TypeScript?
createColumnHelper<T>() is the recommended way to define typed columns. columnHelper.accessor('firstName', { header: 'First Name' }) creates an accessor column with TypeScript ensuring the key exists on the data type. Display columns (columnHelper.display()) are for action buttons or other non-data cells.
3 / 5
What does the getSortedRowModel() function do when passed to useReactTable?
getSortedRowModel() is a row model plugin that TanStack Table calls when the sorting state changes. It derives a sorted view of the rows without mutating the original data. You combine it with onSortingChange and a sorting state variable to control sort order.
4 / 5
What is column filtering in TanStack Table v8 and which row model enables it?
Column filtering in TanStack Table v8 is driven by the columnFilters state and the getFilteredRowModel() row model. Each filter entry is { id: 'columnId', value: filterValue }. Columns can have custom filterFn implementations, or use built-in functions like 'includesString'.
5 / 5
What is the difference between controlled and uncontrolled state in TanStack Table v8?
Controlled state lets you own state like sorting, pagination, or columnFilters externally using useState and pass them back via the state prop along with onSortingChange etc. This is essential for server-side sorting/pagination where you need to re-fetch data on state changes. Uncontrolled (via initialState) lets the table manage it internally.