Dropdown
Creates a dropdown menu with a list of options that can be selected. The selected option can be used to filter queries or in markdown.
To see how to filter a query using a dropdown, see Filters.
Selected: Sinister Toys
<Dropdown
data={categories}
name=category1
value=category_name
title="Select a Category"
defaultValue="Sinister Toys"
/>
Examples
Dropdown using Options from a Query
Selected: Sinister Toys
<Dropdown
data={categories}
name=category2
value=category_name
/>
With a Title
Selected: Sinister Toys
<Dropdown
data={categories}
name=category3
value=category_name
title="Select a Category"
defaultValue="Sinister Toys"
/>
With a Default Value
Selected: Odd Equipment
<Dropdown
data={categories}
name=category4
value=category_name
title="Select a Category"
defaultValue="Odd Equipment"
/>
With Hardcoded Options
Selected: 1
<Dropdown name=hardcoded>
<DropdownOption valueLabel="Option One" value="1" />
<DropdownOption valueLabel="Option Two" value="2" />
<DropdownOption valueLabel="Option Three" value="3" />
</Dropdown>
Alternative Labels
Selected: Sinister Toys
This example uses a column called abbrev
, which contains an alternate label for each category
<Dropdown
data={categories}
name=category_abbrev
value=category_name
label=abbrev
/>
Multi-Select
Selected: (SELECT NULL WHERE 0 /* An Input has not been set */)
<Dropdown
data={categories}
name=category_multi
value=category_name
multiple=true
/>
Filtering a Query
Starting with this table of orders:
Use this input to filter the results:
Filtered Row Count: 28
<Dropdown
data={query_name}
name=name_of_dropdown
value=column_name
/>
```sql filtered_query
select *
from source_name.table
where column_name like '${inputs.name_of_dropdown.value}'
```
Multiple defaultValues
Selected: ('Mysterious Apparel','Sinister Toys')
<Dropdown
data={query_name}
name=name_of_dropdown
value=column_name
multiple=true
defaultValue={['Sinister Toys', 'Mysterious Apparel']}
/>
Select all by Default Value with Multiple
Selected: ('Cursed Sporting Goods','Mysterious Apparel','Odd Equipment','Sinister Toys')
<Dropdown
data={categories}
name=category_multi_selectAllByDefault
value=category_name
title="Select a Category"
multiple=true
selectAllByDefault=true
/>
Select and return all values in the dropdown list, requires "multiple" prop.
Dropdown
Options
- Options:
- query name
- Options:
- column name
- Options:
- value from dropdown | array of values e.g. {['Value 1', 'Value 2']}
- Options:
- boolean
- Default:
- false
- Options:
- boolean
- Default:
- false
- Options:
- column name
- Default:
- Uses the column in value
- Options:
- string
- Options:
- column name [ asc | desc ]
- Default:
- Ascending based on dropdown value (or label, if specified)
- Options:
- SQL where clause
DropdownOption
Options
The DropdownOption component can be used to manually add options to a dropdown. This is useful to add a default option, or to add options that are not in a query.
- Default:
- Uses the value