Table
A React component in Beamline's Data & tables category, in the free sample.
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).
- 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
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 · Connect your agent
More in Data & tables
- 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: 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: 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: 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…