Living table

A React component in Beamline's Data & tables category.

A table that shows as much as fits on both axes: width decides which columns show (the rest ride in the name line, moving there rather than vanishing) and zoom decides how much each record shows — every record as one tile with a lens and an honest legend, a row, or a tall row with its history — anchored on the record under the pointer.

Use it for

The list a team lives in all day (invoices, deals, patients, work orders, runs) where people need both the rows and the whole list at once to find the ones in trouble.
The host gives the columns with their room, priority and fold kind, and the overview's bands as tests; the part never invents a value.

Not for

Spreadsheet-like editing, virtual scrolling over a server source, column resizing → data-grid.
A short list with a few columns that always fit → table.

Anatomy

toolbar: the list's name, its count and sort, the zoom hint and the level control (Overview · Rows · Detail)
rows: a sticky header with sort buttons, rows whose first cell is the name with folded values riding under it, a sticky footer with each aggregate and its scope
detail: each row grown with the columns that left (label and value) and the host's detail
overview: every record as a tile in sort order, sized to fit; the lens over the hovered or focused tile; the legend with the colour's meaning, each band's count as a spotlight toggle, not-loaded count

States

overview
rows
detail
loading (the level's shape, hatched)
empty
partial (n loaded of m: footer and legend say so, the rest outlined)
changed (a record flashes once; its tile cross-fades)

Keyboard

+ and − (or the level control) zoom, anchored on the focused record, and focus stays on it; Ctrl/⌘ with +, − or the wheel is always the browser's page zoom
In the overview: arrows move between tiles (the lens follows), Home/End to the row's ends, Ctrl+Home/End to the first and last; Enter or Space zooms into Rows on that record and focuses it
In rows: Tab reaches one row (the last one focused); ↑/↓, Home and End move between rows; the headers' sort buttons sort

Motion

A fold that changes moves the values between their cell and the name line (only a fold change travels; a resize that crosses no step places). Zooming keeps the anchor record in place: into the overview its tile lands where its row was, out of it the row grows from its tile, and the others fade in by distance. A changed record flashes once; its tile cross-fades. Reduced motion places at once and still keeps the anchor.

Props

Prop	Type	Default	Description
`label` (required)	`string`	—	The list's name: "Invoices".
`rows` (required)	`T[]`	—
`getRowId` (required)	`(row: T) => string`	—
`columns` (required)	`LivingColumn<T>[]`	—	The first column is the name.
`overview` (required)	`LivingOverview<T>`	—
`matching`	`number`	—	How many records match when only some are loaded (`rows` are the loaded ones): the footer and the legend say so, and the overview outlines the rest.
`noun`	`{ one: string; other: string; }`	—	The record's noun for the counts, by number: `{ one: "invoice", other: "invoices" }`.
`detail`	`((row: T) => ReactNode)`	—	What a row adds at Detail under the columns that left: its history, its last note.
`level`	`LivingLevel`	—
`defaultLevel`	`LivingLevel`	—
`onLevelChange`	`((level: LivingLevel) => void)`	—
`sort`	`LivingSort`	—
`defaultSort`	`LivingSort`	—
`onSortChange`	`((sort: LivingSort) => void)`	—
`loading`	`boolean`	—
`height`	`number`	—	The table's height in pixels; the overview sizes its tiles so every record fits in it. Default 520.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "header" \| "legend" \| "body" \| "footer" \| "cell" \| "row" \| "too…`	—	Classes for the named visual parts; no overrides by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`defaultLens`	`string`	—	A record read through the overview's lens as it opens, before anyone points (its row id): the lens shows it over its tile without taking focus; pointing anywhere moves it.

Built from

Dependencies

lucide-react

Import

import { LivingTable } from "@beamline/living-table";

Get it

Living table is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Living tableComplete system · $49

A table that shows as much as fits on both axes.

Every invoice at once

612 invoices as tiles, oldest due first, coloured by payment risk; it opens with the lens on the invoice longest overdue. Hover or arrow through the tiles to read one through the lens; click a hot tile and the table zooms back in around that invoice. + and − or the control move between Overview, Rows and Detail, anchored on the focused record; Ctrl-scroll and pinch stay the page's zoom.

0 × 0full

Fits any width

Drag the corner to narrow the table: Amount and Due move into the name line, Status becomes a mark there, Owner and Last event leave (Detail still shows them); widen it and they travel back, and with room to spare the trend joins.

0 × 0full

Payments arriving

Record a payment: its row flashes once and its tile cools from late to paid, and the legend's counts follow.

0 × 0full

Only some loaded

25 of 612 matching invoices are loaded: the footer and the legend say so and the rest are outlined, never coloured as if known.

0 × 0full

About Living table

Availability layers →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Living table

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Data & tables