Home Components Dropdown

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: (SELECT NULL WHERE 0 /* An Input has not been set */)

<Dropdown 
    data={categories} 
    name=category1 
    value=category_name 
    title="Select a Category" 
    defaultValue="Sinister Toys"
/>

Examples

Selected: (SELECT NULL WHERE 0 /* An Input has not been set */)

<Dropdown 
    data={categories} 
    name=category2 
    value=category_name 
/>

With a Title

Selected: (SELECT NULL WHERE 0 /* An Input has not been set */)

<Dropdown 
    data={categories} 
    name=category3 
    value=category_name 
    title="Select a Category" 
    defaultValue="Sinister Toys"
/>

With a Default Value

Selected: (SELECT NULL WHERE 0 /* An Input has not been set */)

<Dropdown
    data={categories} 
    name=category4
    value=category_name
    title="Select a Category"
    defaultValue="Odd Equipment"
/>

With Hardcoded Options

Selected: (SELECT NULL WHERE 0 /* An Input has not been set */)

<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: (SELECT NULL WHERE 0 /* An Input has not been set */)

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:

ID Order Datetime Category Item Sales
1 2020-06-08 Sinister Toys Model Racehorse 12.3
2 2019-12-11 Odd Equipment Microscope 129.6
3 2020-12-25 Sinister Toys Baseball Card 3.0
4 2021-04-27 Mysterious Apparel Mystic Pendant 8.0
5 2020-03-19 Cursed Sporting Goods Running Shoes 55.0
6 2021-01-04 Sinister Toys Model Racehorse 13.0
7 2019-07-08 Cursed Sporting Goods Fishing Rod 89.0
8 2021-09-19 Mysterious Apparel Mystic Pendant 8.0
9 2019-11-29 Cursed Sporting Goods Fishing Rod 89.0
10 2019-12-11 Odd Equipment Lamp 34.0
No Results

Use this input to filter the results:

Filtered Row Count: 0

Loading... 
<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: (SELECT NULL WHERE 0 /* An Input has not been set */)

<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: (SELECT NULL WHERE 0 /* An Input has not been set */)

<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

name
Required
Name of the dropdown, used to reference the selected value elsewhere as {inputs.name.value}
data
Query name, wrapped in curly braces
Options:
query name
value
Column name from the query containing values to pick from
Options:
column name
multiple
Enables multi-select which returns a list
Options:
Default:
false
defaultValue
Value to use when the dropdown is first loaded. Must be one of the options in the dropdown. Arrays supported for multi-select.
Options:
value from dropdown | array of values e.g. {['Value 1', 'Value 2']}
selectAllByDefault
Selects and returns all values, multiple property required
Options:
Default:
false
noDefault
Stops any default from being selected. Overrides any set `defaultValue`.
Options:
boolean
Default:
false
disableSelectAll
Removes the `Select all` button. Recommended for large datasets.
Options:
boolean
Default:
false
label
Column name from the query containing labels to display instead of the values (e.g., you may want to have the drop-down use `customer_id` as the value, but show `customer_name` to your users)
Options:
column name
Default:
Uses the column in value
title
Title to display above the dropdown
Options:
string
order
Column to sort options by
Options:
column name
Default:
Uses the same order as the query in `data`
where
SQL where fragment to filter options by (e.g., where sales > 40000)
Options:
SQL where clause
hideDuringPrint
Hide the component when the report is printed
Options:
Default:
true

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.

value
Required
Value to use when the option is selected
valueLabel
Label to display for the option in the dropdown
Default:
Uses the value