Table
ExperimentalPresent comparable records using native table semantics.
Example
| Name | Role | Status |
|---|---|---|
| Taylor | Designer | Active |
| Jordan | Engineer | Selected |
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from 'panel-ui-kit/table'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Table scrollLabel="Team members"> <TableCaption>Team members</TableCaption> <TableHeader><TableRow><TableHead scope="col">Name</TableHead><TableHead scope="col">Role</TableHead></TableRow></TableHeader> <TableBody><TableRow><TableCell>Taylor</TableCell><TableCell>Designer</TableCell></TableRow></TableBody> </Table> </PanelUiTheme> );}When to use
Use captions and scoped headers. Sorting, filtering and row selection remain application-owned. This is not a data grid.
Keyboard
The named scroll region can receive focus for horizontal scrolling; controls inside keep native behavior.
Properties
| Property | Values | Default |
|---|---|---|
scrollLabel | Localized region name | — |
children | Semantic table parts | — |
motion | full · reduced · off · object | Inherited |