Block · C-047 · storefront

SpecTable

Specification tables grouped by section, with row headers and a keyboard-accessible horizontal scroll region.

Install

Blocks compose Koten primitives; install koten-theme first.

npx shadcn@latest add https://koten.codehive.com.co/r/spec-table.json

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/components/patterns/spec-table.tsx
@/lib/koten/cn.ts
@/lib/koten/format.ts
@/lib/koten/intl.ts
@/lib/koten/labels.ts
@/lib/koten/provider.tsx

Accessibility

Each table has a hidden <caption> joining the overall caption and the group title.
Labels use <th scope="row">; values live in the associated cells.
The scroll container receives tabIndex so it can be scrolled by keyboard, and it shows a visible focus ring.
Nothing has a fixed height, so long JA/ES/EN text grows without being clipped.

Read the whole page