Shadcn React Table

Search documentation

Search the docs

Installation

The data table is distributed as a shadcn registry item. The CLI installs the table source into your project, pulls the shadcn primitives it depends on (in your configured style), and installs the npm packages it needs.

Prerequisites

  • A project already set up with shadcn/ui (a components.json with your style, base color, and @/components/ui aliases). If you don't have one, run pnpm dlx shadcn@latest init first.
  • Tailwind CSS v4 and React 19 / Next.js (or any bundler that compiles your components/).

Any shadcn style works — Radix UI or Base UI

It only uses standard primitive APIs, so it adapts to any shadcn style (Sera, Vega, Nova, Luma, …), base color, and component library flavor. The same URL works in Radix-flavored and Base-UI-flavored projects: a current shadcn CLI (4.x — the one with init -b radix|base) adapts the source to your flavor at install time and pulls the primitives in your style. Nothing is overwritten unless you opt in.

Add the component

Run the shadcn CLI against the registry URL:

pnpm dlx shadcn@latest add https://monabbir-ahmmad.github.io/shadcn-react-table/r/data-table.json

This single command:

  1. Installs npm dependencies — @tanstack/react-table, @tanstack/react-virtual, @tanstack/match-sorter-utils, @dnd-kit/*, date-fns, lucide-react. The headless component library (Radix UI or Base UI) comes with the primitives below, matching your flavor.
  2. Pulls the shadcn primitives it uses (badge, button, calendar, checkbox, command, context-menu, dialog, dropdown-menu, input, label, popover, select, skeleton, slider, table, tooltip) in your style — and skips any you already have.
  3. Writes the table to components/ui/data-table/.
  4. Injects design tokens (--highlight, --highlight-foreground) into your globals.css.

Verify

Import the public API from your @/components/ui/data-table alias:

import { DataTable, useDataTable } from "@/components/ui/data-table"

react-day-picker v9+

If your shadcn calendar.tsx predates react-day-picker v9, its classNames may use the old table key (renamed to month_grid). Re-run shadcn add calendar or rename the key — this only affects the date filter variant. The calendar itself comes from your own shadcn setup via registryDependencies — the table isn't tied to react-day-picker, and any calendar with a compatible props surface drops in.

Next

Head to the Quick start to render your first table.

← PreviousIntroductionNext →Quick start