Table

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, Tr, Th, Td are also exported).

Import

import {
  Table, TableHeader, TableBody, TableFooter,
  TableRow, TableHead, TableCell, TableCaption,
} from "@yuhuanowo/yunui";

Basic

Data table

Model	Context	Status
Claude Opus 4.8	200K	Active
DeepSeek R1	64K	Beta
GPT-4o mini	128K	Limited

Summary row

Billing for the current period.
Item	Cost
Requests	$42.00
Storage	$8.40
Total	$50.40

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.

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.

Import

Basic

With footer & caption

Props — Table

On this page