Table
Semantic table primitives for tabular data.
- Data
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add tableNo npm packages are needed beyond what Dowel already requires.
import { Table } from "@/components/ui/table";Default
Minimal
Overflowing
<Table>
| Prop | Type | Default |
|---|---|---|
containerPropsProps for the scrolling wrapper around the table. | ComponentPropsWithRef<"div"> & DataAttributes | — |
Plus every attribute of <table>.
<TableHeader>
Plus every attribute of <thead>.
<TableBody>
Plus every attribute of <tbody>.
<TableFooter>
Plus every attribute of <tfoot>.
<TableRow>
Plus every attribute of <tr>.
<TableHead>
Plus every attribute of <th>.
<TableCell>
Plus every attribute of <td>.
<TableCaption>
Plus every attribute of <caption>.
A native table, so row and column position, header association and dimensions are all announced without ARIA. Give it a name with TableCaption or aria-label. The scrolling wrapper is focusable so an overflowing table can be scrolled by keyboard — without that, columns past the edge are unreachable. Use scope="row" on th elements inside tbody.
9/9
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes