TanStack Table (React): Setup, Examples, Sorting & Filtering

Short guide to getting a headless, high-performance data table in React using TanStack Table. Includes install steps, core concepts, common features and concise examples.

Why TanStack Table (and why you should care)

TanStack Table is a headless UI library for building data tables in React (formerly known as “React Table”). Headless means it provides the logic and state management for tables — sorting, filtering, pagination, row models, column definitions — but leaves the rendering to you. For front-end engineers who favor control and performance, that’s a very attractive trade-off.

Compared to opinionated grids, TanStack Table is lightweight and composable. You won’t get a styled table out of the box, but you will get predictable building blocks that scale from a simple sortable list to complex server-driven data grids. If you need pixel-perfect design and bespoke interactivity, being headless is a feature, not an inconvenience.

Search intent in top tutorials and docs is overwhelmingly informational: developers want practical how-tos (installation, setup), examples (sorting, filtering, pagination), and comparisons (React table vs data grid). Expect to encounter both beginner-friendly guides and advanced performance patterns (virtualization, row models) in the top results.

Installation and quick setup

Getting started is intentionally simple. Install the package and peer dependencies (if any) and create a table instance using the core API. The current recommended package is from the TanStack namespace; check the official docs for the exact package name and versioning if you rely on typing and TypeScript support.

Quick voice-search friendly snippet: “Install TanStack Table with npm — npm install @tanstack/react-table — define columns and data — use createTableInstance — render rows.” This short recipe often appears as a featured snippet for installation queries.

// npm
npm install @tanstack/react-table

// basic usage (React)
import { useReactTable, getCoreRowModel } from '@tanstack/react-table'
const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() })

For many projects you only need the core row model and a few helpers. When you need sorting, filtering, or pagination, add the corresponding row models or plugin-pattern options. For server-side workflows, keep the logic in your data fetching layer and feed the table controlled state.

Core concepts: headless architecture, columns, rows, and state

TanStack Table separates concerns clearly: columns define structure and behaviors, the row model computes row states and ordering, and the table instance exposes imperative helpers for sorting, filtering, and pagination. Columns are plain objects — you define accessor functions, cell renderers, and meta data.

There’s a small learning curve: you’ll get comfortable with the “table instance” pattern and the different row models (core, sorted, filtered, paginated, grouped). Understanding when to compute state client-side vs server-side is critical for performance on large datasets.

Common patterns include controlled vs uncontrolled tables. Controlled tables feed state (like page index or sorting) from your component state or Redux, which is ideal for server-driven pagination. Uncontrolled tables allow the library to manage state internally for simpler use cases.

Sorting, filtering, pagination — practical patterns

Sorting and filtering are provided via row models and plugins. For client-side features you typically register the appropriate row model when creating the table instance. For server-side, you capture UI changes (sort descriptor, filter values) and use them to query your backend. The table instance gives you the descriptors you need.

Pagination can be either client-side (compute page slices from the row model) or server-side (request pages from the API). In both cases, keep the UI responsive: show loading states and preserve sorting/filtering criteria across requests. Accessibility and keyboard navigation are your responsibility when using a headless library.

Here’s a concise example of enabling sorting and pagination (client-side):

const table = useReactTable({
  data,
  columns,
  state: { sorting, pagination },
  onSortingChange: setSorting,
  onPaginationChange: setPagination,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
})

Performance, virtualization and advanced tips

When rendering thousands of rows, virtualization is essential. TanStack Table pairs well with libraries like react-virtual (from the same ecosystem) to render only visible rows while preserving table logic. The pattern is: compute the row model, then pass visible rows into a virtualized list for DOM rendering.

Memoization is your friend. Memoize column definitions and row data references to avoid unnecessary recomputations. Also prefer stable accessor functions and keys so React can reuse DOM nodes across re-renders. The library exposes hooks and utilities to minimize overhead when state changes frequently.

For very large datasets, prefer server-side pagination and sorting. Keep filters and sorts as query params and let the backend return ready-to-render chunks. This reduces browser CPU load and keeps UI snappy — a practical, battle-tested approach.

Examples & common implementation patterns

Below are common examples you’ll encounter in real projects: simple sortable table, server-side paginated table, and interactive row selection. Each template follows the same lifecycle: define columns, create the table instance, and render table markup using table.getHeaderGroups() and table.getRowModel().rows.

Simple interactive table pattern includes row selection and inline editing. You manage selected row IDs in state, and update cell values via callbacks that update your data source. Because rendering is delegated to you, you can integrate any UI library (Material UI, Tailwind components, or custom styles).

For practical step-by-step tutorials, see the community guide TanStack Table tutorial and the official TanStack Table documentation for up-to-date examples and advanced patterns.

Best practices checklist

• Memoize columns and data; keep accessors stable.
• Use server-side controls for large datasets (pagination/sort/filter) where appropriate.
• Combine with react-virtual for virtualization to handle thousands of rows.

FAQ

Q: How do I install TanStack Table in a React project?
A: Run npm install @tanstack/react-table (or yarn). Import the hooks and row models you need from the package, define columns and data, create a table instance using useReactTable, and render using the table instance APIs. For detailed step-by-step, see the TanStack Table tutorial.

Q: How do I implement sorting and filtering?
A: Add the sorting and filtering row models to your table instance (getSortedRowModel, getFilteredRowModel), keep sorting and filter state in React state (or controlled from the server), and call the table’s helper functions to update descriptors. For server-side filtering, send descriptor changes to your API and refresh data accordingly.

Q: Is TanStack Table headless and does it support virtualization?
A: Yes — it’s intentionally headless. For virtualization, pair it with react-virtual (same TanStack ecosystem) and render only visible rows, while using TanStack Table to compute row models and metadata.

Main / Primary (high intent)
- TanStack Table React
- TanStack Table tutorial
- React table TanStack
- TanStack Table installation
- TanStack Table example

Feature / Intent (mid frequency)
- TanStack Table sorting
- TanStack Table filtering
- TanStack Table pagination
- React data table headless
- React interactive table
- React table component

Comparative / Long-tail (supporting)
- React data grid vs TanStack Table
- TanStack Table setup with virtualization
- TanStack Table headless example
- React table component tutorial
- TanStack Table v8 examples

LSI & related (use naturally)
- useReactTable hook
- getCoreRowModel, getSortedRowModel
- server-side pagination and filtering
- react-virtual integration
- table instance API

Cluster grouping
- Core: "TanStack Table React", "React table TanStack", "TanStack Table setup"
- Features: "sorting", "filtering", "pagination", "virtualization"
- Tutorials & examples: "TanStack Table tutorial", "TanStack Table example", "React table component tutorial"
- Install & config: "TanStack Table installation", "React data table headless"

Notes: Use these keywords organically in headings, alt text, anchors, and code comments. Prioritize high-intent queries near the top and in metadata (title/description).