Table

Semantic tabular anatomy for bounded datasets.

Primitive

Example

A representative composition rendered with the published package API.

Provider connections
Provider	Status	Resources
Amazon Bedrock	Connected	18
Vertex AI	Attention	7
OpenAI	Connected	12
Total resources		37

Options

The decisions most consumers need to make when adopting this family.

row state

default · selected · disabled

State remains available through data attributes without changing table semantics.

TableRow interactive

false (default) · true

Clickable rows show a pointer and an action-colored edge rail on hover and focus. DataTable sets it for rows that accept onRowClick.

scrollable

true (default) · false

Wide tables scroll horizontally and fade the edge that has more columns. Pass false only when you render a stacked layout at narrow widths.

headers

uppercase table-head style

Table and DataTable share one header style, including sortable headers. Column headers and TableFooter sit on the surface-table-header band above a border-default divider. Do not restyle header cells per page.

TableCaption visible

false (default) · true

A caption names the table for assistive technology and stays hidden by default. Set visible to show it as metadata text above the table; it never renders between the rows and pagination.

Option	Values or anatomy	Guidance
`row state`	default · selected · disabled	State remains available through data attributes without changing table semantics.
`TableRow interactive`	false (default) · true	Clickable rows show a pointer and an action-colored edge rail on hover and focus. DataTable sets it for rows that accept onRowClick.
`scrollable`	true (default) · false	Wide tables scroll horizontally and fade the edge that has more columns. Pass false only when you render a stacked layout at narrow widths.
`headers`	uppercase table-head style	Table and DataTable share one header style, including sortable headers. Column headers and TableFooter sit on the surface-table-header band above a border-default divider. Do not restyle header cells per page.
`TableCaption visible`	false (default) · true	A caption names the table for assistive technology and stays hidden by default. Set visible to show it as metadata text above the table; it never renders between the rows and pagination.

Usage

Copy the package import and adapt the composition to product-owned content and state.

import { Table, TableBody, TableCaption, TableCell, TableFooter } from "@conscia-labs/design-system";