Skip to content
Components

Table

Semantic <table> primitive, wrapped in a horizontally scrollable container so wide tables overflow rather than break layout. Compose with the exported TableHeader, TableBody, TableRow, TableHead, TableCell, TableFooter, and TableCaption parts.

MaterialSubstrateFinishPrice
Carrara MarbleStoneHoned$18.50
White Oak PlankWoodMatte$9.20
Brass SheetMetalBrushed$31.75
Linen WeaveTextileWoven$6.40

Usage

import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@instruments/materia-ui/components/table";

Best practices

  • Use Table for a small, static, hand-authored table; reach for DataGrid once you need sorting, filtering, pagination, column pinning/visibility, or row virtualisation - Table has no data model.

  • Include a TableCaption describing the table's contents - it is the accessible name screen readers announce for the <table>.

  • Compose real TableHeader/TableBody/TableRow/TableHead/TableCell parts (semantic thead/tbody/th/td); don't fake rows with styled divs or you lose the table semantics.

Props

Also exports

  • componentTable
  • componentTableBody
  • componentTableCaption
  • componentTableCell
  • componentTableFooter
  • componentTableHead
  • componentTableHeader
  • componentTableRow