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.

Material	Substrate	Finish	Price
Carrara Marble	Stone	Honed	$18.50
White Oak Plank	Wood	Matte	$9.20
Brass Sheet	Metal	Brushed	$31.75
Linen Weave	Textile	Woven	$6.40

Usage

import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@desk/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 virtualization — 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