DataTable
Enhanced table component with built-in sorting, pagination, and striped rows. Accepts generic row types and column definitions with optional custom renderers.
Basic Table
Preview
| Agent | Status | Uptime | Region |
|---|
| Alpha-7 | Active | 99.98% | US-East |
| Bravo-3 | Standby | 99.91% | EU-West |
| Charlie-9 | Active | 99.95% | AP-South |
| Delta-1 | Offline | 87.20% | US-West |
| Echo-5 | Active | 99.99% | EU-Central |
Custom Cell Rendering
Preview
| Agent | Status | Uptime | Region |
|---|
| Alpha-7 | Active | 99.98% | US-East |
| Bravo-3 | Standby | 99.91% | EU-West |
| Charlie-9 | Active | 99.95% | AP-South |
| Delta-1 | Offline | 87.20% | US-West |
| Echo-5 | Active | 99.99% | EU-Central |
DataTable Props
| Prop | Type | Default | Description |
|---|
| data* | T[] | - | Array of row objects to display in the table. |
| columns* | DataTableColumn<T>[] | - | Column definitions specifying how to render each column. |
| pageSize | number | 10 | Number of rows per page. |
| striped | boolean | true | Whether to apply alternating row background colors. |
DataTableColumn Shape
| Prop | Type | Default | Description |
|---|
| key* | string | - | Property key on the row object to read data from. |
| header* | string | - | Column header text. |
| sortable | boolean | false | Whether this column can be sorted by clicking the header. |
| render | (value: unknown, row: T) => ReactNode | - | Custom render function for cell content. |
| width | string | - | CSS width for the column (e.g. "200px"). |
Accessibility
- Renders a semantic
<table> with <thead> and <tbody>. - Sortable column headers are interactive and indicate sort direction with visible arrow indicators.
- Pagination controls use
<button> elements with disabled states. - Consider adding
aria-sort attributes to sortable headers for screen reader announcements.