# TableHeader

> DataTable header cells with sort indicators.

- **Level**: molecule · **Status**: stable · **Role**: content
- **Import**: `import { TableHeader } from "@rrios-forge/ui/molecules/table-header";`
- **Source**: `packages/ui/src/molecules/table-header`

Header row for div-based tables / pseudo-tables. Sentence-case labels at text-xs. Sortable cells render as <button> with aria-sort; inactive chevrons stay visible. `trailing` mirrors TableRow.action and `align` mirrors the row cell align, so columns line up. Pair the same flex template with TableRow so cells line up. Patterns consulted: Patterns/Information Architecture · MetadataAndActions.

## Use it for

- Table → `DataTable`, or `TableHeader` + `TableRow` + `TablePagination`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `density` | — | `compact` `comfortable` | — | — |
| `align` | — | `start` `center` `end` | — | Distribution along the main axis. |

## Stories

- [Playground](/?path=/story/components-molecules-tableheader--playground) · frame: `/iframe.html?id=components-molecules-tableheader--playground&viewMode=story`
- [Sortable](/?path=/story/components-molecules-tableheader--sortable) · frame: `/iframe.html?id=components-molecules-tableheader--sortable&viewMode=story`
- [Densities](/?path=/story/components-molecules-tableheader--densities) · frame: `/iframe.html?id=components-molecules-tableheader--densities&viewMode=story`
- [In data surface](/?path=/story/components-molecules-tableheader--in-data-surface) · frame: `/iframe.html?id=components-molecules-tableheader--in-data-surface&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).