Data Table

Data Display

A sortable table for exploring tabular data, built on the Table primitives.

DataTable adds client-side sorting on top of the existing Table primitives. Click a column header to toggle between ascending and descending order.

npx shadcn@latest add data-table

Sorting

Each header toggles its own sort state; the active column gets a direction icon.

Preview

Live


Ada Lovelace	Active	Pro	128
Alan Turing	Active	Team	342
Grace Hopper	Invited	Starter	12
Linus Torvalds	Active	Team	201
Margaret Hamilton	Suspended	Starter	4

tsx

1<DataTable
2  data={members}
3  columns={[
4    { key: "name", header: "Name" },
5    { key: "status", header: "Status" },
6    { key: "plan", header: "Plan" },
7    { key: "users", header: "Users" },
8  ]}
9/>

Empty state

Pass an empty array to render a table with headers and no rows.

Preview

Live

tsx

1<DataTable
2  data={[]}
3  columns={[
4    { key: "name", header: "Name" },
5    { key: "status", header: "Status" },
6  ]}
7/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
data	Record<string, unknown>[]	The rows to render. Cell values are stringified with String().
columns	{ key: string; header: string }[]	Column definitions; key reads from the row, header is the label.
columns[].key	string	The property on each row that this column reads.
columns[].header	string	The label rendered in the column header.