DataTable

Tabular data with sortable columns, custom cell renderers, and built-in pagination. Pure React — no headless library wrapped.

Name	Role	Status	Joined
Cris	Lead designer	active	2024-01-15
Anya	Frontend	active	2024-02-08
Mike	Backend	invited	2024-04-22
Sara	Product	active	2024-05-30

Page 1 of 2

Usage

import { DataTable, type DataTableColumn } from '@bwo-ui/react';

const columns: DataTableColumn<Row>[] = [
  { id: 'name', header: 'Name', accessor: (r) => r.name, sortable: true },
  { id: 'role', header: 'Role', accessor: (r) => r.role, sortable: true },
  { id: 'joined', header: 'Joined', accessor: (r) => r.joined, align: 'right' },
];

<DataTable data={rows} columns={columns} pageSize={10} hoverable />

Props

Prop	Type	Default	Description
`data`	`T[]`	—	Row data.
`columns`	`DataTableColumn<T>[]`	—	Column definitions.
`getRowId`	`(row, index) => string`	—	Stable row key. Default: index.
`sort`	`{ id, direction } \| null`	—	Controlled sort state.
`onSortChange`	`(sort) => void`	—	Sort change handler.
`pageSize`	`number`	—	When set, paginates rows.
`page`	`number`	—	Controlled current page (1-based).
`striped`	`boolean`	—	Alternating row backgrounds.
`hoverable`	`boolean`	—	Highlight rows on hover.
`onRowClick`	`(row, i) => void`	—	Optional click handler per row.