Evidence Data Components

When to use

Invoke when the user asks to:

• Add a data table, metric card, or delta indicator to a page
• Display a single value, KPI, or change metric
• Use BigValue, DataTable, Delta, or Value components

Evidence Data Display Components

Quick Reference

All components accept a query result via data={query_name} (curly braces required).

BigValue

Displays a large metric value in a card. Multiple BigValue components placed adjacently auto-align into a row.

Minimal syntax

<BigValue data={orders} value=num_orders />

Common props

Example — metric card with MoM comparison

<BigValue
  data={orders_with_comparisons}
  value=num_orders
  title="Orders"
  comparison=order_growth
  comparisonFmt=pct1
  comparisonTitle="vs. Last Month"
/>

Example — metric card with sparkline

<BigValue
  data={orders_with_comparisons}
  value=sales
  fmt=usd0
  sparkline=month
  comparison=sales_growth
  comparisonFmt=pct1
  comparisonTitle="MoM"
/>

Example — non-delta comparison (just shows the raw prior value)

<BigValue
  data={orders_with_comparisons}
  value=num_orders
  comparison=prev_month_orders
  comparisonTitle="Last Month"
  comparisonDelta=false
/>

Full BigValue prop reference

Data props

Comparison props

Sparkline props

DataTable

Displays a richly formatted, paginated table. Without any Column children it renders all query columns automatically.

Minimal syntax

<DataTable data={orders} />

With explicit columns

<DataTable data={orders} search=true sort="sales desc">
  <Column id=category />
  <Column id=item />
  <Column id=sales fmt=usd />
</DataTable>

Example — total row with weighted mean

<DataTable data={countries} totalRow=true rows=5>
  <Column id=country />
  <Column id=gdp_usd totalAgg=sum />
  <Column id=gdp_growth totalAgg=weightedMean weightCol=gdp_usd fmt=pct2 />
  <Column id=population totalAgg=mean fmt='#,##0"M"' />
</DataTable>

Example — grouped accordion with subtotals

<DataTable data={orders} groupBy=state subtotals=true totalRow=true>
  <Column id=state />
  <Column id=category totalAgg="" />
  <Column id=orders />
  <Column id=sales fmt=usd />
  <Column id=growth contentType=delta fmt=pct1 totalAgg=weightedMean weightCol=sales />
</DataTable>

Example — color scale + delta + sparkline columns

<DataTable data={categories}>
  <Column id=category />
  <Column id=value_usd contentType=colorscale colorScale=positive />
  <Column id=yoy contentType=delta fmt=pct1 title="Y/Y Chg" />
  <Column id=sales contentType=sparkline sparkX=date sparkY=sales />
</DataTable>

Full DataTable prop reference

Table-level props

Grouping props

Column component

<Column id=column_name title="Display Name" fmt=usd align=right />

Base Column props

contentType=delta props

contentType=colorscale props

contentType=sparkline / sparkarea / sparkbar props

Sparklines require an array column built with ARRAY_AGG({'date': date, 'value': val}) in DuckDB.

contentType=bar props

contentType=link props

contentType=image props

Delta

Displays an inline colored up/down change indicator, suitable for embedding within prose or sentence-level text.

Minimal syntax

Revenue is <Delta data={growth} column=revenue_growth fmt=pct1 /> vs last month.

Common props

Example — chip style with neutral band

<Delta data={growth} column=neutral fmt=pct1 chip=true neutralMin=-0.02 neutralMax=0.02 />

Example — inverted sentiment (down is good), symbol on left

<Delta data={costs} column=cost_change fmt=pct1 downIsGood=true symbolPosition=left chip=true />

Full Delta prop reference

Value

Displays a single formatted value from a query, inline within markdown text. Defaults to the first row of the first column.

Minimal syntax

<Value data={query_name} />

With column and row

<!-- row is zero-indexed -->
<Value data={monthly_orders} column=orders row=6 />

Common props

Example — inline sentence with aggregation and formatting

Average order value is <Value data={orders} column=sales agg=avg fmt=usd0 />.

Example — draft placeholder before the query exists

Revenue was <Value placeholder="$X.XM" />, up <Value placeholder="X%" /> year-over-year.

Example — red negatives with custom color

Margin delta: <Value data={report} column=margin_delta fmt=pct1 redNegatives=true />

Full Value prop reference

*data is not required when placeholder is used.

Format Codes (common)

Full format reference: /core-concepts/formatting

Parallelisation

Safe — writes only to .md page files.