data-display / beta

Breakdown

How a number is produced: labelled lines with + − × ÷ operators, optional source details and a result under a rule.

LIVE PREVIEW

Loading preview…

When to use

Totals that people must be able to check: invoices, proposals, statements.
Explaining a computed figure step by step.

Consider an alternative

Many comparable rows — use DataTable with a footer.
Record properties — use PropertyGrid.
Unrelated headline metrics — use StatGroup.

Import

import { Breakdown } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


aria-label (required)	string	—	Names the calculation for assistive technology (on the group that wraps the list).
lines (required)	readonly BreakdownLine[]	—
density	"default" \| "compact"	"default"
operatorLabels	Partial<Record<BreakdownOperator \| "result", string>>	{ plus: "plus", minus: "minus", times: "times", divide: "divided by", result: "equals" }	Spoken operator words.
result	Omit<BreakdownLine, "operator" \| "level">	—	The result, under a rule, in semibold; spoken with "equals".
subtotalAfter	readonly string[]	—	Intermediate results: line ids after which a hairline subtotal rule is drawn.
className	string	—

Examples

Operators and result

<Breakdown aria-label="Calculation" lines={[{ id: "a", label: "Delivered", value: <Amount value={92} /> }, { id: "b", label: "Goal", operator: "minus", value: <Amount value={110} /> }]} result={{ id: "r", label: "Balance", value: <Amount value={-18} signDisplay="exceptZero" tone="sign" /> }} />

Multiplication chain with subtotals

<Breakdown aria-label="Payment" subtotalAfter={["rate"]} lines={lines} result={result} />

Nested and muted lines

<Breakdown aria-label="Working days" lines={[{ id: "off", label: "Days off", operator: "minus", level: 1, value: <Amount value={2} /> }, { id: "room", label: "Cap room", muted: true, value: <Amount value={60} unit="pts" /> }]} />

Compact

<Breakdown aria-label="Order total" density="compact" lines={lines} result={result} />