Data Table
Powerful table and datagrids built using TanStack Table.
| Status | Amount | |||
|---|---|---|---|---|
| pending | m@example.com | $100.00 | ||
| processing | example@gmail.com | $125.00 | ||
| success | ken99@example.com | $316.00 | ||
| success | Abe45@example.com | $242.00 | ||
| processing | Monserrat44@example.com | $837.00 |
0 of 12 row(s) selected.
Installation
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/data-table.jsonUsage
Build interactive data tables with sorting, filtering, pagination, column visibility, and row selection on top of TanStack Table v9 and the Table primitives.
import { DataTable } from "@/components/ui/data-table";
import { columns, payments } from "@/components/ui/payments";
export default function Example() {
return <DataTable columns={columns} data={payments} />;
}payments.tsx is a sample column definition and dataset you can copy and adapt. Declare which
TanStack features you need in data-table-features.ts (tableFeatures(...)). Only registered
features ship in the bundle. Pass DataTableFeatures as the first generic to createColumnHelper
and ColumnDef.