Table
Semantic data tables with responsive overflow, density, and optional row striping.
Contract
| Axis | Values | Default |
|---|---|---|
density | compact, comfortable, spacious | comfortable |
striped | true, false | false |
| parts | Root, Caption, Header, Body, Footer, Row, Head, Cell | compound API |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/table.css';Scroll inside the code area to read long lines.
Imports
import { TRTable } from '@tinyrack/ui/components/table';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Densities permalink
The same content is shown at every supported density.
Wide-table overflow permalink
Give the horizontal overflow container a visible hint, an accessible name, and a keyboard focus stop when readers need to pan it.
Empty state permalink
Keep empty feedback inside Body as a Row and Cell, and span the visible columns with colSpan.
API
TRTable.Root wraps the native table in an overflow container. Use containerProps to give that region an accessible name and tabIndex={0} when keyboard users need to pan a wide table; containerRef targets the same wrapper while the normal ref still targets <table>.
| Part | Native element and props |
|---|---|
TRTable.Root | <table> props plus density, striped, containerClassName, containerProps, and containerRef; ref targets the table. |
TRTable.Caption | Native <caption> props; ref targets the caption. Use it for the table's accessible title or description. |
TRTable.Header | Native <thead> props; ref targets the header group. |
TRTable.Body | Native <tbody> props; ref targets the body group. |
TRTable.Footer | Native <tfoot> props; ref targets the footer group. |
TRTable.Row | Native <tr> props; ref targets the row. |
TRTable.Head | Native <th> props; ref targets the header cell. Set scope="col" for column headers and scope="row" for row headers. |
TRTable.Cell | Native <td> props; ref targets the data cell. Supports native attributes such as colSpan, rowSpan, and headers. |