Quantity river

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

The life of one order line's quantity: at rest a bar of its real split ("5 delivered · 1 back in stock · 1 damaged · 5 cancelled"), unfolding into a river where every unit is a dot that travels between stages (waiting, allocated by location, on the way by shipment, delivered, returned, back in stock, damaged, cancelled), banks that count what passed between two stages, a ledger that rewinds the river and the money to any moment, and the money in its own lane. Actions, a split draft and return checks sit on the river.

Use it for

Any partial quantity people ask about: an order line, a purchase order receipt, a yield allocated to lots, kitchen items fired and served.
The host owns the events; the part replays them into units, counts, banks, the bar and the ledger.

Not for

A single status for a whole order → status-badge or tracker.
Stock levels over time → a chart.

Anatomy

rest (a button): the line and its quantity, the segmented bar, the split in words
sheet: now or the replayed date with the split; the river's columns (stage word, count, dots by location or shipment, drafts and the host's actions); the banks under them; the money lane; the ledger (when, who, change with money and note, the split after it)

States

rest
open
replaying (a ledger row pointed at or focused)
drafting (a split of allocated units, returned units' facts)
narrow (stages as a list)

Keyboard

Enter or Space on the line opens it; Escape or Close folds it back with focus on the line
Tab reaches the drafts and actions on the columns, then each ledger row; focusing a row rewinds the river to it, leaving returns to now
Columns are groups named with their stage and count; the ledger is a table with a caption

Motion

Units travel between columns on the shared FLIP when an event arrives or the ledger rewinds; the bar's segments and the banks grow to their new sizes. Reduced motion places them.

Props

Prop	Type	Default	Description
`label` (required)	`string`	—	The line: "Oak bar stool, natural".
`quantity` (required)	`number`	—
`events` (required)	`QuantityEvent[]`	—
`total`	`number`	—	The line's full value (all units), for the money lane's outstanding amount.
`currency`	`string`	—	ISO code for the default money format.
`format`	`((amount: number) => string)`	—	Money in the host's own format; it wins over `currency`.
`actions`	`QuantityAction[]`	—
`onAction`	`((id: string) => void)`	—
`onSplit`	`((first: number, second: number) => void)`	—	A split of allocated units into two shipments, drafted on the river: the sizes when saved.
`splitNames`	`[string, string]`	—	The shipments' names for the split draft. Default ["A", "B"].
`onValidate`	`((restocked: number, damaged: number) => void)`	—	Returned units received: for each, back in stock or damaged.
`open`	`boolean`	—	Controlled open state; omit to use defaultOpen.
`defaultOpen`	`boolean`	—	Initial open state when uncontrolled; defaults to false.
`onOpenChange`	`((open: boolean) => void)`	—	Reports an open-state change; no callback by default.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "column" \| "trigger" \| "bar" \| "dot" \| "river" \| "ledger" \| "mo…`	—	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.

Built from

Used in

Purchase orders

Import

import { QuantityRiver } from "@beamline/quantity-river";

Get it

Quantity river 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

Quantity riverComplete system · $49

The life of one order line's quantity.

Where are my 12 stools?

One order line, open. Every stool is a dot in its stage; the banks under the columns say how many passed from one stage to the next. Point at a row of the ledger to rewind the river and the money to that moment.

0 × 0full

Act on it

Allocated 8 in Brooklyn and 4 in Newark. The split starts along that line: save it, ship A, mark it delivered, take two back and say which goes back in stock, then cancel Newark's four: the dots travel at every step, and the money lane follows the refunds.

0 × 0full

In the order table

At rest each line is its bar and the split in words, never “partially fulfilled”; open one to see its river.

0 × 0full

About Quantity river

← Proposal twin Stock horizon →

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.

Quantity river

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Used in

Import

Get it

More in Data & tables