Adv UI

Table

Rows and columns of data, with sortable headers, stripes and sideways scrolling.
Stable
Web
iOS
Android
@advui/data
Source
Invoice
Status
Amount
INV-001
Paid
$250.00
INV-002
Pending
$150.00
INV-003
Unpaid
$350.00
Recent invoices
JSX
<Table caption="Recent invoices">
  <Table.Header>
    <Table.Row>
      <Table.Head>Invoice</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head align="end">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>INV-001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell align="end">$250.00</Table.Cell>
    </Table.Row>
    …
  </Table.Body>
</Table>
PropsOpen in Playground
variant
size

Installation

pnpm
pnpm add @advui/data
npm
npm install @advui/data

Usage

import { Table } from '@advui/data'

<Table caption="Recent invoices">
  <Table.Header>
    <Table.Row>
      <Table.Head>Invoice</Table.Head>
      <Table.Head align="end">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>INV-001</Table.Cell>
      <Table.Cell align="end">$250.00</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Examples

Basic

A wider partner column and a totals footer.
Invoice
Partner
Status
Amount
INV-001
Shwe Health
Paid
$250.00
INV-002
Green Valley NGO
Pending
$150.00
INV-003
River Delta Relief
Unpaid
$350.00
INV-004
Hill Schools
Paid
$450.00
Total
$1,200.00
Recent invoices

Sortable columns

Your code sorts the rows; the header shows and announces the direction.
Region
Hlaing Tharyar
Yangon
687,867
Mawlamyine
Mon
289,388
Pyigyitagon
Mandalay
237,618
Sittwe
Rakhine
147,899

Striped, scrolling sideways

Sector
Partners
Townships
Villages
Reached
Target
Health
42
118
2,304
410,220
520,000
Education
35
96
1,877
188,905
250,000
WASH
28
84
1,512
302,448
300,000
Protection
31
77
980
96,130
140,000
Coverage by sector. Scroll sideways on small screens.

API reference

Table

PropTypeDefaultDescription
captionReactNode—Names the table (`aria-labelledby`); shown under it. Or pass `aria-label`.
variant'plain' | 'outline''plain'`outline` puts the table on a bordered card surface.
size'sm' | 'md''md'Cell padding: compact or comfortable.
stripedbooleanfalseShades every other body row.
minWidthnumber—Below this width the table scrolls sideways instead of squeezing columns.

Table.Header

The row group of column headers.

Table.Body

The row group of data rows, divided (and striped with `striped`).

Table.Footer

A shaded row group, for totals.

Table.Row

PropTypeDefaultDescription
selectedbooleanfalseHighlights the row.

Table.Head

PropTypeDefaultDescription
align'start' | 'center' | 'end''start'Match the column’s cells.
sortDirection'ascending' | 'descending' | 'none'—Makes the header a sort button and sets `aria-sort`.
onSort() => void—Called when the header is pressed.

Table.Cell

Plain text is wrapped in body text. Set `width` or `flex` on the cells and header of a column to size it.
PropTypeDefaultDescription
align'start' | 'center' | 'end''start'Use `end` for numbers.

Accessibility

  • Uses the ARIA table roles (table, rowgroup, row, columnheader, cell), so screen readers can move by row and column and read each cell with its header.
  • Name every table with caption or aria-label.
  • A sortable header holds a button and sets aria-sort; the icon is hidden. On native, where there is no aria-sort, the button’s name says how the column is sorted.
  • With minWidth, the scrolling area can take focus on web, so the arrow keys scroll it.
Keyboard interactions
KeyAction
TabMoves to the sort buttons and any controls in cells.
Enter / SpaceSorts by the focused header.
Arrow keysScroll a focused table that is wider than the screen.

Responsive behavior

Columns share the width equally unless cells set width or flex. Set minWidth so a wide table scrolls sideways on phones.

Platform notes

Web
Built from flex rows with ARIA table roles rather than <table>, so the layout is the same on every platform.
iOS
VoiceOver reads cells in row order.
Android
Same as iOS.

Related components

Pagination
List
Card
Since v0.6.0Last updated Nov 2, 2026Edit this page on GitHub
PreviousStat
NextTimeline