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.jsonwith your style, base color, and@/components/uialiases). If you don't have one, runpnpm dlx shadcn@latest initfirst. - Tailwind CSS v4 and React 19 / Next.js (or any bundler that compiles your
components/).
Any shadcn style works
It only uses standard primitive APIs, so it adapts to any shadcn style (Sera, Vega, Nova, Luma, …) and base color. The primitives it depends on are installed 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:
- Installs npm dependencies —
@tanstack/react-table,@tanstack/react-virtual,@tanstack/match-sorter-utils,@dnd-kit/*,date-fns,papaparse,xlsx,radix-ui,@remixicon/react(plus@types/papaparse). - 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. - Writes the table to
components/ui/data-table/. - Injects design tokens (
--highlight,--highlight-foreground) into yourglobals.css.
Verify
Import the public API from your @/components/ui/data-table alias:
import { DataTable, useDataTable } from "@/components/ui/data-table"
If tsc reports a missing papaparse declaration, install its types:
pnpm add -D @types/papaparse
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.
Next
Head to the Quick start to render your first table.