Table

A controlled, column/data-driven data table. Table owns sort, selection, and search-filtering state; TableHeader, TableBody, and TableFooter render from that shared state, so no manual <thead>/<tbody> markup or data-* wiring is needed.

Usage


import { Table, TableHeader, TableBody, TableFooter } from '@mav-labs-inc/mavkit-react'
import type { TableColumn } from '@mav-labs-inc/mavkit-react'
 
const columns: TableColumn<Order>[] = [
  { key: 'id', header: 'Order' },
  { key: 'total', header: 'Total', kind: 'numeric', cell: row => `$${row.total.toFixed(2)}` },
]
 
<Table columns={columns} data={orders} getRowId={o => o.id} onSelectionChange={setSelected}>
  <TableHeader />
  <TableBody />
  <TableFooter />
</Table>

Example

Click a column header to sort; check a row (or the header checkbox) to select.


ORD-1042	Jamie Doe	paid	$128.50
ORD-1041	Alex Kim	pending	$42.00
ORD-1040	Sam Patel	refunded	$76.25
ORD-1039	Taylor Reed	paid	$210.00

Props

Table

Prop	Type	Default	Description
columns*	TableColumn<T>[]	—
data*	T[]	—
getRowId*	(row: T, index: number) => string	—	Stable unique id for a row — required for selection and React keys.
caption	string	—
ariaLabel	string	—
elevated	boolean	—	Adds a soft box shadow to lift the table above the page.
striped	boolean	—
compact	boolean	—
bordered	boolean	—
cardMobile	boolean	—	Collapses to a stacked-card layout at ≤639px.
selectable	boolean	true	Enables the checkbox column and selection state.
rowClickToSelect	boolean	false	Clicking anywhere on a row (outside interactive elements) toggles its selection.
selected	string[]	—	Controlled selected row ids — pair with onSelectionChange.
defaultSelected	string[]	[]
onSelectionChange	(ids: string[]) => void	—
sortable	boolean	true	Enables column sort buttons.
sort	TableSort \| null	—	Controlled sort — { col: string; dir: 'asc' \| 'desc' \| 'none' }. Pair with onSortChange.
defaultSort	TableSort \| null	null
onSortChange	(sort: TableSort \| null) => void	—
searchQuery	string	—	Filters rows whose searchable text doesn't include this query (case-insensitive).
isRowDisabled	(row: T) => boolean	—
emptyState	ReactNode	—	Shown in the body when there are no rows to display (after search filtering).
className	string	—
children	ReactNode	—	TableHeader / TableBody render inside <table>; TableFooter renders after it.

TableColumn

Prop	Type	Default	Description
key*	string	—	Unique key for this column. Used for sorting, searching, and as the React key.
header*	ReactNode	—
headerLabel	string	—	Accessible name for the sort button when header isn't plain text.
cell	(row: T, rowIndex: number) => ReactNode	—	Defaults to String(row[key]) via accessor.
accessor	(row: T) => string \| number	—	Value used for sorting/searching. Defaults to row[key].
sortable	boolean	—	Overrides the table-level sortable for this column.
kind	'numeric' \| 'actions'	—	Right-aligns + tabular numerals, or styles as a trailing actions column.
width	string	—
className	string	—

TableFooter

With no children, shows a row-count / selection summary; pass children (e.g. a Paginator variant="table") to take over the content.

Prop	Type	Default	Description
className	string	—
children	ReactNode	—

`useTable<T>()`

Access the enclosing Table’s shared state — for building custom header/body/footer content. Throws if called outside a Table.