TanStack Table in React: A Complete Tutorial for Building Interactive Data Tables

Updated July 2025  ·  14 min read  · 
Covers TanStack Table v8 · React 18+ · TypeScript

If you’ve ever wrestled with building a React data table that actually does what you want — sorts correctly, filters without lag, paginates without drama, and doesn’t ship 400 KB of CSS you’ll never use — then you already understand why TanStack Table exists. It’s not a table. It’s a table engine. The difference matters more than it sounds.

This guide walks you through everything from TanStack Table installation to building a fully featured React interactive table with sorting, filtering, and pagination. We’ll write real code, explain real trade-offs, and skip the parts that belong in a README nobody reads.

What Is TanStack Table and Why Should You Care?

TanStack Table (formerly known as React Table) is a headless UI library for building tables and data grids in React, Vue, Solid, Svelte, and vanilla JS. “Headless” is the operative word: the library handles all the hard state logic — sorting, filtering, pagination, row selection, column visibility, column pinning — and hands you back a structured API. What you render is entirely up to you.

Compare that to AG Grid or Material UI DataGrid: those libraries ship fully formed components with their own DOM structure and built-in styles. Customizing them beyond their theming API ranges from tedious to genuinely painful. TanStack Table doesn’t care if your table is a <table>, a <div> grid, or a canvas element — it just manages state. That architectural decision makes it the most flexible React table library available today, at the cost of a slightly steeper initial setup.

Version 8 — the current major release — was a complete rewrite. It’s fully TypeScript-native, framework-agnostic at the core, and exposes a single primary hook: useReactTable. If you’re coming from React Table v6 or v7, the mental model has shifted significantly. The hooks-per-feature pattern is gone; everything flows through one configuration object. Once you internalize that, the API becomes surprisingly elegant.

TanStack Table Installation and Project Setup

Getting started with TanStack Table setup is straightforward. The package lives under the @tanstack namespace, and for React specifically you’ll install the React adapter:

# npm
npm install @tanstack/react-table

# yarn
yarn add @tanstack/react-table

# pnpm
pnpm add @tanstack/react-table

That’s literally the entire installation. No peer dependency sprawl, no CSS imports required, no build plugin configuration. The package is tree-shakeable, so your bundle only includes the features you actually use. A basic table with sorting and pagination typically adds around 12–15 KB gzipped to your bundle — compared to AG Grid Community’s ~100 KB baseline or MUI DataGrid’s dependency on the full MUI ecosystem.

For this tutorial, assume a standard React 18 project bootstrapped with Vite or Create React App. TypeScript is optional but strongly recommended — TanStack Table’s generic types for row data are genuinely useful and will save you debugging time. If you’re using TypeScript, make sure your tsconfig.json has "strict": true enabled to get the full benefit of the type inference.

Understanding Column Definitions and the Core API

Before writing any JSX, you need to understand column definitions — the backbone of every TanStack Table instance. A column definition is a plain JavaScript object (or array of objects) that tells the table what data to display, how to access it, and what behaviors to enable. You create them using the createColumnHelper utility, which provides type inference based on your row data shape.

import {
  createColumnHelper,
  useReactTable,
  getCoreRowModel,
  flexRender,
} from '@tanstack/react-table';

type User = {
  id: number;
  name: string;
  email: string;
  role: string;
  status: 'active' | 'inactive';
};

const columnHelper = createColumnHelper<User>();

