---
title: Cross-Filtering
description: A regional dashboard where a single dropdown instantly filters every chart and metric.
icon: filter
mode: wide
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

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.

<ComponentPreview json={{"view":{"let":{"m":"{{ region == 'north' ? metrics_north : region == 'south' ? metrics_south : region == 'east' ? metrics_east : region == 'west' ? metrics_west : metrics_all }}","chart":"{{ region == 'north' ? monthly_north : region == 'south' ? monthly_south : region == 'east' ? monthly_east : region == 'west' ? monthly_west : monthly_all }}","cat":"{{ region == 'north' ? categories_north : region == 'south' ? categories_south : region == 'east' ? categories_east : region == 'west' ? categories_west : categories_all }}","t":"{{ region == 'north' ? trend_north : region == 'south' ? trend_south : region == 'east' ? trend_east : region == 'west' ? trend_west : trend_all }}"},"type":"Column","children":[{"cssClass":"gap-4","type":"Dashboard","columns":12,"rowHeight":"auto","children":[{"type":"DashboardItem","col":1,"row":1,"colSpan":12,"rowSpan":1,"children":[{"type":"Card","children":[{"type":"CardContent","children":[{"cssClass":"gap-4 items-center","type":"Row","children":[{"content":"Region","type":"Muted"},{"cssClass":"w-48","name":"region","type":"Select","size":"default","disabled":false,"required":false,"invalid":false,"children":[{"type":"SelectOption","value":"all","label":"All Regions","selected":false,"disabled":false},{"type":"SelectOption","value":"north","label":"North","selected":false,"disabled":false},{"type":"SelectOption","value":"south","label":"South","selected":false,"disabled":false},{"type":"SelectOption","value":"east","label":"East","selected":false,"disabled":false},{"type":"SelectOption","value":"west","label":"West","selected":false,"disabled":false}]}]}]}]}]},{"type":"DashboardItem","col":1,"row":2,"colSpan":3,"rowSpan":1,"children":[{"type":"Metric","label":"Revenue","value":"{{ m.revenue | currency }}"}]},{"type":"DashboardItem","col":4,"row":2,"colSpan":3,"rowSpan":1,"children":[{"type":"Metric","label":"Units Sold","value":"{{ m.units | number }}"}]},{"type":"DashboardItem","col":7,"row":2,"colSpan":3,"rowSpan":1,"children":[{"type":"Metric","label":"Avg Price","value":"{{ m.avg_price | currency }}"}]},{"type":"DashboardItem","col":10,"row":2,"colSpan":3,"rowSpan":1,"children":[{"type":"Metric","label":"Stores","value":"{{ m.stores }}"}]},{"type":"DashboardItem","col":1,"row":3,"colSpan":7,"rowSpan":1,"children":[{"cssClass":"h-full","type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Monthly Sales"}]},{"type":"CardContent","children":[{"type":"BarChart","data":"{{ chart }}","series":[{"dataKey":"sales","label":"Sales","color":"#2563eb"},{"dataKey":"returns","label":"Returns","color":"#e76e50"}],"xAxis":"month","height":250,"stacked":true,"horizontal":false,"barRadius":0,"showLegend":true,"showTooltip":true,"animate":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}]}]}]},{"type":"DashboardItem","col":8,"row":3,"colSpan":5,"rowSpan":1,"children":[{"cssClass":"h-full","type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Category Performance"}]},{"type":"CardContent","children":[{"type":"RadarChart","data":"{{ cat }}","series":[{"dataKey":"score","label":"Score"}],"axisKey":"category","height":250,"filled":true,"showDots":true,"showLegend":true,"showTooltip":true,"animate":true,"showGrid":true}]}]}]},{"type":"DashboardItem","col":1,"row":4,"colSpan":12,"rowSpan":1,"children":[{"type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Revenue Trend (12 months)"}]},{"type":"CardContent","children":[{"type":"LineChart","data":"{{ t }}","series":[{"dataKey":"revenue","label":"Revenue","color":"#2563eb"}],"xAxis":"month","height":200,"curve":"smooth","showDots":true,"showLegend":true,"showTooltip":true,"animate":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}]}]}]}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python" expandable
from prefab_ui.components import (
    Card, CardContent, CardHeader, CardTitle,
    Column, Dashboard, DashboardItem,
    Muted, Row, Select, SelectOption,
)
from prefab_ui.components.charts import BarChart, ChartSeries, LineChart, RadarChart
from prefab_ui.components.metric import Metric
from prefab_ui.rx import Rx

