Skip to content

ForecastRow

stable

Single forecast period row (opening, receipts, disbursements, net flow, closing, confidence) — presentational <tr> sub-component rendered inside ForecastTable's <tbody>

Finance/Storybook ↗
import { ForecastRow } from "@nodus/design-system/finance"
Loading demo…

Props

periodrequired
Type stringDefault —

Forecast period label (e.g. 'Week 1', 'Mar 2026')

openingrequired
Type numberDefault —

Opening balance

receiptsrequired
Type numberDefault —

Expected receipts (rendered outcome-positive)

disbursementsrequired
Type numberDefault —

Expected disbursements (rendered outcome-negative)

netFlowrequired
Type numberDefault —

Net flow — sign drives positive/negative color

closingrequired
Type numberDefault —

Closing balance

confidencerequired
Type numberDefault —

Forecast confidence 0–1 — drives severity color of the % cell

currency
Type stringDefault —

ISO 4217 currency (defaults to finance locale currency)

locale
Type stringDefault —

BCP 47 locale override

highlighted
Type booleanDefault false

Temporal-subtle row highlight

style
Type CSSPropertiesDefault —

Style override

Accessibility

  • Renders a native <tr> — must be placed inside a <table><tbody> (normally via ForecastTable) for correct table semantics.
  • Confidence severity color is paired with the numeric percentage, so the value is never color-only.
  • Amounts use tabular-nums monospace for scanability.
semantictypeborderoutcomefin
MobileStacks / Scroll

Row of ForecastTable — the parent table activates horizontal scroll on narrow viewports.

Design Rationale

This component was designed to express:

Explore Related

ForecastTable→

Multi-period cash forecast table with row grouping, totals, and loading skeleton

CashForecastChart→

13-week rolling cash forecast with confidence-band bar chart

Was this helpful?