Skip to main content
Basic Usage

Examples

Basic Usage

Basic Usage

With Explicit Dimensions and Metric

Using Filter in Query

Using Filter in Query

Attributes

string
required
The id of the dimension grid to use in a filters prop
string
required
Name of the table to query
array
Array of column names to display as dimensions. If not provided, auto-detects string columns.
string
default:"count(*)"
SQL aggregation expression (default: count(*))
string
Label displayed above the metric values
string
Format code for the metric values (e.g., “num0”, “usd”, “pct1”). See Value Formatting for available formats.
number
default:"10"
Maximum number of values to show per dimension (default: 10)
boolean
default:"true"
Allow multiple selections per dimension (default: true)
array
Array of filter IDs to apply when querying dimension values
string
SQL WHERE clause to filter data
string
Title displayed above the dimension grid
string
Subtitle displayed below the title
options group
Filter data to a time period. date_range is an OBJECT with range (the period) and optionally date (which column to filter on when the table has more than one). Shape: date_range={ range="last 12 months" date="order_date" }. range accepts predefined values (last 7 days, month to date), dynamic patterns (Last 90 days), custom windows (2020-01-01 to 2023-03-01), or partial ranges (from 2020-01-01, until 2023-03-01). Pass a plain string for range — the whole object is NOT a string.Example:
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:
      • today
      • yesterday
      • 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.
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.

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.

.selected

Returns an object with dimension names as keys and selected values as arrays. Useful for accessing individual dimension selections.

.literal

Returns a human-readable summary of all selections.