v1.0 · TanStack Table v9
Every data-table feature, in your shadcn style.
Sorting, filtering, editing, grouping and virtualization, installed as source you own. One hook in, one component out.
83 examples · 38 languages · 600+ tests · Radix & Base UI
01Customize
Make it yours.
Pick a shadcn style, colors, font and radius — the table restyles live. It installs in your project's own style.
02Features
Everything a data table needs.
Each feature turns on with an option or two. Every one has a guide with a live example.
Filtering & search
Filters per column with switchable modes, a fuzzy global search and an advanced filter builder.
Guide →Editing
Edit a cell, a row, a whole table or a modal form, with validation per column.
Guide →Grouping & aggregation
Drag a header to group rows, then sum, count or average each group.
Guide →Virtualization
Scroll through 100,000 rows smoothly. Only the rows and columns in view are rendered.
Guide →Column & row pinning
Keep key columns at the edges and important rows at the top or bottom while the rest scrolls.
Guide →Drag & drop
Reorder rows and columns, or drag rows into another table, with the pointer, touch or keyboard.
Guide →Animations
Rows glide into place when you sort, filter or group, and hold still for reduced motion.
Guide →38 languages
Install only the languages you need, right-to-left included, or override any string.
Guide →Accessibility & keyboard
An ARIA grid you can use with arrow keys and a screen reader, checked with axe in CI.
Guide →
Built on
- TanStack Table v9
- shadcn/ui
- React 19
- Tailwind CSS v4
- Radix UI & Base UI
Feature parity with Material React Table — see the migration guide
03For coding agents
Paste one line into your agent.
The skill teaches your agent the install, the API and the patterns, so it builds the table the way the docs do.
Install shadcn-react-table in my app: https://
- Skill
- npx skills add Monabbir-Ahmmad/
shadcn-react-table - MCP
- pnpm dlx shadcn@latest mcp init --client claude
- Docs
- https://
monabbir-ahmmad.github.io/ shadcn-react-table/ llms.txt
04Install
Three steps.
One command installs the table source, the primitives it uses in your style, and its dependencies.
Add the block
$ npx shadcn@latest add https://monabbir-ahmmad.github.io/ shadcn-react-table/ r/ data-table.json Build a table
import { DataTable, useDataTable } from "@/components/ui/data-table" function Users({ data, columns }) { const table = useDataTable({ data, columns }) return <DataTable table={table} /> }Make it yours
The source lives in your project, so edit it in place — restyle it, change a behavior, or delete what you do not use.