Skip to main content

​
Example

{% dropdown
    id="category_filter"
    data="demo_daily_orders"
    value_column="category"
/%}

​
Attributes

​
id
String
required
The id of the dropdown to be used in a filters prop
​
data
String
Name of the table to query
​
filters
Array
default:"[]"
Array of filter IDs to apply when querying for dropdown options
​
value_column
String
Column name to use as the value for each option, and the column to filter by when this dropdown’s id is used in the filters prop of a chart
​
label_column
String
Column name to use as the label for each option
​
options
Array
List of options to display in the dropdown
​
title
String
Text displayed above the dropdown
​
info
String
Information tooltip text
​
icon
String
Icon to display in the dropdown trigger
​
initial_value
String | Array
Initial selected value(s)
​
placeholder
String
Placeholder text displayed when no value is selected
​
search
Boolean
default:"false"
Includes a search input within the dropdown menu
​
multiple
Boolean
default:"false"
Allows multiple selections
​
clear
Boolean
default:"true"
Includes a clear button to unselect the selected value(s)
​
order
String
Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)
​
width
Number
Set the width of this component (in percent) relative to the page width

​
Available Filter Properties

When you reference a dropdown filter in inline queries using the {{filter_id.property}} syntax, the following properties are available:

​
.filter

Returns a complete SQL filter expression ready to use in WHERE clauses. Returns true when no value is selected.

​
.selected

Returns the selected value wrapped in quotes, suitable for SQL comparisons. Returns an empty string when no value is selected. Use with a fallback value.

​
.literal

Returns the raw unescaped selected value, useful for dynamic column selection or other non-quoted uses.

​
Example Usage

{% dropdown
  id="category_filter"
  data="products"
  value_column="category"
  title="Product Category"
/%}

```sql filtered_products
select * from products
where {{category_filter.filter}}
For more details on using filters in SQL queries, see the Filters documentation.

​
Allowed Children

⌘I