nalarx-uiComponents
Table
A dense data table with hairline rows and a sunken header.
bunx shadcn@latest add @nalarx/tableUsage
Hierarchy is tonal: a sunken header, --line hairlines between rows and no card shadow. The table scrolls sideways inside its wrapper when the columns do not fit. Right-align numeric columns, header included, and give the numbers tabular figures.
<Table>
<TableHeader>
<TableRow>
<TableHead>Agent</TableHead>
<TableHead className="text-right">Runs</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Sales agent</TableCell>
<TableCell className="text-right tnum">1,284</TableCell>
</TableRow>
</TableBody>
</Table>Header, rows with a hover wash, a selected row (data-selected) and a right-aligned numeric column:
| Agent | Owner | Runs |
|---|---|---|
| Sales agent | Dewi | 1,284 |
| Invoice follow-up | Raka | 312 |
| Stock alert | Sari | 7 |
| Agent | Owner | Runs |
|---|---|---|
| Sales agent | Dewi | 1,284 |
| Invoice follow-up | Raka | 312 |
| Stock alert | Sari | 7 |
Parts
| Part | Element | |
|---|---|---|
Table | table in a div | 13px text-body, full width; the div scrolls sideways. className goes on the table. |
TableHeader | thead | --bg-sunken |
TableBody | tbody | |
TableRow | tr | Hairline below (none on the last row), hover wash; data-selected for a chosen row. |
TableHead | th | scope="col", 36px tall, text-meta in --ink-3, left-aligned. |
TableCell | td | 12px sides, 10px top and bottom. |
Every part takes its element's props.
Accessibility
Put a real button or link in a cell for row actions; a clickable tr is not reachable by keyboard. Add a <caption> (it can be sr-only) when nothing on the screen names the table.
Replaces
The Platform's base/Table.tsx. The web app has no table primitive.