---
title: "SpecTable"
description: "Specification tables grouped by section, with row headers and a keyboard-accessible horizontal scroll region."
kind: block
id: C-047
category: storefront
registry: "spec-table"
docs: "https://koten.codehive.com.co/blocks/storefront/spec-table"
markdown: "https://koten.codehive.com.co/md/blocks/storefront/spec-table.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/spec-table.json"
language: en
---

# SpecTable · 仕様表

> Block C-047 in the Koten UI catalog.

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

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

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

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/spec-table.json
```

## Files

- `@/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`

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Specification groups

Each group opens with its title and its own table; the visible caption sets context while the table gets a hidden one.

```tsx
<SpecTable
  caption="HIKARI K-1 specifications"
  groups={[
    {
      id: "camera",
      title: "Camera",
      rows: [
        { id: "sensor", label: "Sensor", value: "35 mm full-frame, 24.2 MP" },
        { id: "lens", label: "Lens", value: "35 mm f/2.8 prime" },
        { id: "iso", label: "ISO", value: "100–51,200" },
      ],
    },
    {
      id: "body",
      title: "Body",
      rows: [
        { id: "weight", label: "Weight", value: "380 g with battery" },
        { id: "battery", label: "Battery", value: "USB-C, about 420 shots" },
      ],
    },
  ]}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `groups` | `readonly SpecGroup[]` | `—` | Each group has id, title and rows with label and value. |
| `caption` | `string` | `—` | Combined with the group title into a hidden caption for the table. |

## 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.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/storefront/spec-table
- Markdown: https://koten.codehive.com.co/md/blocks/storefront/spec-table.md
- Repository: https://github.com/codehive-colombia/koten