Table
Composable table primitives for data display with support for header variants/states and interactive cell states. Includes Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableFooter, and TableCaption.
Figma: DS-001 Foundations · Head 23177:2258 · Cell 190:901 · Playground 17089:45580
Import
Live Demo
Composable table primitives with header states and interactive rows.
| Status | Amount | |||
|---|---|---|---|---|
| Success | alma.lawson@example.com | $475.22 | ||
| Failed | dolores.chambers@example.com | $275.43 | ||
| Success | felicia.reid@example.com | $767.50 | ||
| Processing | georgia.young@example.com | $396.84 | ||
| Success | michael.mitc@example.com | $630.44 |
0 of 5 row(s) selected.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "button" | "default" | Visual variant for TableHead |
| state | "default" | "hover" | "active" | "default" | State for TableHead (TableCell supports default/hover) |
| isLastCell | boolean | false | Marks a TableCell as the last cell in a row |
Examples
Basic Table
Header States
Use TableHead state and variant props to match design states.
With Selection
Compose rows with checkbox selection and action cells.