# Table

A React component in [Beamline](https://beamline.io/)'s [Data & tables](https://beamline.io/components/data) category, in the free sample. Live demo: https://beamline.io/components/table

A plain, styled HTML table for small static data: header, body, footer, caption, numeric cells, three densities and a sticky header.

## Use it for

- Small static or caller-managed tables: invoices, settings lists, open orders and positions with a row action.

## Not for

- Large, sortable, filterable or editable data ([data-grid](https://beamline.io/components/data-grid)).
- Collapsing rows into cards on a phone: the table scrolls sideways under a pinned first column instead.

## Anatomy

- Table
- TableHeader
- TableBody
- TableFooter
- TableRow
- TableHead
- TableCell
- TableCaption

## Variants

- **density**: compact, default, comfortable

## States

- rest
- row hover (hover tint arrives at once, leaves over --pui-motion-out)
- selected (data-state="selected" on the row: accent tint, 2px accent-ink edge at the inline start, ink text)
- sticky header (opaque surface, its own line seam)
- pinned first column (sticky cells keep the row's hover and selected paint)
- unmeasured cell (data-null: ink-3 dash, the caller adds "Not measured")
- empty (the caller renders one full-width row with its message)

## Keyboard

- Native table semantics

## Motion

Row hover only: arrives at 0ms, leaves over --pui-motion-out. Nothing else moves; reduced motion changes nothing.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `density` | `"compact" \| "default" \| "comfortable"` | — | Row height: 32, 40 (default) or 48 px; the same three steps as every dense component. |
| `stickyHeader` | `boolean` | — |  |
| `TableHead / TableCell numeric` | `boolean` | — |  |

## Import

```tsx
import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead } from "@/components/table/table";
```

## Get it

Table is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Table is in the free sample, which costs nothing. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Data & tables

- [Data grid](https://beamline.io/components/data-grid): Virtualised grid for thousands of rows: multi-sort, search and value filters, resizable and pinnable columns, range selection, inline edit, footer…
- [Diff table](https://beamline.io/components/diff-table): Proposed edits to a table before they happen: new rows green, removals struck through, changed cells old → new; each change can be left out and Apply…
- [Filter toolbar](https://beamline.io/components/filter-toolbar): The filters on a list kept in view: chips that remove themselves, Add filter with fields and their values, Clear all, and room for search or view controls.
- [Import mapping](https://beamline.io/components/import-mapping): Map the columns of a file to the fields of one record type, see what every value becomes, then run the import and get an outcome for each row…