const columns = [
  columnHelper.accessor('id', {
    header: 'ID',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('name', {
    header: 'Full Name',
    cell: (info) => <strong>{info.getValue()}</strong>,
  }),
  columnHelper.accessor('email', {
    header: 'Email Address',
  }),
  columnHelper.accessor('role', {
    header: 'Role',
  }),
  columnHelper.accessor('status', {
    header: 'Status',
    cell: (info) => (
      <span className={`badge badge--${info.getValue()}`}>
        {info.getValue()}
      </span>
    ),
  }),
];

The accessor method is the workhorse. It takes a key from your data type (giving you full TypeScript autocomplete) and an options object. The cell renderer is optional — if omitted, TanStack Table renders the raw value. You can return any valid JSX from a cell renderer, which is where the “headless” power becomes immediately tangible: badges, action buttons, images, nested components — all possible without fighting the library’s opinions.

Beyond accessor columns, TanStack Table supports display columns (for action buttons, checkboxes) and group columns (for column grouping with nested headers). Column definitions also accept enableSorting, enableFiltering, size, minSize, maxSize, and a meta field for any custom data you want to attach. This design means your column config doubles as documentation for your table’s behavior — a pleasant side effect of the declarative approach.

Building Your First React Table Component

With column definitions in place, the actual React table component is assembled around useReactTable. This hook takes your data, columns, and feature-specific row models, then returns a table instance you use to drive rendering. Here’s a minimal but complete example:

import React, { useState } from 'react';
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
} from '@tanstack/react-table';

const data: User[] = [
  { id: 1, name: 'Alice Monroe', email: 'alice@example.com', role: 'Admin', status: 'active' },
  { id: 2, name: 'Bob Chen', email: 'bob@example.com', role: 'Editor', status: 'inactive' },
  { id: 3, name: 'Carol Davis', email: 'carol@example.com', role: 'Viewer', status: 'active' },
  // ... more rows
];

export function UserTable() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id} style={{ padding: '10px', textAlign: 'left', borderBottom: '2px solid #e2e8f0' }}>
                {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} style={{ padding: '10px', borderBottom: '1px solid #f1f5f9' }}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Notice flexRender — it’s a small utility that handles both function-based and value-based cell/header definitions uniformly. You call it with the definition and the rendering context, and it figures out whether to invoke a function or render a value. It’s one of those API decisions that seems minor until you realize how many edge cases it quietly absorbs.

The rendering loop follows a consistent pattern throughout TanStack Table: call a getter on the table instance (e.g., getHeaderGroups(), getRowModel()), iterate over the result, and render. There’s no magic prop wiring, no render props to untangle, no context providers to configure. The table instance is a plain object with methods — easy to test, easy to reason about, easy to extend.

Adding Sorting to TanStack Table

TanStack Table sorting is enabled by adding a single import and a row model to your config. The library handles multi-column sort, sort direction cycling, stable sort ordering, and custom sort functions — all configurable per column:

import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,  // 👈 add this
  SortingState,
} from '@tanstack/react-table';

export function SortableUserTable() {
  const [sorting, setSorting] = useState<SortingState>([]);

  const table = useReactTable({
    data,
    columns,
    state: { sorting },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),  // 👈 and this
  });

  return (
    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th
                key={header.id}
                onClick={header.column.getToggleSortingHandler()}
                style={{
                  padding: '10px',
                  cursor: header.column.getCanSort() ? 'pointer' : 'default',
                  userSelect: 'none',
                  borderBottom: '2px solid #e2e8f0',
                }}
              >
                {flexRender(header.column.columnDef.header, header.getContext())}
                {header.column.getIsSorted() === 'asc' ? ' ▲' 
                  : header.column.getIsSorted() === 'desc' ? ' ▼' 
                  : ' ⇅'}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id} style={{ padding: '10px', borderBottom: '1px solid #f1f5f9' }}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

The sort state is managed externally as React state — a deliberate design choice that makes TanStack Table play nicely with URL-based state, localStorage persistence, and server-side sort parameters. getToggleSortingHandler() returns a click handler that cycles through ascending → descending → unsorted. getCanSort() checks whether a column has sorting enabled (useful for disabling cursor pointer on non-sortable columns).

For custom sort logic, column definitions accept a sortingFn property. TanStack Table ships built-in functions like 'alphanumeric', 'text', 'datetime', and 'basic', or you can pass your own comparator: sortingFn: (rowA, rowB, columnId) => rowA.getValue(columnId) - rowB.getValue(columnId). Multi-column sort is enabled by default on shift-click; you can control the maximum number of sort columns via the maxMultiSortColCount table option.

Implementing TanStack Table Filtering

TanStack Table filtering comes in two flavors: column-level filters (triggered by per-column inputs) and a global filter (a single search input that scans all columns). Both are non-destructive — the original data array is never mutated, and filter state is managed externally like sorting state:

import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  getFilteredRowModel,  // 👈
  ColumnFiltersState,
} from '@tanstack/react-table';

