Tabular spreadsheet-style table card — most data per pixel, no chart chrome. Optional columns
(previous / Δ% / target bar) drop in independently via the matching
no_previous_value / no_delta_percent / no_target_bar
toggles. Wide-only by design — for narrow placements, use Comparison gauges instead.
Revisión semanal · 5 columnas (predeterminado)
- Current
- $847K
- Previous
- $748K
- Δ absolute
- +$99K
- Δ percent
- ▲ 13.3%
- Target
- $900K
no_previous_value — 4-col (metric · now · Δ% · target)
Drop the prev column when there's no room for prev + now side-by-side, or when prev isn't material.
Métricas operativas
- Current
- $847K
- Previous
- $748K
- Δ absolute
- +$99K
- Δ percent
- ▲ 13.3%
- Target
- $900K
no_delta_percent — 4-col (metric · now · prev · target)
Useful when the prev column is already the comparison and an extra Δ% column would be redundant.
Instantánea
- Current
- $847K
- Previous
- $748K
- Δ absolute
- +$99K
- Δ percent
- ▲ 13.3%
- Target
- $900K
no_target_bar — 4-col (metric · now · prev · Δ%)
For pages without target bookkeeping — pure metric history.
Números en vivo
- Current
- $847K
- Previous
- $748K
- Δ absolute
- +$99K
- Δ percent
- ▲ 13.3%
- Target
- $900K
Double-drop · no_previous_value + no_target_bar — 3-col (metric · now · Δ%)
Barra de tendencia
- Current
- $847K
- Previous
- $748K
- Δ absolute
- +$99K
- Δ percent
- ▲ 13.3%
- Target
- $900K
Triple-drop · 2-col (metric · now only)
Strip becomes a label-value list. For overview pages where context is provided elsewhere.
Minimal
- Current
- $847K
- Previous
- $748K
- Δ absolute
- +$99K
- Δ percent
- ▲ 13.3%
- Target
- $900K
Custom header_labels
The auto-header is generated from visible columns; override individual labels via the header_labels map keyed by column atom.
Encabezados localizados
- Current
- $847K
- Previous
- $748K
- Δ absolute
- +$99K
- Δ percent
- ▲ 13.3%
- Target
- $900K
Guía de uso
When to use
Densest layout in the KPI family. Best for analyst pages, weekly review reports, internal dashboards where the user already understands each metric and just wants to scan the numbers. For interactive trend-first reads, use Sparkline list or Terminal grid.
Composable column toggles
metric and now are always present. previous_value,
delta_percent, and target_bar drop independently via
no_previous_value / no_delta_percent / no_target_bar.
Toggles compose — 8 combinations covered by separate grid-template-columns
selectors so the visible cell count always matches the grid tracks.
Target bar semantics
Bar fill width = target_bar_percent capped at 100% visually. The percent label
below (target_percent_text) may exceed 100 — overshoots are signalled by the label,
not by overflowing the bar. Theme-neutral grey fill because the pct value itself carries
sentiment.
Auto-generated header row
The header is built from the visible columns in source order, with default English labels.
Override individual labels via header_labels (map keyed by column atom),
suppress entirely via no_header, or replace via the :head slot.
The auto-header is the recommended path — keeps the visible-column logic in one place.
Wide-only by design
No @container queries — narrow placements should route to Comparison gauges
instead, which converges at small widths to a similar metric-bar-pct layout. Lets each design
keep a single canonical shape.
Referencia de clases CSS
Card structure
pa-kpi-strip— page-namespace class on.pa-card.pa-kpi-strip__body—padding: 0so dividers reach the card edges.pa-kpi-strip--no-prev/--no-delta/--no-target— independently composable column toggles.
Header
pa-kpi-strip__head-row— header row.pa-kpi-strip__head— header cell.pa-kpi-strip__head--num— right-align modifier for numeric columns (now / prev / Δ%).
Data row + cells
pa-kpi-strip__row— single data row.pa-kpi-strip__metric/__now/__prev/__delta/__target— cell elements.pa-kpi-strip__num/__unit— value spans inside__now.pa-kpi-strip__delta--positive/--negative/--neutral/--up-strong/--down-strong— delta sentiment.pa-kpi-strip__bar/__fill— target bar (theme-neutral grey).pa-kpi-strip__bar-pct— percent label below the bar (may exceed 100%).