---
title: "Table"
description: "The system's native table. It supplies the semantics —caption, thead, th with scope and cells— and leaves density, borders and horizontal scroll to the tokens. It does not sort or paginate: that is DataTable's job."
kind: component
id: C-037
registry: "table"
docs: "https://koten.codehive.com.co/components/table"
markdown: "https://koten.codehive.com.co/md/components/table.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/table.json"
language: en
---

# Table · 表

> Component C-037 in the Koten UI catalog.

The system's native table. It supplies the semantics —caption, thead, th with scope and cells— and leaves density, borders and horizontal scroll to the tokens. It does not sort or paginate: that is DataTable's job.

> 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/table.json

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

## Files

- `@/components/ui/table.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Semantics and density

caption, thead, th with scope and rows at --koten-row-h.

```tsx
<Table>
  <caption>Resumen de pedidos</caption>
  <TableHeader>
    <TableRow>
      <TableHead>Pedido</TableHead>
      <TableHead>Cliente</TableHead>
      <TableHead className="text-end">Total</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {orders.map((order) => (
      <TableRow key={order.id}>
        <TableCell className="font-mono text-2xs">{order.id}</TableCell>
        <TableCell>{order.customer}</TableCell>
        <TableCell className="text-end tabular-nums">
          {formatCurrency(order.total)}
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>
```

### Totals and alignment

Numbers are right-aligned with tabular-nums; tfoot closes the table.

```tsx
<Table>
  <caption>Resumen de pedidos</caption>
  <TableHeader>
    <TableRow>
      <TableHead>Pedido</TableHead>
      <TableHead>Cliente</TableHead>
      <TableHead className="text-end">Total</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {orders.map((order) => (
      <TableRow key={order.id}>
        <TableCell className="font-mono text-2xs">{order.id}</TableCell>
        <TableCell>{order.customer}</TableCell>
        <TableCell className="text-end tabular-nums">
          {formatCurrency(order.total)}
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
  <tfoot>
    <tr className="border-t border-rule-strong">
      <th
        scope="row"
        colSpan={2}
        className="px-[var(--koten-control-px)] py-1 text-start text-2xs font-semibold"
      >
        Total del día
      </th>
      <td className="px-[var(--koten-control-px)] py-1 text-end text-xs font-semibold tabular-nums">
        {formatCurrency(total)}
      </td>
    </tr>
  </tfoot>
</Table>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `containerClassName` | `string` | `—` | Classes for the horizontal scroll container; border and overflow-x-auto are kept. |
| `containerProps` | `ComponentProps<"div">` | `—` | Container props: vertical scroll, onScroll and labels. The container already gets tabIndex 0. |
| `className` | `string` | `—` | Table classes; min-w-[32rem] guarantees horizontal scroll on narrow screens. |
| `TableHead scope` | `"col" \| "row" \| "colgroup" \| "rowgroup"` | `"col"` | TableHead sets scope="col"; for row headers use th with scope="row". |

## Accessibility

- The scroll container gets tabIndex=0 so it can be traversed with the keyboard.
- TableHead sets scope="col"; the first cell of a row can be a th with scope="row".
- The caption describes the table; TableCaption hides it visually without removing it from the accessibility tree.

## Sources

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