export function FilterableTable() {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

  const table = useReactTable({
    data,
    columns,
    state: { sorting, columnFilters },
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),  // 👈
  });

  return (
    <div>
      {/* Column filter inputs */}
      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
        <input
          placeholder="Filter by name..."
          value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
          onChange={(e) => table.getColumn('name')?.setFilterValue(e.target.value)}
          style={{ padding: '0.5rem', border: '1px solid #cbd5e1', borderRadius: '6px' }}
        />
        <input
          placeholder="Filter by role..."
          value={(table.getColumn('role')?.getFilterValue() as string) ?? ''}
          onChange={(e) => table.getColumn('role')?.setFilterValue(e.target.value)}
          style={{ padding: '0.5rem', border: '1px solid #cbd5e1', borderRadius: '6px' }}
        />
      </div>

      {/* Table renders the same as before */}
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        {/* ... thead and tbody identical to previous example */}
      </table>

      <p style={{ color: '#64748b', fontSize: '0.85rem' }}>
        Showing {table.getFilteredRowModel().rows.length} of {data.length} results
      </p>
    </div>
  );
}

Column filters use a includes-style match by default (case-insensitive string containment). You can override this per column using the filterFn column option. Built-in filter functions include 'includesString', 'includesStringSensitive', 'equalsString', 'arrIncludes', 'arrIncludesAll', 'arrIncludesSome', 'equals', 'weakEquals', and 'inNumberRange'. The last one is particularly useful for numeric range sliders.

Global filtering works similarly but requires getGlobalFilterFn in your config and a globalFilter state variable. The key behavioral difference is that global filter runs across all filterable columns simultaneously, while column filters target specific fields. Combining both in one table is perfectly valid — they stack. The order of application follows the row model pipeline: core → filter → sort → paginate.

TanStack Table Pagination: Client-Side and Server-Side

TanStack Table pagination is where the library’s state-externalizing philosophy pays the most visible dividends. Client-side pagination takes about a dozen lines; server-side pagination — where your API returns one page at a time — requires only a flag flip and a data-fetching integration:

import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  getFilteredRowModel,
  getPaginationRowModel,  // 👈
  PaginationState,
} from '@tanstack/react-table';

export function PaginatedTable() {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });

  const table = useReactTable({
    data,
    columns,
    state: { sorting, columnFilters, pagination },
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    onPaginationChange: setPagination,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),  // 👈
  });

  return (
    <div>
      {/* Table markup here */}

      {/* Pagination Controls */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '1rem' }}>
        <button onClick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage()}>«</button>
        <button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>‹</button>

        <span>
          Page{' '}
          <strong>{table.getState().pagination.pageIndex + 1} of {table.getPageCount()}</strong>
        </span>

        <button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>›</button>
        <button onClick={() => table.setPageIndex(table.getPageCount() - 1)} disabled={!table.getCanNextPage()}>»</button>

        <select
          value={table.getState().pagination.pageSize}
          onChange={(e) => table.setPageSize(Number(e.target.value))}
        >
          {[5, 10, 20, 50].map((size) => (
            <option key={size} value={size}>Show {size}</option>
          ))}
        </select>
      </div>
    </div>
  );
}

For server-side pagination, you set manualPagination: true in the table config and provide a pageCount derived from your API response (e.g., Math.ceil(totalCount / pageSize)). The table stops trying to slice data itself and trusts that whatever you put in data is already the correct page. You then react to pagination state changes — via useEffect or TanStack Query’s query key — to fetch the appropriate page from your backend.

The same manual* pattern applies to sorting and filtering: manualSorting: true and manualFiltering: true shift responsibility for applying those operations to your server. This is the architecture you want when dealing with datasets of tens of thousands of rows — letting the database handle sort and filter is orders of magnitude faster than shipping all that data to the client and processing it in JavaScript.

Row Selection, Column Visibility, and Beyond

TanStack Table’s feature set extends well past the sorting-filtering-pagination trinity. Row selection — bulk-select rows for batch actions — is handled through a dedicated checkbox column using the display column pattern, combined with rowSelection state and enableRowSelection:

const selectionColumn = columnHelper.display({
  id: 'select',
  header: ({ table }) => (
    <input
      type="checkbox"
      checked={table.getIsAllPageRowsSelected()}
      onChange={table.getToggleAllPageRowsSelectedHandler()}
    />
  ),
  cell: ({ row }) => (
    <input
      type="checkbox"
      checked={row.getIsSelected()}
      onChange={row.getToggleSelectedHandler()}
    />
  ),
});

