Data Table

A table driven by data and columns, with sorting, search, row selection and pagination.

Stable

Web

iOS

Android

@advui/data

Source

Sort, search, select and page

Preview

Code

Status

River Delta Relief

Food Security

Labutta

15,900

Planned

Shwe Health

Health

Hlaing Tharyar

12,400

Ongoing

Green Valley

WASH

Pakokku

9,800

Planned

Green Valley

WASH

Sittwe

8,300

Ongoing

Shwe Health

Health

Mawlamyine

6,100

Completed

1–5 of 7

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/data

npm

npm install @advui/data

Usage

import { DataTable, type DataTableColumn } from '@advui/data'

const columns: DataTableColumn<Project>[] = [
  { id: 'organization', header: 'Organization', sortable: true },
  { id: 'beneficiaries', header: 'Reached', sortable: true, align: 'end' },
]

<DataTable aria-label="Projects" data={projects} columns={columns} pageSize={10} searchable selectable />

Examples

Loading and empty

Preview

Code

API reference

DataTable

Also takes the Table props: `variant`, `size`, `striped`, `minWidth`.

Prop	Type	Default	Description
`data` required	`T[]`	—	The rows.
`columns` required	`DataTableColumn<T>[]`	—	Column definitions (below).
`getRowId`	`(row, index) => string`	`row.id`, then the index	Stable id for selection and React keys.
`getRowLabel`	`(row) => string`	—	Names a row’s checkbox ("Select INV-001"). Default: its id.
`sort`	`{ column: string; direction: 'ascending' \| 'descending' } \| null`	—	Sorted column. Pressing a header cycles ascending, descending, none.
`defaultSort`	`{ column: string; direction: 'ascending' \| 'descending' } \| null`	—	Starting `sort` when uncontrolled.
`onSortChange`	`(sort: { column: string; direction: 'ascending' \| 'descending' } \| null) => void`	—	Called with the new `sort`.
`pageSize`	`number`	—	Rows per page. Without it every row is shown.
`page`	`number`	—	Current page, from 1. Sorting and searching go back to page 1.
`defaultPage`	`number`	—	Starting `page` when uncontrolled.
`onPageChange`	`(page: number) => void`	—	Called with the new `page`.
`selectable`	`boolean`	`false`	Adds a checkbox column and a "select all on this page" box.
`selectedIds`	`string[]`	—	Selected row ids.
`defaultSelectedIds`	`string[]`	—	Starting `selectedIds` when uncontrolled.
`onSelectedIdsChange`	`(selectedIds: string[]) => void`	—	Called with the new `selectedIds`.
`searchable`	`boolean`	`false`	Adds a search field over the searchable columns.
`search`	`string`	—	Search text (controlled or not).
`defaultSearch`	`string`	—	Starting `search` when uncontrolled.
`onSearchChange`	`(search: string) => void`	—	Called with the new `search`.
`filterRow`	`(row, search) => boolean`	—	Custom filter. Default: a column contains the text, ignoring case and accents.
`toolbar`	`ReactNode`	—	Controls next to the search field.
`empty`	`ReactNode`	—	Shown when no row matches.
`loading`	`boolean`	`false`	Placeholder rows and `aria-busy`.
`labels`	`Partial<DataTableLabels>`	—	Search, checkbox, empty and status text, for translation.

DataTableColumn<T>

Prop	Type	Default	Description
`id` required	`string`	—	Key; the row field read by default.
`header` required	`ReactNode`	—	Header text.
`accessor`	`(row: T) => string \| number \| boolean \| Date \| null \| undefined`	—	Value to sort, search and show. Default: `row[id]`.
`cell`	`(row) => ReactNode`	—	Custom cell content.
`sortable`	`boolean`	—	Header becomes a sort button.
`searchable`	`boolean`	`true`	Include in the search.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment of the header and cells, as on Table cells.
`flex`	`number`	`1`	Share of the width, like CSS `flex-grow`.
`width`	`number \| SizeTokens`	—	A fixed width instead of a share.

Accessibility

Built on Table: ARIA table roles, a name from aria-label or caption, and sort buttons with aria-sort.
Row checkboxes are named from getRowLabel ("Select Shwe Health, Mawlamyine"); the header box selects the page and is "mixed" when some are.
The search field is a named searchbox. The line under the table ("1 selected · 1–5 of 7") is a polite live region, so filtering and paging are announced.
While loading the wrapper has aria-busy and the placeholder rows are hidden.

Keyboard interactions
Key	Action
`Tab`	Search field, sort buttons, checkboxes, then the pager.
`Enter / Space`	Sort by the focused column.
`Space`	Check the focused row.

Responsive behavior

Set minWidth so the table scrolls sideways on phones; the search field and pager wrap.

Platform notes

Web

Sorting, searching and paging run in the browser on data. For server-side data, control sort, search and page and pass only the current page.

iOS

Same features; the sort button’s name says how the column is sorted.