# Pre-segmented data for each region. The Select writes to `region` in state,
# and a `let` binding picks the right dataset via a ternary chain.

REGIONS = ["all", "north", "south", "east", "west"]

metrics = {
    "all":   {"revenue": 284750, "units": 12450, "avg_price": 22.87, "stores": 48},
    "north": {"revenue": 142800, "units": 4200,  "avg_price": 34.00, "stores": 8},
    "south": {"revenue": 38900,  "units": 3850,  "avg_price": 10.10, "stores": 18},
    "east":  {"revenue": 67200,  "units": 1680,  "avg_price": 40.00, "stores": 6},
    "west":  {"revenue": 35850,  "units": 2720,  "avg_price": 13.18, "stores": 16},
}

monthly = {
    "all": [
        {"month": "Jan", "sales": 42000, "returns": 3200},
        {"month": "Feb", "sales": 48500, "returns": 3800},
        {"month": "Mar", "sales": 45200, "returns": 3400},
        {"month": "Apr", "sales": 51800, "returns": 4100},
        {"month": "May", "sales": 47600, "returns": 3600},
        {"month": "Jun", "sales": 53200, "returns": 4200},
    ],
    "north": [
        {"month": "Jan", "sales": 22000, "returns": 800},
        {"month": "Feb", "sales": 25500, "returns": 900},
        {"month": "Mar", "sales": 24200, "returns": 850},
        {"month": "Apr", "sales": 27800, "returns": 1000},
        {"month": "May", "sales": 23100, "returns": 750},
        {"month": "Jun", "sales": 29200, "returns": 1100},
    ],
    "south": [
        {"month": "Jan", "sales": 5800,  "returns": 1200},
        {"month": "Feb", "sales": 6400,  "returns": 1400},
        {"month": "Mar", "sales": 5600,  "returns": 1100},
        {"month": "Apr", "sales": 7200,  "returns": 1600},
        {"month": "May", "sales": 6100,  "returns": 1300},
        {"month": "Jun", "sales": 7800,  "returns": 1700},
    ],
    "east": [
        {"month": "Jan", "sales": 8200,  "returns": 400},
        {"month": "Feb", "sales": 10600, "returns": 500},
        {"month": "Mar", "sales": 9800,  "returns": 450},
        {"month": "Apr", "sales": 11800, "returns": 550},
        {"month": "May", "sales": 12400, "returns": 500},
        {"month": "Jun", "sales": 14200, "returns": 600},
    ],
    "west": [
        {"month": "Jan", "sales": 6000,  "returns": 800},
        {"month": "Feb", "sales": 6000,  "returns": 1000},
        {"month": "Mar", "sales": 5600,  "returns": 1000},
        {"month": "Apr", "sales": 5000,  "returns": 950},
        {"month": "May", "sales": 6000,  "returns": 1050},
        {"month": "Jun", "sales": 2000,  "returns": 800},
    ],
}

categories = {
    "all":   [{"category": "Electronics", "score": 82}, {"category": "Clothing", "score": 75}, {"category": "Home", "score": 80}, {"category": "Books", "score": 65}, {"category": "Sports", "score": 70}],
    "north": [{"category": "Electronics", "score": 98}, {"category": "Clothing", "score": 40}, {"category": "Home", "score": 92}, {"category": "Books", "score": 35}, {"category": "Sports", "score": 45}],
    "south": [{"category": "Electronics", "score": 45}, {"category": "Clothing", "score": 95}, {"category": "Home", "score": 50}, {"category": "Books", "score": 90}, {"category": "Sports", "score": 88}],
    "east":  [{"category": "Electronics", "score": 95}, {"category": "Clothing", "score": 60}, {"category": "Home", "score": 90}, {"category": "Books", "score": 55}, {"category": "Sports", "score": 40}],
    "west":  [{"category": "Electronics", "score": 50}, {"category": "Clothing", "score": 88}, {"category": "Home", "score": 55}, {"category": "Books", "score": 82}, {"category": "Sports", "score": 92}],
}