// Then add [selectionColumn, ...columns] to useReactTable

Column visibility is managed through columnVisibility state and the column.toggleVisibility() method. Exposing a “columns” dropdown that lets users show/hide fields is a common UX pattern in React data grid implementations, and TanStack Table makes it a 10-minute feature rather than a 2-day rabbit hole. You iterate over table.getAllColumns(), render a checkbox for each, and call column.getToggleVisibilityHandler().

Other features worth knowing about: column resizing (drag-to-resize with pointer events), column pinning (sticky left/right columns in a scrollable container), expanding rows (master-detail / tree-table patterns with getExpandedRowModel()), and column ordering (drag-and-drop reordering stored as an array of column IDs). None of these require additional packages — they’re all part of the core @tanstack/react-table bundle. You simply include the relevant row model and state slice.

Performance Considerations and Virtualization

TanStack Table is fast for typical datasets — a few thousand rows with sorting and filtering stays snappy because the row model computations are memoized. The library uses React’s standard state-and-render cycle: when state changes, affected row models recompute, and React diffs the resulting DOM. There’s no internal scheduler, no custom fiber, no magic. Which also means the usual React performance rules apply: stable references for data and columns, useMemo where appropriate.

For very large datasets — 50,000+ rows rendered simultaneously — you’ll want virtual scrolling. TanStack Table is designed to pair with TanStack Virtual (@tanstack/react-virtual), which handles rendering only the visible rows in a scrollable container. The integration is straightforward: you feed TanStack Virtual the list of rows from table.getRowModel().rows and render only the virtualized items. The table doesn’t know or care about the virtual layer — another win for the headless architecture.

A common performance pitfall is recreating column definitions on every render. Always define columns outside your component or memoize them with useMemo. Similarly, if your data prop is derived from a transformation, memoize that too. These aren’t TanStack Table quirks — they’re standard React optimization patterns — but they’re worth emphasizing because an unmemoized columns array will trigger a full table recomputation on every keystroke when a filter input is active.

TanStack Table vs. the Competition: A Clear-Eyed Look

The React table library landscape is not short on options, and TanStack Table isn’t the right choice for every project. Here’s an honest comparison to help you decide:

• AG Grid Community: Batteries-included, enterprise-grade, massive feature surface. Choose it if you need built-in Excel export, clipboard operations, or context menus out of the box. Avoid it if bundle size or style customization matters.
• MUI DataGrid: Excellent if you’re already on Material UI. The free tier covers most use cases. The Pro/Premium license unlocks advanced features but adds cost. Theming is tied to MUI’s system.
• React Data Grid (by Adazzle): Good middle ground with spreadsheet-like editing. Less flexible than TanStack Table but more structured than rolling your own UI.
• TanStack Table: Maximum flexibility, minimum opinions, excellent TypeScript support, zero-cost UI layer. Best choice for design-system-first teams or projects where the table needs to match a precise visual spec.

The decision usually comes down to a single question: do you want a library that gives you a table, or one that helps you build a table? If your design team has opinions — and good design teams always do — TanStack Table is the answer. If you need a feature-complete data grid in an afternoon with no custom styling, AG Grid or MUI DataGrid will serve you faster.

It’s also worth noting that TanStack Table’s headless nature makes it uniquely portable. The same column definitions, filter logic, and pagination state can be reused across a <table> for desktop, a card-based layout for mobile, and a CSV export utility — all from one table instance. That cross-context reuse is difficult or impossible with any opinionated table component.

Complete TanStack Table Example: Putting It All Together

Here’s a full, self-contained TanStack Table example combining sorting, filtering, and pagination in a single component. This is production-ready in structure, though you’ll want to replace the inline styles with your design system’s tokens:

import React, { useState, useMemo } from 'react';
import {
  createColumnHelper,
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  flexRender,
  SortingState,
  ColumnFiltersState,
  PaginationState,
} from '@tanstack/react-table';

type Employee = {
  id: number;
  name: string;
  department: string;
  salary: number;
  startDate: string;
};

