Component
DataTable
Robust data table with sorting, selection, pagination, and custom rendering.
Basic Usage
| ID | User Name | Role | |
|---|---|---|---|
| 1 | Alice | Admin | |
| 2 | Bob | Editor | |
| 3 | Charlie | Viewer | |
| 4 | Diana | Editor |
Sortable, selectable, and striped table
tsx
const columns = [
{ key: "name", label: "Name", sortable: true },
{ key: "role", label: "Role" },
];
<DataTable
columns={columns}
data={data}
selectable
striped
/>
Pagination
| ID | User Name | Role |
|---|---|---|
| 1 | Alice | Admin |
| 2 | Bob | Editor |
Page 1 of 2 · 4 rows
Client-side pagination
tsx
<DataTable columns={columns} data={data} pageSize={2} />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns * | DataTableColumn[] | — | Column definitions (key, label, sortable, render, width). |
| data * | T[] | — | Array of data rows. |
| rowKey | string | 'id' | Property name for unique row keys. |
| selectable | boolean | false | Enables row selection via checkboxes. |
| striped | boolean | false | Adds alternating striped background to rows. |
| pageSize | number | — | Enables client-side pagination with the given page size. |