trend = {
    "all":   [{"month": "Mar", "revenue": 32000}, {"month": "Apr", "revenue": 35000}, {"month": "May", "revenue": 33500}, {"month": "Jun", "revenue": 38000}, {"month": "Jul", "revenue": 41000}, {"month": "Aug", "revenue": 39500}, {"month": "Sep", "revenue": 43000}, {"month": "Oct", "revenue": 45500}, {"month": "Nov", "revenue": 48000}, {"month": "Dec", "revenue": 52000}, {"month": "Jan", "revenue": 49000}, {"month": "Feb", "revenue": 54000}],
    "north": [{"month": "Mar", "revenue": 18000}, {"month": "Apr", "revenue": 20500}, {"month": "May", "revenue": 19000}, {"month": "Jun", "revenue": 22000}, {"month": "Jul", "revenue": 24500}, {"month": "Aug", "revenue": 23000}, {"month": "Sep", "revenue": 26000}, {"month": "Oct", "revenue": 28000}, {"month": "Nov", "revenue": 30000}, {"month": "Dec", "revenue": 35000}, {"month": "Jan", "revenue": 32000}, {"month": "Feb", "revenue": 38000}],
    "south": [{"month": "Mar", "revenue": 4200},  {"month": "Apr", "revenue": 4800},  {"month": "May", "revenue": 5100},  {"month": "Jun", "revenue": 5500},  {"month": "Jul", "revenue": 5200},  {"month": "Aug", "revenue": 5800},  {"month": "Sep", "revenue": 5500},  {"month": "Oct", "revenue": 6000},  {"month": "Nov", "revenue": 5800},  {"month": "Dec", "revenue": 6200},  {"month": "Jan", "revenue": 6000},  {"month": "Feb", "revenue": 6500}],
    "east":  [{"month": "Mar", "revenue": 5500},  {"month": "Apr", "revenue": 6200},  {"month": "May", "revenue": 7000},  {"month": "Jun", "revenue": 7800},  {"month": "Jul", "revenue": 8800},  {"month": "Aug", "revenue": 9500},  {"month": "Sep", "revenue": 10500}, {"month": "Oct", "revenue": 11500}, {"month": "Nov", "revenue": 12800}, {"month": "Dec", "revenue": 14000}, {"month": "Jan", "revenue": 15500}, {"month": "Feb", "revenue": 17000}],
    "west":  [{"month": "Mar", "revenue": 8500},  {"month": "Apr", "revenue": 8200},  {"month": "May", "revenue": 7800},  {"month": "Jun", "revenue": 7200},  {"month": "Jul", "revenue": 6800},  {"month": "Aug", "revenue": 6500},  {"month": "Sep", "revenue": 6000},  {"month": "Oct", "revenue": 5500},  {"month": "Nov", "revenue": 5200},  {"month": "Dec", "revenue": 4800},  {"month": "Jan", "revenue": 4200},  {"month": "Feb", "revenue": 3500}],
}

# Helper: build a ternary expression that picks the right dataset by region
def pick(prefix):
    return (
        f"{{{{ region == 'north' ? {prefix}_north"
        f" : region == 'south' ? {prefix}_south"
        f" : region == 'east' ? {prefix}_east"
        f" : region == 'west' ? {prefix}_west"
        f" : {prefix}_all }}}}"
    )


