grid keys
Source file: client/lib/theme/vueda-tailwind/grid/index.js
Table primitives
| Component | Kind | Slots | Description |
|---|---|---|---|
| Table | key | 2 | The scroll container around the native table. It owns the card surface, horizontal overflow, and sticky-table height cap used when Table receives sticky. |
| TableBody | key | 1 | The <tbody> section wrapper. It removes the last row's divider from that row's cells so the enclosing Table.container edge remains the closing edge instead of doubling the table bottom. |
| TableCaption | key | 1 | The native caption below a table. Use it for low-emphasis supporting copy tied to the table, with spacing that keeps it visually outside the bordered data surface. |
| TableCell | key | 1 | The body cell slot for <td> elements. It applies the density tiers from Table.table, keeps checkbox columns compact, and honors data-numeric or data-mono directly on the cell. |
| TableEmpty | key | 2 | The spanning empty-state cell. It keeps the row aligned with regular TableCell.root cells while allowing colspan and consumer classes to define the empty row's table footprint. |
| TableFooter | key | 1 | The <tfoot> section wrapper for summary and total rows. Its muted fill and top divider separate aggregates from body rows while leaving row cells free to handle numeric alignment. The divider sits on the first footer row's cells, and the last footer row drops its own divider, because the separated border model does not paint borders on <tfoot> or <tr>. |
| TableHead | key | 1 | The header cell slot for <th> elements. It owns compact header typography, density heights, sticky positioning, checkbox offsets, and numeric sort-icon ordering; see Table.table. |
| TableHeader | key | 1 | The <thead> section wrapper. Empty by default: header cells take their bottom divider from TableRow.root, and because that border belongs to the cell, a sticky TableHead.root carries it over scrolling body content. |
| TableRow | key | 1 | The row slot shared by header, body, and footer sections. It provides hover feedback, selected-row tinting, the leading selected rail, and the standard divider. The divider sits on the row's cells rather than the <tr>: Table.table uses the separated border model, which does not paint borders on rows. |
| TableRowActions | key | 2 | The inline wrapper for row actions. It stays invisible until the row is hovered, focused within, or selected, keeping scan-heavy tables clear until actions are relevant. |