Data Table
hotTyped data table — click-to-sort headers (aria-sort), row selection with page-level select-all, paging, sticky header, empty state.
2 files · 235 locdeps: clsx, tailwind-merge
| Trend | |||||
|---|---|---|---|---|---|
AL Ada Lovelace | Owner | Active | $120 | ||
GH Grace Hopper | Admin | Suspended | $839 | ||
AT Alan Turing | Member | Invited | $658 | ||
KJ Katherine Johnson | Viewer | Active | $477 | ||
LT Linus Torvalds | Owner | Active | $296 | ||
MH Margaret Hamilton | Admin | Suspended | $1,015 |
1–6 of 12
1 / 2
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/table.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs tableUsage
import { DataTable, type Column } from "@/components/opus/ui/table";
const columns: Column<User>[] = [
{ key: "name", header: "Name", sortValue: (u) => u.name },
{ key: "mrr", header: "MRR", align: "right", sortValue: (u) => u.mrr },
];
<DataTable columns={columns} rows={users} rowKey={(u) => u.id} selectable pageSize={10} />API
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | Column<T>[] | — | { key, header, cell?, sortValue?, align?, width? } |
| rows / rowKey | T[] / (row) => string | — | Data. |
| selectable / selected / onSelectedChange | boolean / string[] | — | Row selection. |
| pageSize | number | 0 | Client paging (0 = off). |
| striped / dense / maxHeight / onRowClick / empty | — | — | Presentation & behaviour. |