When to use

"Spreadsheet-style" KPI scanning: pure tabular numbers, most data per pixel. Best when the operator wants to scan many KPIs side-by-side with consistent column alignment (now / prev / Δ% / vs target). No sparkline, no chart chrome, no decorations. If you need direction or trend at a glance, pick Sparkline list or Terminal grid; if you want headline numbers with restraint, pick Editorial minimal.

Wide-only by design

This showcase has no responsive collapse. The narrow-card "stack each row into a mini-card" pattern was tried first but converged visually with the Comparison gauges showcase. For narrow page-grid placements (1×3 cards, 25 % asymmetric cells) route to Comparison gauges instead. The 25/35/40 page-grid row above demonstrates how cramped the columns get below the design's comfortable width — values can wrap or push past the column tracks. End-developer's call whether that's acceptable.

Composable column toggles

metric and now are mandatory. previousValue, deltaPercent, and targetBar are independently optional via noPreviousValue / noDeltaPercent / noTargetBar on KpiStrip. The modifiers compose freely, so the visible column count lands anywhere from 5 (no toggles) down to 2 (all three optional columns dropped: metric + now only). The framework precomputes a grid-template-columns selector for every combination, so consumers only toggle the props — no manual track-width tuning.

Auto-generated header + popovers

The header row renders from the visible columns automatically. Default labels: Metric · Now · Prev · Δ% · vs Target. Override individual labels with headerLabels={{ now: 'Current', targetBar: 'Goal' }}. Set detailTitleText on a row and the wrapper builds the popover body from the row's typed props (Current / Previous / Δ absolute / Δ percent / Target). Sentiment colour cascades from deltaVariant.

Bar + percent in the target column

The "vs target" column carries a tiny progress bar with the percent value pinned below it. Bar fill is theme-neutral grey via color-mix(in srgb, var(--pa-text-color-1) 40%, transparent); the percent value (e.g. "97 %" vs "108 %" vs "54 %") signals overshoot/undershoot, so colour reinforcement isn't needed. Bar is visually capped at 100 % so over-target metrics read as "fully filled" rather than overflowing.

KpiStrip props

• titleText — card title in the header.
• isLive — show the LIVE pill with animated green dot.
• footerText — footer caption (plain string). Override via footer snippet.
• noPreviousValue — drop the prev column (pa-kpi-strip--no-prev).
• noDeltaPercent — drop the Δ% column (pa-kpi-strip--no-delta).
• noTargetBar — drop the vs-target column (pa-kpi-strip--no-target).
• noHeader — suppress the auto-generated header row.
• headerLabels — override individual header labels: { metric, now, previousValue, deltaPercent, targetBar }.
• head snippet — fully-custom header markup. Wins over headerLabels + noHeader.

KpiStripRow props — cells

• metricText — metric label.
• valueText / unit / prefix — focal "now" cell (e.g. $ / 862 / K).
• previousValueText — previous-period value.
• deltaText + deltaVariant — Δ% text and sentiment colour.
• targetBarPercent — bar fill 0–100 (visually capped at 100).
• targetPercentText — percent label below the bar (may exceed 100).

KpiStripRow props — popover

• detailTitleText — popover title. Setting this enables the popover.
• targetText — target value shown only in the popover.
• deltaAbsoluteText — absolute delta value shown only in the popover.
• deltaAbsoluteVariant — sentiment override for the Δ absolute row.
• detailRows — typed row list, overrides auto-generated body.
• detail snippet — fully-custom popover markup, overrides everything.

Delta sentiment variants

• positive / negative / neutral — ordinary movement / no change.
• up-strong / down-strong — outlier positive / negative (deeper colours).