Table
Data Display

Table

Styled native table primitives (Th, Td, Tr, TableFooter, TableContainer) that read CSS modules for token-driven spacing and typography.

Component behavior

Table styles application-provided Tr, Th, and Td elements. It does not infer columns or rows. Use it for spanning cells, grouped headers, or other custom table markup.

Use cases
  • Tables with spanning cells, nested headers, or mixed content.
  • Small static tables with application-defined markup.
  • Custom cell markup.
Alternatives

DataGrid: column definitions should manage rendering, sorting, and selection.

TreeTable: rows nest into a hierarchy.

DescriptionList: the view displays one record’s fields.

VirtualList: large row counts require virtualization.

Th

Th extends ThHTMLAttributes<HTMLTableCellElement>.

ThProps props
PropTypeDefaultDescription
numboolean—Right-aligns and uses monospace numerals.
sortableboolean—Turns the header into the column's sort control: a full-cell button with a direction glyph and the matching aria-sort.
sortDirection"asc" | "desc" | null—The direction this column is sorted in; null when it is not the sorted column.
onSortChange(direction: SortDirection | null) => void—Called with the next direction: initial direction, reverse, then null for unsorted.
defaultSortDirection"asc" | "desc"num ? "desc" : "asc"Where an unsorted column starts.

Td

Td extends TdHTMLAttributes<HTMLTableCellElement>.

TdProps props
PropTypeDefaultDescription
numboolean—Right-aligns and uses monospace numerals.
nameboolean—Bold name-styled cell for row identifiers.
monoboolean—Monospace font for codes, hashes, IDs.

Tr

Tr extends HTMLAttributes<HTMLTableRowElement>.

TrProps props
PropTypeDefaultDescription
hoverboolean—Shows a hover highlight on mouse-over.
attnboolean—Applies a background tint to highlight the row.
selboolean—Selected state with highlight.
dimmedboolean—Low-contrast muted row.

TableFooter

TableFooter extends HTMLAttributes<HTMLDivElement>. Renders a footer bar below the table.

TableFooterProps props
PropTypeDefaultDescription
rightReactNode—Slot pinned to the right side of the footer.

TableContainer

TableContainer extends HTMLAttributes<HTMLDivElement>. Wraps a table in a scrollable container for overflow handling.

TableContainerProps has no custom props.

Table

Table extends HTMLAttributes<HTMLTableElement>. The core <table> element with Onset styling.

TableProps — no custom props beyond HTMLTableElement props
PropTypeDefaultDescription

Examples

Basic table with all variants

Table with name, num, mono columns and hover rows

Sortable columns

sortable renders a full-width button in the header cell. The application stores the sorted column and direction. Clicks cycle through the starting direction, reverse direction, and null for unsorted. Ignore null when an unsorted state is not supported.

Table with sortable Th columns

With footer

Table with TableFooter

Row states

Tr variants: selected, attention, dimmed
ImportTSX
import {
  Table,
  TableContainer,
  Th,
  Td,
  Tr,
  TableFooter,
} from "@solarius/onset";
import type {
  ThProps,
  TdProps,
  TrProps,
  TableFooterProps,
} from "@solarius/onset";