DataTable
Feature-rich table with sorting, filtering, pagination, and row selection built in.
Examples
Basic
Simple data table with header and row striping.
Sortable columns
Click column headers to sort ascending or descending.
With search
Live search filters rows as the user types.
With status badges
Status column renders semantic Badge variants.
With pagination
Paginated table showing 4 rows per page.
With actions
Row-level action buttons for edit and delete.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { DataTable } from "@rokle/components";import { DataTable } from "@rokle/components";
export function Example() {
return <DataTable />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | ColumnDef[] | - | Column definitions including key, header, and cell renderer. |
| data | Record<string, unknown>[] | - | Row data array. |
| pageSize | number | 10 | Rows per page. |