Table
Semantic table building blocks for structured row-and-column data.
Add it to your project
Eject the complete table group, then import from its generated local barrel. The copied source and CSS belong to your application.
pnpm exec toucan eject tablenpx toucan eject tableimport { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/toucan/table';Use when
Data relationships depend on aligned headers, rows, and columns.
Avoid when
The layout is presentational rather than tabular.
Example
| Name | Role | Status |
|---|---|---|
| Alice Johnson | Engineer | Active |
| Bob Smith | Designer | Away |
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Table
Props type: TableProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
dense | boolean | undefined | No | Compact cell padding. |
striped | boolean | undefined | No | Alternate row shading. |
Also accepts the native table attributes that are not replaced by a Toucan prop.
TableBody
Props type: TableBodyProps
No Toucan-specific props.
Also accepts the native table section attributes that are not replaced by a Toucan prop.
TableCaption
Props type: TableCaptionProps
No Toucan-specific props.
Also accepts the native table caption attributes that are not replaced by a Toucan prop.
TableCell
Props type: TableCellProps
No Toucan-specific props.
Also accepts the native table cell attributes that are not replaced by a Toucan prop.
TableHead
Props type: TableHeadProps
No Toucan-specific props.
Also accepts the native table section attributes that are not replaced by a Toucan prop.
TableHeader
Props type: TableHeaderProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
sortDirection | "none" | "ascending" | "descending" | undefined | No | Sort direction. Omit for non-sortable columns. |
Also accepts the native table cell attributes that are not replaced by a Toucan prop.
TableRow
Props type: TableRowProps
No Toucan-specific props.
Also accepts the native table row attributes that are not replaced by a Toucan prop.
Type exports
TableBodyProps, TableCaptionProps, TableCellProps, TableHeaderProps, TableHeadProps, TableProps, TableRowProps
Accessibility
- Uses native table elements.
- Provide a caption and column or row headers where they aid understanding.
- Sortable headers expose aria-sort.
Token families
table