# A `let` on the outer Column computes intermediate values once.
# Everything inside references `m`, `chart`, `cat`, `t` instead
# of repeating the ternary chain for every prop.
with Column(let={
    "m": pick("metrics"),
    "chart": pick("monthly"),
    "cat": pick("categories"),
    "t": pick("trend"),
}):
    with Dashboard(columns=12, row_height="auto", gap=4):
        # Row 1: Region filter
        with DashboardItem(col=1, row=1, col_span=12):
            with Card():
                with CardContent():
                    with Row(align="center", gap=4):
                        Muted("Region")
                        with Select(name="region", css_class="w-48"):
                            SelectOption(value="all", label="All Regions")
                            SelectOption(value="north", label="North")
                            SelectOption(value="south", label="South")
                            SelectOption(value="east", label="East")
                            SelectOption(value="west", label="West")

        # Row 2: Metrics — all driven by `m` from the let binding
        m = Rx("m")
        with DashboardItem(col=1, row=2, col_span=3):
            Metric(label="Revenue", value=m.revenue.currency())
        with DashboardItem(col=4, row=2, col_span=3):
            Metric(label="Units Sold", value=m.units.number())
        with DashboardItem(col=7, row=2, col_span=3):
            Metric(label="Avg Price", value=m.avg_price.currency())
        with DashboardItem(col=10, row=2, col_span=3):
            Metric(label="Stores", value=m.stores)

        # Row 3: Bar chart + radar chart
        chart = Rx("chart")
        cat = Rx("cat")
        t = Rx("t")
        with DashboardItem(col=1, row=3, col_span=7):
            with Card(css_class="h-full"):
                with CardHeader():
                    CardTitle("Monthly Sales")
                with CardContent():
                    BarChart(
                        data=chart,
                        series=[
                            ChartSeries(data_key="sales", label="Sales", color="#2563eb"),
                            ChartSeries(data_key="returns", label="Returns", color="#e76e50"),
                        ],
                        x_axis="month",
                        stacked=True,
                        bar_radius=0,
                        show_legend=True,
                        height=250,
                    )

        with DashboardItem(col=8, row=3, col_span=5):
            with Card(css_class="h-full"):
                with CardHeader():
                    CardTitle("Category Performance")
                with CardContent():
                    RadarChart(
                        data=cat,
                        series=[ChartSeries(data_key="score", label="Score")],
                        axis_key="category",
                        show_dots=True,
                        height=250,
                    )

        # Row 4: 12-month trend
        with DashboardItem(col=1, row=4, col_span=12):
            with Card():
                with CardHeader():
                    CardTitle("Revenue Trend (12 months)")
                with CardContent():
                    LineChart(
                        data=t,
                        series=[ChartSeries(data_key="revenue", label="Revenue", color="#2563eb")],
                        x_axis="month",
                        curve="smooth",
                        show_dots=True,
                        height=200,
                    )
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "let": {
      "m": "{{ region == 'north' ? metrics_north : region == 'south' ? metrics_south : region == 'east' ? metrics_east : region == 'west' ? metrics_west : metrics_all }}",
      "chart": "{{ region == 'north' ? monthly_north : region == 'south' ? monthly_south : region == 'east' ? monthly_east : region == 'west' ? monthly_west : monthly_all }}",
      "cat": "{{ region == 'north' ? categories_north : region == 'south' ? categories_south : region == 'east' ? categories_east : region == 'west' ? categories_west : categories_all }}",
      "t": "{{ region == 'north' ? trend_north : region == 'south' ? trend_south : region == 'east' ? trend_east : region == 'west' ? trend_west : trend_all }}"
    },
    "type": "Column",
    "children": [
      {
        "cssClass": "gap-4",
        "type": "Dashboard",
        "columns": 12,
        "rowHeight": "auto",
        "children": [
          {
            "type": "DashboardItem",
            "col": 1,
            "row": 1,
            "colSpan": 12,
            "rowSpan": 1,
            "children": [
              {
                "type": "Card",
                "children": [
                  {
                    "type": "CardContent",
                    "children": [
                      {
                        "cssClass": "gap-4 items-center",
                        "type": "Row",
                        "children": [
                          {"content": "Region", "type": "Muted"},
                          {
                            "cssClass": "w-48",
                            "name": "region",
                            "type": "Select",
                            "size": "default",
                            "disabled": false,
                            "required": false,
                            "invalid": false,
                            "children": [
                              {
                                "type": "SelectOption",
                                "value": "all",
                                "label": "All Regions",
                                "selected": false,
                                "disabled": false
                              },
                              {
                                "type": "SelectOption",
                                "value": "north",
                                "label": "North",
                                "selected": false,
                                "disabled": false
                              },
                              {
                                "type": "SelectOption",
                                "value": "south",
                                "label": "South",
                                "selected": false,
                                "disabled": false
                              },
                              {
                                "type": "SelectOption",
                                "value": "east",
                                "label": "East",
                                "selected": false,
                                "disabled": false
                              },
                              {
                                "type": "SelectOption",
                                "value": "west",
                                "label": "West",
                                "selected": false,
                                "disabled": false
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "DashboardItem",
            "col": 1,
            "row": 2,
            "colSpan": 3,
            "rowSpan": 1,
            "children": [{"type": "Metric", "label": "Revenue", "value": "{{ m.revenue | currency }}"}]
          },
          {
            "type": "DashboardItem",
            "col": 4,
            "row": 2,
            "colSpan": 3,
            "rowSpan": 1,
            "children": [{"type": "Metric", "label": "Units Sold", "value": "{{ m.units | number }}"}]
          },
          {
            "type": "DashboardItem",
            "col": 7,
            "row": 2,
            "colSpan": 3,
            "rowSpan": 1,
            "children": [
              {
                "type": "Metric",
                "label": "Avg Price",
                "value": "{{ m.avg_price | currency }}"
              }
            ]
          },
          {
            "type": "DashboardItem",
            "col": 10,
            "row": 2,
            "colSpan": 3,
            "rowSpan": 1,
            "children": [{"type": "Metric", "label": "Stores", "value": "{{ m.stores }}"}]
          },
          {
            "type": "DashboardItem",
            "col": 1,
            "row": 3,
            "colSpan": 7,
            "rowSpan": 1,
            "children": [
              {
                "cssClass": "h-full",
                "type": "Card",
                "children": [
                  {
                    "type": "CardHeader",
                    "children": [{"type": "CardTitle", "content": "Monthly Sales"}]
                  },
                  {
                    "type": "CardContent",
                    "children": [
                      {
                        "type": "BarChart",
                        "data": "{{ chart }}",
                        "series": [
                          {"dataKey": "sales", "label": "Sales", "color": "#2563eb"},
                          {"dataKey": "returns", "label": "Returns", "color": "#e76e50"}
                        ],
                        "xAxis": "month",
                        "height": 250,
                        "stacked": true,
                        "horizontal": false,
                        "barRadius": 0,
                        "showLegend": true,
                        "showTooltip": true,
                        "animate": true,
                        "showGrid": true,
                        "showYAxis": true,
                        "yAxisFormat": "auto"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "DashboardItem",
            "col": 8,
            "row": 3,
            "colSpan": 5,
            "rowSpan": 1,
            "children": [
              {
                "cssClass": "h-full",
                "type": "Card",
                "children": [
                  {
                    "type": "CardHeader",
                    "children": [{"type": "CardTitle", "content": "Category Performance"}]
                  },
                  {
                    "type": "CardContent",
                    "children": [
                      {
                        "type": "RadarChart",
                        "data": "{{ cat }}",
                        "series": [{"dataKey": "score", "label": "Score"}],
                        "axisKey": "category",
                        "height": 250,
                        "filled": true,
                        "showDots": true,
                        "showLegend": true,
                        "showTooltip": true,
                        "animate": true,
                        "showGrid": true
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "DashboardItem",
            "col": 1,
            "row": 4,
            "colSpan": 12,
            "rowSpan": 1,
            "children": [
              {
                "type": "Card",
                "children": [
                  {
                    "type": "CardHeader",
                    "children": [{"type": "CardTitle", "content": "Revenue Trend (12 months)"}]
                  },
                  {
                    "type": "CardContent",
                    "children": [
                      {
                        "type": "LineChart",
                        "data": "{{ t }}",
                        "series": [{"dataKey": "revenue", "label": "Revenue", "color": "#2563eb"}],
                        "xAxis": "month",
                        "height": 200,
                        "curve": "smooth",
                        "showDots": true,
                        "showLegend": true,
                        "showTooltip": true,
                        "animate": true,
                        "showGrid": true,
                        "showYAxis": true,
                        "yAxisFormat": "auto"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## 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](/components/column) computes four intermediate values once:

```python
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](/components/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](/components/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.
