Skip to main content
Basic Usage 
{% dimension_grid
    id="product_filter"
    data="demo_daily_orders"
/%}

​
Examples

​
Basic Usage

Basic Usage 
{% dimension_grid
    id="product_filter"
    data="demo_daily_orders"
/%}

​
With Explicit Dimensions and Metric

{% dimension_grid
    id="sales_filter"
    data="orders"
    dimensions=["category", "region"]
    metric="sum(sales)"
    fmt="usd"
    limit=5
/%}

​
Using Filter in Query

Using Filter in Query 
{% dimension_grid id="order_filter" data="orders" /%}

```sql filtered_orders
select * from orders
where {{order_filter.filter}}
```

​
Attributes

​
id
string
required
The id of the dimension grid to use in a filters prop
​
data
string
required
Name of the table to query
​
dimensions
array
Array of column names to display as dimensions. If not provided, auto-detects string columns.
​
metric
string
default:"count(*)"
SQL aggregation expression (default: count(*))
​
metric_label
string
Label displayed above the metric values
​
fmt
string
Format code for the metric values (e.g., “num0”, “usd”, “pct1”). See Value Formatting for available formats.
​
limit
number
default:"10"
Maximum number of values to show per dimension (default: 10)
​
multiple
boolean
default:"true"
Allow multiple selections per dimension (default: true)
​
filters
array
Array of filter IDs to apply when querying dimension values
​
where
string
SQL WHERE clause to filter data
​
title
string
Title displayed above the dimension grid
​
subtitle
string
Subtitle displayed below the title
​
width
number
Set the width of this component (in percent) relative to the page width

​
Using the Filter Variable

Reference this filter using {{filter_id}}. The value returned depends on where you use it.
ContextDefault PropertyNo SelectionResult

​
Available Properties

You can also access specific properties using {{filter_id.property}}:

​
.filter

Returns a complete SQL filter expression combining all dimension selections. Returns true when no values are selected. 
{% dimension_grid id="dim_filter" data="orders" /%}

```sql filtered_orders
select * from orders
where {{dim_filter.filter}}
```

​
.selected

Returns an object with dimension names as keys and selected values as arrays. Useful for accessing individual dimension selections. 
{% dimension_grid id="dim_filter" data="orders" dimensions=["category", "region"] /%}

Selected categories: {{dim_filter.category}}
Selected regions: {{dim_filter.region}}

​
.literal

Returns a human-readable summary of all selections. 
{% dimension_grid id="dim_filter" data="orders" /%}

Active filters: {{dim_filter.literal}}