Data Display
Table
A table of data in rows and columns. It carries proper header rows and a caption so screen readers can follow it.
ReactVueWeb Components
View in Storybook Playground
Examples
<Table striped hover caption="Users">
<thead><tr><th scope="col">Name</th></tr></thead>
<tbody><tr><td>Ada</td></tr></tbody>
</Table>Props
| Name | Type | Default | Description |
|---|---|---|---|
striped | boolean | false | Zebra-striped rows. @default false |
hover | boolean | false | Highlight rows on hover. @default false |
bordered | boolean | false | Bordered cells. @default false |
size | 'sm' | 'md' | false | Compact padding. @default false |
responsive | boolean | — | Wrap in a horizontally scrollable container for narrow viewports. |
caption | ReactNode | — | Accessible caption describing the table contents. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.