Data Table
Sortable, filterable, paginated table on TanStack Table.
| Status | |||
|---|---|---|---|
| INV-001 | Duggup | $450 | Paid |
| INV-002 | Draftsy | $300 | Paid |
| INV-003 | N1 Health | $1200 | Pending |
| INV-004 | Mejjos | $800 | Paid |
Page 1 of 2
Sorting, the client filter box, and pagination above are live.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/data-table.jsonUsage
Define columns with TanStack's ColumnDef; Plinth owns the rendering.
import { DataTable, DataTableSortHeader, type ColumnDef } from "@/components/ui/data-table";
type Payment = { invoice: string; client: string; amount: number };
const columns: ColumnDef<Payment, unknown>[] = [
{
accessorKey: "invoice",
header: ({ column }) => (
<DataTableSortHeader column={column}>Invoice</DataTableSortHeader>
),
},
{ accessorKey: "client", header: "Client" },
{
accessorKey: "amount",
header: "Amount",
cell: ({ row }) => <span className="tabular-nums">${row.original.amount}</span>,
},
];
<DataTable
columns={columns}
data={payments}
filterColumn="client"
pageSize={10}
/>Props
| Prop | Type | Default |
|---|---|---|
columns | ColumnDef[] | required |
data | TData[] | required |
filterColumn | string (column id) | — (hides search) |
filterPlaceholder | string | Filter… |
pageSize | number | — (no pagination) |
For column pinning, row selection, and server-side data, drop down to TanStack Table directly; the Table primitives compose with any of it.
Accessibility
- Sort toggles are real buttons inside
thcells. - Pagination controls disable at the bounds rather than disappearing, keeping the tab order stable.