Skip to main content
A dashboard where one control filters everything. Pick a region from the dropdown and every metric, bar chart, radar chart, and trend line updates instantly — no server round-trip, no page reload. This is the pattern that makes Prefab’s client-side state model fundamentally different from frameworks that rerun your script on every interaction.

​
How It Works

The key technique is pre-segmenting data by filter value and using ternary expressions to select the active dataset. All five variants of the data (one per region, plus “all”) live in state from the start. When the user picks a region, the renderer re-evaluates every expression that references region and swaps in the matching data — no network call, no script rerun.

​
The let binding pattern

Rather than repeating the ternary expression in every metric and chart prop, a let binding on the outer Column computes four intermediate values once: 
with Column(let={
    "m": pick("metrics"),       # resolves to the active metrics dict
    "chart": pick("monthly"),   # resolves to the active monthly data
    "cat": pick("categories"),  # resolves to the active category scores
    "t": pick("trend"),         # resolves to the active trend data
}):
Everything inside that Column can reference {{ m.revenue }} or data="{{ chart }}" directly. The pick() helper builds the ternary chain: {{ region == 'north' ? metrics_north : region == 'south' ? metrics_south : ... : metrics_all }}.

​
How the Select drives state

The Select component uses name="region" to auto-bind its value to state.region. When the user picks “North”, the renderer sets region = "north", which triggers the let binding to re-evaluate, which swaps every metric value, chart dataset, and radar shape simultaneously.

​
Expression pipes for formatting

The Metric values use pipes to format raw numbers from state:
  • {{ m.revenue | currency }} renders as “$284,750”
  • {{ m.units | number }} renders as “12,450” with locale separators
  • {{ m.avg_price | currency }} renders as “$22.87”
These are live expressions — when the region changes, the formatted output updates with the new values.