Table

Semantic structure for rows and columns. Your application owns the data behavior.

Interactive preview

Live specimenTry the component

Sample projects
Project	Status	Owner
Atlas	Active	Alex Kim
Meridian	In review	Sam Rivera
Forma	Active	Jordan Lee

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add table

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Table>
  <TableCaption>Sample projects</TableCaption>
  <TableHeader>
    <TableRow><TableHead>Project</TableHead></TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>Atlas</TableCell></TableRow>
  </TableBody>
</Table>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`Table`	`Native table attributes + ref`	`—`
`TableHead`	`Native th attributes + ref`	`scope="col"`
`TableCell`	`Native td attributes + ref`	`—`
`Parts`	`Header, Body, Row, Head, Cell, Caption`	`—`

Accessibility

Use a caption and column or row headers. Put a native button in sortable headers and set aria-sort on the th. Wrap wide tables in a scrollable region.