ShadTable

Search docs

Jump to any table example

Discord—

shadcn/ui + TanStack Table

Table components for the parts of your app that a design system doesn't cover.

ShadTable is a set of composable, copy-paste table components — sortable data tables, server-side pagination, tree and pivot structures, inline editing, dashboard/analytics variants — for engineers building data-dense UIs on shadcn/ui and TanStack Table.

npx shadcn add https://shad-table.dev/r/data-table.json
Browse componentsGitHubDiscord

src/components/basic/index.tsx

live
Name
Email
Role
Status
Ava Thompsonava.t@example.comAdminActive
Liam Chenliam.chen@example.comEditorActive
Sofia Patelsofia.p@example.comViewerInactive
Noah Garcianoah.g@example.comEditorActive
Mia Johnsonmia.j@example.comAdminPending
Ethan Kimethan.kim@example.comViewerActive
Isabella Rossiisabella.r@example.comEditorActive
Lucas Martinlucas.m@example.comAdminInactive
Amelia Novakamelia.n@example.comViewerActive
Mason Leemason.lee@example.comEditorPending

Components

Organized the same way as the docs sidebar — pick the category that matches the shape of your data, not a generic feature list.

Data Table

The base primitive — client-side sorting, filtering, and pagination over an in-memory dataset. Everything else builds on this pattern.

SSR

For datasets too large to ship to the client — pagination and filtering trigger real server requests instead of slicing an array in the browser.

Structure / Hierarchy

Nested and dimensional data — trees, grouped rows, pivoted aggregates, and parent/child record pairs.

Interaction-heavy

Tables where the user reshapes the data directly — selecting tree nodes, reordering rows, editing cells in place, resizing columns.

Dashboard / Analytics-specific

Summary rows, side-by-side comparisons, and heatmap cells for dashboards where the table is the analysis surface, not just a record list.

Export / Density Variants

Utilities that sit on top of any table — compact/comfortable row density and CSV export, wired through the same column API.

Why ShadTable

A1

You own the code

Installed via the shadcn CLI as source files in your repo, not a package in node_modules. No version to bump, no black box to eject from when a table needs to do something the library didn’t anticipate.

B1

Built on TanStack Table’s headless core

Sorting, filtering, pagination, and row models come from a battle-tested, framework-agnostic engine. ShadTable supplies the shadcn/ui rendering layer on top — it doesn’t reinvent table state management.

A2

Composable primitives, not a monolith

Each table type is its own small set of components. Need a tree table with custom row actions? Extend the tree components directly instead of threading fifteen props through one do-everything <DataTable>.

B2

Real filtering, not fixed dropdowns

Filters read and write the TanStack column API directly — column.getFilterValue() / setFilterValue() — so you can wire up range filters, multi-select, or server-driven facets. It’s not a hardcoded Select bolted onto a header.

Install

Run the CLI command inside a project that already has shadcn/ui set up. It adds the table component and its dependencies as source files under your components directory.

npx shadcn add https://shad-table.dev/r/data-table.json
app/users/users-table.tsx
import { DataTable } from '@/components/basic/data-table'
import { columns } from '@/components/basic/columns'


export function UsersTable({ data }: { data: User[] }) {
  return <DataTable columns={columns} data={data} />
}