Table

data

Data table with typed column definitions, row hover, optional striped rows, caption, and responsive horizontal scroll. Uses semantic HTML with role=table, scope=col headers.

Import

typescript
import { Table } from "packages/ui/src";

Props

TableProps

PropTypeRequired
columnsTableColumn[]Yes
dataRecord<string, ReactNode>[]Yes
captionstringNo
stripedbooleanNo
classNamestringNo

Examples

Default Table

ComponentFamilyTokensTests
ButtonAction98
CardLayout48
ModalOverlays148
InputForms178
TableData148

Striped Rows

ComponentFamilyTokensTests
ButtonAction98
CardLayout48
ModalOverlays148
InputForms178
TableData148

With Caption

Component inventory — 35 shared components across 5 families.
ComponentFamilyTokensTests
ButtonAction98
CardLayout48
ModalOverlays148
InputForms178
TableData148

Metadata

Component Metadata
Familydata
FrameworksNext.js, Astro/EmDash
DescriptionData table with typed column definitions, row hover, optional striped rows, caption, and responsive horizontal scroll. Uses semantic HTML with role=table, scope=col headers.
PropsTableProps (columns: TableColumn[], data: Record<string, ReactNode>[], caption?: string, striped?: boolean, className?: string)
Statesdefault, striped, with-caption, row-hover
A11y
  • role=table on table element
  • scope=col on header cells
  • Caption element for table description
  • Semantic thead/tbody structure
Responsive
  • Horizontal scroll on overflow
  • Border radius on container
Motion
  • Row hover background transition
Token Dependencies
  • components.table.background
  • components.table.borderColor
  • components.table.borderRadius
  • components.table.headerBackground
  • components.table.headerColor
  • components.table.headerFontSize
  • components.table.headerFontWeight
  • components.table.cellPadding
  • components.table.cellColor
  • components.table.cellFontSize
  • components.table.rowHoverBackground
  • components.table.stripeBackground
  • components.table.captionColor
  • components.table.captionFontSize
Content Slotscolumns (TableColumn[]), data (Record[]), caption (string)
CMS Bindings
  • Column definitions from CMS schema
  • Row data from CMS collections
Test Cases
  • Renders table element
  • Renders column headers
  • Renders row data
  • Shows caption when provided
  • Applies striped class to odd rows
  • Header cells have scope=col
  • Renders correct number of rows
  • Passes className through