DataTable
An interactive table component with pagination and sorting.
DataTable is a powerful, interactive component for displaying tabular data. It automatically handles pagination, column sorting, and keyboard navigation (left/right arrows for pagination, 's' for sorting).
Usage
import { DataTable } from 'caret-tui';
const data = [
{ id: 1, name: 'Alice', status: 'Active' },
{ id: 2, name: 'Bob', status: 'Offline' }
];
const columns = [
{ header: 'ID', key: 'id', width: 5, sortable: true },
{ header: 'Name', key: 'name', width: 20, sortable: true },
{ header: 'Status', key: 'status', width: 10 }
];
const App = () => (
<DataTable columns={columns} data={data} pageSize={5} />
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | 'data-table' | The focus ID used by FocusProvider. |
columns | Column<T>[] | - | Configuration for each column. |
data | T[] | - | The array of objects to display. |
pageSize | number | 10 | The number of rows to display per page. |
Column Definition (Column<T>)
| Field | Type | Description |
|---|---|---|
header | string | The text to display in the column header. |
key | keyof T | The object key to extract the value from. |
width | number | The character width of the column. Defaults to 15. |
align | 'left' | 'right' | The text alignment. Defaults to left. |
sortable | boolean | Enables sorting by this column when pressing 's'. |
render | (value: any, item: T) => React.ReactNode | Optional custom render function for complex cell content. |