Table

uistable

Table — extracted 1:1 from WEM-App.

npx shadcn add @krawma/table

registry: @krawma/utils

Preview

Name	Role
Ada	Admin
Grace	Editor

Depends on

utils

Purpose

Semantic, styled primitives for tabular data. This is presentation only — it does not provide sorting, pagination, or selection; compose those (e.g. TanStack Table for logic + pagination/checkbox for UI).

Anatomy

Table (wrapped in a scroll container) › TableHeader (TableRow › TableHead) › TableBody (TableRow › TableCell) › optional TableFooter, TableCaption.

Style

No variants — token-backed rows/borders. The Table wrapper scrolls horizontally (overflow-x-auto) so wide tables never break the page layout (responsive rule).

Behavior & functionality

Static markup. Wire interactivity yourself: a headless table lib for sort/filter/paginate, checkbox for row selection, dropdown-menu for row actions.

Accessibility

Renders real <table>/<thead>/<tbody>/<th>/<td> semantics. Use TableCaption for a table name and scope on TableHead for row/column headers.
Keep it a real table — don't rebuild tabular data from divs.

Do / Don't

✅ Use TableCaption + header cells for AT-navigable tables; let the wrapper scroll on narrow screens.
❌ Don't hard-code fixed column widths that overflow small screens.