| Actions | ||||||
|---|---|---|---|---|---|---|
A Amara Okafor[email protected] | Scale | Active | $4,820 | Jan 4, 2026 | ||
D Diego Santos[email protected] | Starter | Trial | $0 | Feb 18, 2026 | ||
P Priya Nair[email protected] | Growth | Active | $2,140 | Nov 22, 2025 | ||
T Tom Fischer[email protected] | Starter | Churned | $380 | Aug 9, 2025 | ||
L Lena Björk[email protected] | Scale | Active | $6,390 | Mar 2, 2026 | ||
M Marcus Reed[email protected] | Starter | Trial | $0 | Feb 27, 2026 |
8 row(s)
Client-side data-table engine: column-driven config with custom cell renderers, sortable headers, keyword search, row selection, per-row action menus, and pagination. Owns all state; blocks pass columns + rows as data.
The import and the props worth knowing about, in one place.
import { DataTable, type DataTableColumn } from "@/components/beste/component/data-table";
import { Eye, Trash2 } from "lucide-react";
type Row = { id: string; name: string; spend: number };
const columns: DataTableColumn<Row>[] = [
{ id: "name", header: "Name", sortable: true, value: (r) => r.name },
{ id: "spend", header: "Spend", sortable: true, align: "right", value: (r) => r.spend },
];
<DataTable
columns={columns}
data={rows}
searchable
selectable
pageSize={8}
rowActions={[
{ id: "view", label: "View", icon: Eye },
{ id: "delete", label: "Delete", icon: Trash2, destructive: true },
]}
onRowAction={(action, row) => console.log(action, row.id)}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
columns* | DataTableColumn<Row>[] | — | |
data* | Row[] | — | |
searchable | boolean | — | |
searchPlaceholder | string | — | |
selectable | boolean | — | |
rowActions | DataTableAction[] | — | |
onRowAction | (actionId: string, row: Row) => void | — | |
onSelectionChange | (ids: Array<string | number>) => void | — | |
pageSize | number | — | |
toolbar | ReactNode | — | Extra content rendered on the right of the toolbar (buttons, filters) |
emptyMessage | string | — | |
bordered | boolean | — | Wrap the table in a bordered card surface (default true) |
className | string | — |