;
};
An expense overview combining a sortable DataTable with component cells, a pie chart breakdown by category, and conditional budget alerts. The data is static but the table is fully interactive: sort, search, and watch the category badges light up.
```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Alert, AlertDescription, AlertTitle,
Badge, Card, CardContent, CardDescription, CardHeader, CardTitle,
Column, DataTable, DataTableColumn, Grid, Metric, Row, Separator,
)
from prefab_ui.components.charts import ChartSeries, PieChart
expenses = [
("Compute", 42_000, "cloud"),
("Storage", 18_500, "database"),
("Network", 12_300, "wifi"),
("Monitoring", 4_200, "activity"),
("CI/CD", 3_800, "git-branch"),
("Support", 2_100, "headphones"),
]
total = sum(cost for _, cost, _ in expenses)
budget = 95_000
rows = []
for name, cost, _icon in expenses:
pct = round(cost / total * 100)
variant = "destructive" if pct > 40 else "default" if pct > 15 else "secondary"
rows.append({
"category": Badge(name, variant=variant),
"amount": f"${cost:,}",
"share": Badge(f"{pct}%", variant=variant),
})
pie_data = [{"category": name, "cost": cost} for name, cost, _ in expenses]
with Column(gap=4):
with Grid(columns=2, gap=4):
with Card():
with CardContent():
Metric(label="Total Spend", value=f"${total:,}", delta="+6.2% MoM")
with Card():
with CardContent():
Metric(
label="Budget Remaining",
value=f"${budget - total:,}",
delta=f"{round((budget - total) / budget * 100)}% left",
)
with Card():
with CardHeader():
CardTitle("Monthly Breakdown")
CardDescription("March 2026")
with CardContent():
with Column(gap=6):
PieChart(
data=pie_data,
data_key="cost",
name_key="category",
height=220,
inner_radius=50,
show_legend=True,
show_tooltip=True,
)
Separator()
DataTable(
columns=[
DataTableColumn(key="category", header="Category", sortable=True),
DataTableColumn(key="amount", header="Amount", align="right", sortable=True),
DataTableColumn(key="share", header="Share", align="right"),
],
rows=rows,
search=True,
)
with Alert(variant="warning", icon="triangle-alert"):
AlertTitle("Approaching Budget Limit")
AlertDescription(
f"${total:,} of ${budget:,} used ({round(total / budget * 100)}%). "
"Review compute costs for optimization opportunities."
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"cssClass": "gap-4 grid-cols-2",
"type": "Grid",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"type": "Metric",
"label": "Total Spend",
"value": "$82,900",
"delta": "+6.2% MoM"
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"type": "Metric",
"label": "Budget Remaining",
"value": "$12,100",
"delta": "13% left"
}
]
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardTitle", "content": "Monthly Breakdown"},
{"type": "CardDescription", "content": "March 2026"}
]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-6",
"type": "Column",
"children": [
{
"type": "PieChart",
"data": [
{"category": "Compute", "cost": 42000},
{"category": "Storage", "cost": 18500},
{"category": "Network", "cost": 12300},
{"category": "Monitoring", "cost": 4200},
{"category": "CI/CD", "cost": 3800},
{"category": "Support", "cost": 2100}
],
"dataKey": "cost",
"nameKey": "category",
"height": 220,
"innerRadius": 50,
"showLabel": false,
"paddingAngle": 0,
"showLegend": true,
"showTooltip": true,
"animate": true,
"valueFormat": "auto"
},
{"type": "Separator", "orientation": "horizontal"},
{
"type": "DataTable",
"columns": [
{"key": "category", "header": "Category", "sortable": true},
{
"key": "amount",
"header": "Amount",
"sortable": true,
"headerClass": "text-right",
"cellClass": "text-right"
},
{
"key": "share",
"header": "Share",
"sortable": false,
"headerClass": "text-right",
"cellClass": "text-right"
}
],
"rows": [
{
"category": {"type": "Badge", "label": "Compute", "variant": "destructive"},
"amount": "$42,000",
"share": {"type": "Badge", "label": "51%", "variant": "destructive"}
},
{
"category": {"type": "Badge", "label": "Storage", "variant": "default"},
"amount": "$18,500",
"share": {"type": "Badge", "label": "22%", "variant": "default"}
},
{
"category": {"type": "Badge", "label": "Network", "variant": "secondary"},
"amount": "$12,300",
"share": {"type": "Badge", "label": "15%", "variant": "secondary"}
},
{
"category": {"type": "Badge", "label": "Monitoring", "variant": "secondary"},
"amount": "$4,200",
"share": {"type": "Badge", "label": "5%", "variant": "secondary"}
},
{
"category": {"type": "Badge", "label": "CI/CD", "variant": "secondary"},
"amount": "$3,800",
"share": {"type": "Badge", "label": "5%", "variant": "secondary"}
},
{
"category": {"type": "Badge", "label": "Support", "variant": "secondary"},
"amount": "$2,100",
"share": {"type": "Badge", "label": "3%", "variant": "secondary"}
}
],
"search": true,
"paginated": false,
"pageSize": 10
}
]
}
]
}
]
},
{
"type": "Alert",
"variant": "warning",
"icon": "triangle-alert",
"children": [
{"type": "AlertTitle", "content": "Approaching Budget Limit"},
{
"type": "AlertDescription",
"content": "$82,900 of $95,000 used (87%). Review compute costs for optimization opportunities."
}
]
}
]
}
}
```
## How It Works
The interesting move here is that all the math happens in plain Python *before* any component exists. The `expenses` list is the single source of truth; `total = sum(cost for _, cost, _ in expenses)` and `budget = 95_000` are ordinary Python numbers, and the per-category `pct` and `variant` are computed in a loop. By the time a component is constructed, every value is already a concrete string or number. There is no [state](/concepts/state) and no [reactive expression](/concepts/expressions) on this page — the data is fixed, so the script bakes the answers in and lets the renderer handle only presentation and table interactivity.
That loop is also where the example shows off **component cells**. Instead of putting plain text in the [DataTable](/components/data-table), each row's `category` and `share` values are full [Badge](/components/badge) components: `{"category": Badge(name, variant=variant), ...}`. A DataTable cell can hold any component, not just a string, so the same `variant` that classifies a category (`destructive` over 40% of spend, `secondary` under 15%) colors both badges consistently. The table still sorts and searches across those columns because it works against the underlying row data.
The [PieChart](/components/pie-chart) is fed a separate `pie_data` projection — `[{"category": name, "cost": cost} ...]` — because charts want raw numbers keyed by `data_key="cost"` and `name_key="category"`, not the formatted badges the table displays. Deriving two shapes from one `expenses` list keeps the donut and the table in agreement while giving each component exactly the structure it expects.
The budget [Alert](/components/alert) at the bottom is rendered unconditionally, but its text is computed from the same totals (`round(total / budget * 100)`), so the warning always reflects the real numbers. In a version with editable expenses you would lift `expenses` into state and let the totals, chart, table, and alert all recompute from a reactive expression instead of fixed Python values.