Shadcn React Table

Search documentation

Search the docs

MarkdownOpen in ChatGPTOpen in ClaudeEdit on GitHub

Shadcn React Table

A shadcn/ui data table with Material React Table (MRT V3) feature parity, built on TanStack Table v9. It ships as a shadcn registry component — you install the source into your own project with the shadcn CLI, so it inherits your style, base color, and theme tokens and you own every line.

PlaygroundSwitch each feature on and off from the Settings menu.
GitHub
Drag a column here to group by it
#
ID
Row actions
2261
45000134754
099
1AvaThompsonOwnerEngineeringactive22$45,000Jan 2, 2023
0%
2LiamNguyenAdminMarketinginactive25$47,137Jan 13, 2023
9%
3NoahSilvaEditorDesignpending28$49,274Jan 24, 2023
18%
4EmmaCarterViewerSalesactive31$51,411Feb 4, 2023
27%
5OliviaRossiOwnerSupportinactive34$53,548Feb 15, 2023
36%
6WilliamWalkerAdminEngineeringpending37$55,685Feb 26, 2023
45%
7SophiaPatelEditorMarketingactive40$57,822Mar 9, 2023
54%
8JamesMullerViewerDesigninactive43$59,959Mar 20, 2023
63%
9IsabellaParkOwnerSalespending46$62,096Mar 31, 2023
72%
10LucasReyesAdminSupportactive49$64,233Apr 11, 2023
81%
$4,120,536
Rows per page
1–10 of 48

How it works

It is a thin, opinionated layer over TanStack Table:

  • It wraps TanStack's useTable with sensible defaults (row models wired for you, an auto-injected selection column, localization) and adds to the instance: its UI state in table.getState(), methods such as table.setDensity, and its resolved options on table.dataTable.
  • Controlled state (sorting, columnFilters, pagination, rowSelection, …), the manual* server-side flags, and getRowId all pass straight through to TanStack. If you know TanStack Table, you already know this table.
  • The <DataTable /> component reads table.dataTable to render the toolbar, filter row, body, footer, and pagination — no prop drilling.

For AI tools

Coding agents can install and use the table from one prompt, a skill file, the shadcn MCP server, or the docs as Markdown (/llms.txt, and .md after any page URL). See AI agent setup.

Start here

InstallationThe data table is distributed as a shadcn registry item.Quick startA minimal table is two pieces: columns (TanStack column defs, typed with DataTableColumnDef) and a call to useDataTable, whose result you hand to <DataTable />.AI agent setupSet up the data table with a coding agent — Claude Code, Cursor, Codex, Copilot and the like.Migrating from MRTThe data table follows Material React Table (MRT) closely: the same hook-then-component shape, most of the same options, and the same TanStack Table underneath.

Popular guides

Column filteringEach column can expose its own filter control in a per-column filter row.EditingSet enableEditing: true to make rows editable, then choose how editing is presented with editDisplayMode.Server-side dataWhen your data lives on a server, hand pagination, sorting, and filtering off to it.Part props (slotProps)Every part of the table — the scroll surface, rows, cells, toolbars, the search box, edit fields and more — accepts extra props through the slotProps option.VirtualizationVirtualization renders only the cells currently in view, keeping large tables fast.Row selectionSet enableRowSelection: true to add a leading checkbox column.

Browse all guides →

Next →InstallationThe data table is distributed as a shadcn registry item.