const mockData: Employee[] = Array.from({ length: 87 }, (_, i) => ({
  id: i + 1,
  name: `Employee ${i + 1}`,
  department: ['Engineering', 'Marketing', 'Design', 'Sales'][i % 4],
  salary: 50000 + (i * 1234) % 80000,
  startDate: new Date(2018 + (i % 6), i % 12, (i % 28) + 1).toISOString().slice(0, 10),
}));

const columnHelper = createColumnHelper<Employee>();

const columns = [
  columnHelper.accessor('id', { header: 'ID', enableSorting: true }),
  columnHelper.accessor('name', { header: 'Name', enableSorting: true }),
  columnHelper.accessor('department', { header: 'Department', enableSorting: true }),
  columnHelper.accessor('salary', {
    header: 'Salary',
    enableSorting: true,
    cell: (info) => `$${info.getValue().toLocaleString()}`,
  }),
  columnHelper.accessor('startDate', { header: 'Start Date', enableSorting: true }),
];

export function EmployeeTable() {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 10 });

  const data = useMemo(() => mockData, []);

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

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif' }}>

      {/* Search Filter */}
      <input
        placeholder="Search by name..."
        value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
        onChange={(e) => table.getColumn('name')?.setFilterValue(e.target.value)}
        style={{ marginBottom: '1rem', padding: '0.5rem 0.75rem', border: '1px solid #cbd5e1', borderRadius: '6px', width: '260px' }}
      />

      {/* Table */}
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
        <thead style={{ background: '#f8fafc' }}>
          {table.getHeaderGroups().map((hg) => (
            <tr key={hg.id}>
              {hg.headers.map((header) => (
                <th
                  key={header.id}
                  onClick={header.column.getToggleSortingHandler()}
                  style={{
                    padding: '12px 14px',
                    textAlign: 'left',
                    cursor: 'pointer',
                    borderBottom: '2px solid #e2e8f0',
                    whiteSpace: 'nowrap',
                    color: '#475569',
                    fontWeight: 600,
                  }}
                >
                  {flexRender(header.column.columnDef.header, header.getContext())}
                  {{ asc: ' ▲', desc: ' ▼' }[header.column.getIsSorted() as string] ?? ' ⇅'}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row, i) => (
            <tr key={row.id} style={{ background: i % 2 === 0 ? '#ffffff' : '#f8fafc' }}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} style={{ padding: '11px 14px', borderBottom: '1px solid #f1f5f9', color: '#334155' }}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      {/* Pagination */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', marginTop: '1.25rem', flexWrap: 'wrap' }}>
        <button onClick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage()} style={{ padding: '0.4rem 0.7rem' }}>«</button>
        <button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()} style={{ padding: '0.4rem 0.7rem' }}>‹</button>
        <span style={{ color: '#475569', fontSize: '0.9rem' }}>
          Page <strong>{table.getState().pagination.pageIndex + 1}</strong> of <strong>{table.getPageCount()}</strong>
        </span>
        <button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()} style={{ padding: '0.4rem 0.7rem' }}>›</button>
        <button onClick={() => table.setPageIndex(table.getPageCount() - 1)} disabled={!table.getCanNextPage()} style={{ padding: '0.4rem 0.7rem' }}>»</button>
        <select
          value={pagination.pageSize}
          onChange={(e) => table.setPageSize(Number(e.target.value))}
          style={{ padding: '0.4rem', marginLeft: '0.5rem' }}
        >
          {[5, 10, 25, 50].map((s) => <option key={s} value={s}>{s} rows</option>)}
        </select>
        <span style={{ color: '#94a3b8', fontSize: '0.85rem' }}>
          {table.getFilteredRowModel().rows.length} total results
        </span>
      </div>
    </div>
  );
}

This component is under 100 lines excluding imports, supports 87 rows with instant client-side sort, filter, and pagination, and has zero external dependencies beyond @tanstack/react-table itself. Add your own CSS classes or Tailwind utilities where the inline styles are, and you have a production-quality React data grid that looks exactly like your design system intended.

The useMemo wrapping of mockData is important in real applications. When data comes from an API call via TanStack Query or a Redux selector, memoize it before passing to useReactTable. An unstable data reference causes the table to believe its data has changed on every render, triggering unnecessary recomputation of all row models. It’s a silent performance bug that’s easy to introduce and annoying to track down.