Data Table
@/components/kamod-ui/data-table
| Status | Amount | Actions | ||
|---|---|---|---|---|
| success | ken99@example.com | $316.00 | ||
| success | Abe45@example.com | $242.00 |
0 of 5 row(s) selected.
Installation
Use `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, and `TableCell` from `@/components/kamod-ui/data-table`. Optional: `DataTable` wraps the table in `overflow-hidden rounded-md border`. The official shadcn guide uses `@tanstack/react-table` (React); this Preact demo implements the same UX with local state — you can adopt TanStack in a React app following https://ui.shadcn.com/docs/components/radix/data-table
pnpm add @kamod-ch/uiUsage
`PaymentsDataTableDemo` (below) matches the documented flow: column toolbar (email filter + column visibility), sortable email header, currency amount, row actions `Dropdown`, checkboxes with header indeterminate state, selected count, and prev/next pagination. Set `chrome={false}` on `DataTable` if you provide your own border.
import { DataTable } from "@/components/kamod-ui/data-table";<DataTable />Payments demo
End-to-end example aligned with the shadcn data-table guide (filter, columns menu, sorting, actions, selection, pagination). Source: `data-table-payments-demo.tsx`.
Basic table
Static headers and mapped rows — starting point before adding sorting and filters.
| Status | Amount | |
|---|---|---|
| success | ken99@example.com | $316.00 |
| success | Abe45@example.com | $242.00 |
| processing | Monserrat44@example.com | $837.00 |
| success | Silas22@example.com | $874.00 |
| failed | carmella@example.com | $721.00 |
Empty state
Single body row with `colSpan` when there are no records.
| Status | Amount | |
|---|---|---|
| No results. | ||
API Reference
Props, slots and variants for this component.
Data Table
Data Table component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| chrome | boolean | true |
| class | string | undefined |
| children | Table sections | required |
| data-slot | "data-table" | "data-table" |
Accessibility Notes
Use `<th scope="col">` via `TableHead` for headers, keep row actions reachable by keyboard (Dropdown trigger), and expose selection with `aria-label` on checkboxes. Announce filter/pagination changes when wiring live regions in product code.