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
​
date_range
options group
Use date_range to filter data for specific time periods. Accepts predefined ranges (e.g., “last 12 months”), dynamic ranges (e.g., “Last 90 days”), custom date ranges (e.g., “2020-01-01 to 2023-03-01”), or partial ranges (e.g., “from 2020-01-01”, “until 2023-03-01”)Example:
date_range={
  range = "last 7 days"
  date = "string"
}
Attributes:
  • range: string - Time period to filter. Use presets like ‘last 7 days’, dynamic patterns like ‘Last 90 days’, custom ranges like ‘2020-01-01 to 2023-03-01’, or partial ranges like ‘from 2020-01-01’.
    • Allowed values:
      • last 7 days
      • last 30 days
      • last 3 months
      • last 6 months
      • last 12 months
      • previous week
      • previous month
      • previous quarter
      • previous year
      • this week
      • this month
      • this quarter
      • this year
      • next week
      • next month
      • next quarter
      • next year
      • week to date
      • month to date
      • quarter to date
      • year to date
      • all time
  • date: string - Date column to filter on. Required when the data has multiple date columns.
​
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}}