sheengemologic ui
All components

TableFoot

Native tfoot semantics and token styling for bounded, non-virtualized tables.@gemologic/sheen · data-display

Playground

This example has no scalar controls. Its validated source remains interactive below.
Orders
SymbolQuantity
BTC1.25
<Table><TableCaption>Orders</TableCaption><TableHead><TableRow><TableHeaderCell>Symbol</TableHeaderCell><TableHeaderCell numeric>Quantity</TableHeaderCell></TableRow></TableHead><TableBody><TableRow><TableHeaderCell scope="row">BTC</TableHeaderCell><TableCell numeric>1.25</TableCell></TableRow></TableBody></Table>

Variant matrix

Small order table
Orders
SymbolQuantity
BTC1.25

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/Table.tsx
Tokens
  • --sheen-table-row-h
  • --sheen-color-fg
  • --sheen-color-fg-muted
  • --sheen-color-border
  • --sheen-color-bg-subtle

Accessibility

Role: native tfootKeyboard: Native controls within cells retain their tab order; static rows are not focus stops.

Do

  • Supply a caption or explicit accessible table name. Use header cells with scope=col or scope=row.
  • Keep native table nesting and explicit TableBody for deterministic server markup.

Do not

  • Do not use this primitive for unbounded datasets. DataTable owns virtualization, pagination, and grid interaction.
  • Do not make static rows keyboard focus stops or apply grid roles without implementing grid behavior.

Generated props

NameTypeDefaultDescription
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.