Components / Data display
Table
Semantic presentational table primitives with density, striping, responsive overflow, and announced status rows.
Available in @kape/react
Interactive example
Use keyboard and pointer input to exercise the public behavior.
| Port | Platform | Status |
|---|---|---|
| VS Code | Editor | Available |
| Windows Terminal | Terminal | Available |
Installation and usage
Import the owned Kape primitives and the component stylesheet once.
Table imports
import { TableContainer, Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableStatus } from "@kape/react";
import "@kape/react/styles.css";Props
| Prop | Type | Purpose |
|---|---|---|
variant | default | striped | Row presentation |
density | comfortable | compact | Cell spacing |
TableStatus loading | boolean | Announced busy state |
Accessibility
Semantics, focus, naming, disabled states, and announcements are preserved by the Kape wrapper and covered by component tests. Supply meaningful visible labels and descriptions.
Keyboard
- Tab
- Focuses an overflowing table container.
- Arrow keys
- Scroll the focused container when it overflows.
- Screen reader navigation
- Moves through native rows and headers.
Composition and limitations
Table is presentational and does not provide data fetching, virtualization, selection, or sorting logic.