Target table

A React component in Beamline's Form controls category.

Rows of repeated rounds with typed targets (a load × a count, a count range, a time, a load held for a time), each row drawn as a bar beside its numbers that is also its control: drag across for the load, snapped to the unit's step, up or down for the count, tap or arrow keys to set; the fields are the exact twins, kinds are your app's own (warm-up, to failure…), a shown unit never moves a stored value, and a done column logs the rounds as they happen; while logging, a Did column takes the count actually done beside a range.

Use it for

Planning or logging repeated rounds with typed targets: sets of a strength exercise, rehab rounds, practice drills, interval blocks.
Wherever each round has a load and a count (or a time) that people adjust by feel and the shape of the rounds matters (a warm-up ramp, a plateau, a drop).

Not for

A general table of records (table or data-grid).
One number with bounds (number-field) or a value on a scale with a named limit (scrubber).
Splitting a fixed whole between parts (allocation-editor).

Anatomy

column headings: the row's kind, the load with its unit (a menu of units when there are several), the count as a fixed number or a range (a menu), the time; the scale's end said above the bars
row: the kind's marker (its word where there is room, its letter on a phone, a working row numbered) opening the kind menu with each kind's consequence and Remove; the typed fields; the row's bar; the done mark when logging
bar: a track that is the scale and a shape inside it, as long as the row's load (or count, or time), cut into one segment per count, a range's extra counts open, a row with no load yet hatched; its value beside its end while held, focused or pointed at
foot: Add set and your `aside` (rest, a timer)
TargetShape (also exported): a row's shape alone, to read: length against a max (a load or a time; null hatched), a segment per count with open ones outlined, faint for a warm-up; drawn only, its values said in words beside it (training-progress draws a logged day's sets with it)
did (with onResultChange, count measures): the count actually done beside the target, a small number the hand pulls up or down; empty, the plan's top shows quietly and a tap or Enter makes it the count; the bar then draws what was done solid and what the range still allowed open

States

rest (bars in quiet ink, faint kinds fainter)
pointed at, focused (full ink, the value beside the end, the focus ring)
held: the bar follows the hand snapped to the step, the fields show the same value, the scale holds
released: the value commits and every bar glides to the new scale
cancelled: Escape or a lost pointer puts the row back
range (low end solid, the rest open)
as many as possible (an open end)
not entered (hatched bar, never zero), incomplete after a save attempt (the field marked, its fix said)
structure locked (kinds, add, remove off; values open)
done and not done (logging)
narrow room: the bar on its own line under the fields; the kind's letter instead of its word
right to left: bars grow from the right, ← adds load
result: not entered (the plan's count quiet), done within the range, short of it, above it; held while dragged (the bar draws it), Escape puts it back

Keyboard

Tab reaches the kind menu, each field and the bar of every row
on a bar: → / ← load by the unit's step (Shift: four steps; mirrored right to left), ↑ / ↓ count by one (Shift: five)
fields: ↑ ↓ step, typed values ("225 lb" in a kg field converts)
kind, unit and count headings are menu buttons: Enter opens, arrows move, Escape closes
Did: ↑/↓ by one (Shift by five), Home the range's low end, End the plan's top, Enter on an empty one the plan's top, Delete or Backspace clears

Motion

A bar's length is a transform from its start, gliding at the fast duration to a typed or released value; while held it follows the hand with no glide. Rows keep their path when they arrive, move and leave (the shared FLIP). The value beside the end arrives at once and leaves over the motion-out duration. Reduced motion places everything at once.

Props

Prop	Type	Default	Description
`name` (required)	`string`	—	The item's name, which every field and bar is named by ("Bench press, set 1, weight").
`measure` (required)	`"load-count" \| "count" \| "seconds" \| "load-seconds"`	—	What each row holds.
`rows / defaultRows / onRowsChange`	`TargetRow[]`	—	{ id, kind, load (stored unit), count (a range's top), low (a range's low end), seconds, done? }; every change as the whole list.
`kinds` (required)	`TargetKind[]`	—	The kinds a row can be, in menu order. The first is a new row's kind.
`units / unit / defaultUnit / onUnitChange`	`TargetUnit[] / string`	—	{ id, short, long, perStored, step }; the first is the stored unit. Default kg and lb (2.5 / 5 steps).
`countMode / defaultCountMode / onCountModeChange`	`"fixed" \| "range"`	—	A fixed count or a range; switching keeps ids and values.
`onDoneChange`	`(id, done) => void`	—	Shows the done column (logging the rounds as they happen).
`structureLocked / showProblems`	`boolean`	—	structureLocked: Rows can't be added, removed or retyped (someone else set them); values stay editable. Say why beside it. showProblems: Mark incomplete rows in place (after a save attempt).
`aside`	`ReactNode`	—	At the end of the row with Add (rest, a timer).
`labels`	`MessageLabels`	—	Replace any built-in words: `{ count: "Breaths", rowNamed: "round {n}" }`.
`rows`	`TargetRow[]`	—
`defaultRows`	`TargetRow[]`	—
`onRowsChange`	`((rows: TargetRow[]) => void)`	—	Every change (a typed value, a released drag, a key, a kind, a row added or removed) as the whole new list.
`units`	`TargetUnit[]`	—	The units the load can be shown in; the first is the stored unit. Default kilograms and pounds.
`unit`	`string`	—
`defaultUnit`	`string`	—
`onUnitChange`	`((unit: string) => void)`	—	The shown unit changed (nothing stored moves). Without it the unit heading is not a menu.
`countMode`	`TargetCountMode`	—
`defaultCountMode`	`TargetCountMode`	—
`onCountModeChange`	`((mode: TargetCountMode) => void)`	—	Fixed count or range. Switching keeps the number as both ends, or a range's top.
`structureLocked`	`boolean`	—	Rows can't be added, removed or retyped (someone else set them); values stay editable. Say why beside it.
`showProblems`	`boolean`	—	Mark incomplete rows in place (after a save attempt).
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`TargetTableClassNames`	—	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.
`TargetShape.length` (required)	`number \| null`	—
`TargetShape.max` (required)	`number`	—
`TargetShape.count`	`number \| null`	—	On TargetShape: Segments; null or 0 draws one whole bar (a time, a load alone).
`TargetShape.open`	`number`	—
`TargetShape.faint`	`boolean`	—
`onResultChange`	`(id: string, result: number \| null) => void`	—	Shows the Did column (count measures): the count actually done beside the target, scrubbed up or down or stepped with ↑/↓; a tap fills in the plan's top; Delete clears it.

Built from

Used in

Dependencies

lucide-react

Import

import { TargetTable, TargetShape, KG_PER_LB } from "@beamline/target-table";

Get it

Target 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