Table
Semantic, presentational table family using design-system tokens.
A semantic, presentational table family built on design-system tokens. Table wraps a <table> in an overflow container so wide tables scroll instead of breaking layout. Compose it from TableHeader, TableBody, TableRow, TableHead and TableCell (short aliases Thead, Tbody, Tfoot, Tr, Th, Td are also exported).
Import
1import {2 Table, TableHeader, TableBody, TableFooter,3 TableRow, TableHead, TableCell, TableCaption,4} from "@yuhuanowo/yunui";Basic
Data table
| Model | Context | Status |
|---|---|---|
| Claude Opus 4.8 | 200K | Active |
| DeepSeek R1 | 64K | Beta |
| GPT-4o mini | 128K | Limited |
With footer & caption
Summary row
| Item | Cost |
|---|---|
| Requests | $42.00 |
| Storage | $8.40 |
| Total | $50.40 |
Sortable columns
Pass onSort to a TableHead to make it a sort control: the label becomes a button with an asc/desc/unsorted chevron, and the <th> gets aria-sort. sortDirection is that column's current state ("asc" / "desc", or false when it isn't the active column). Sorting itself stays with you — YunUI only renders the control and the a11y state. Use align="right" for numeric columns; it aligns both the cells and the sort control.
Sortable
| Model | ||
|---|---|---|
| Claude Opus 4.8 | 200 | $15 |
| GPT-4o mini | 128 | $1 |
| DeepSeek R1 | 64 | $2 |
Props — Table
| Prop | Type | Default | Description |
|---|---|---|---|
| containerClassName | string | — | Class applied to the outer scroll/overflow wrapper. |
| responsive | boolean | — | Stack each row into a labelled card below the `md` breakpoint, so dense many-column tables stay readable on narrow screens instead of forcing a horizontal scroll. Pair with `<TableCell label="…">` to label each value. |
| scrollLabel | string | — | Accessible name for the scroll region, used only when the table is actually overflowing and therefore focusable (e.g. "Transactions, scrollable"). The library ships no copy, so without it the region is focusable but unnamed. |
The sub-components forward the props of their underlying table elements (<thead>, <tbody>, <tr>, <th>, <td>) plus className:
| Prop | Type | Default | Description |
|---|---|---|---|
| TableHeader | HTMLAttributes<HTMLTableSectionElement> | — | Renders <thead>; column-header rows are divided by a subtle border. |
| TableBody | HTMLAttributes<HTMLTableSectionElement> | — | Renders <tbody>; rows are divided by subtle borders. |
| TableFooter | HTMLAttributes<HTMLTableSectionElement> | — | Renders <tfoot>; a muted summary-row band. |
| TableRow | HTMLAttributes<HTMLTableRowElement> | — | Renders <tr> with a divider and hover highlight. |
| TableHead | ThHTMLAttributes<HTMLTableCellElement> | — | Column header cell <th>: left-aligned, uppercase, muted, small. |
| TableCell | TdHTMLAttributes<HTMLTableCellElement> | — | Standard data cell <td>. |
| TableCaption | HTMLAttributes<HTMLTableCaptionElement> | — | Caption rendered below the table; muted helper text. |