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"
/>

Selected: {inputs.category1.value}

Examples

Selected: Sinister Toys

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

Selected: Sinister Toys

With a Title

Selected: Sinister Toys

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

Selected: {inputs.category3.value}

With a Default Value

Selected: Odd Equipment

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

Selected: {inputs.category4.value}

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>

Selected: {inputs.hardcoded.value}

Alternative Labels

This example uses a column called abbrev, which contains an alternate label for each category

Selected: Sinister Toys

<Dropdown
    data={categories} 
    name=category_abbrev
    value=category_name
    label=abbrev
/>

Selected: Sinister Toys

Multi-Select

When using multi-select dropdowns, you need to use an alternative SQL expression:

where column_name IN ${inputs.my_input.value}

Note:

The use of the IN operator
No single quotes used around the ${}

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

<Dropdown
    data={categories} 
    name=category_multi
    value=category_name
    multiple=true
/>

Selected: {inputs.category_multi.value}

Filtering a Query

Starting with this table of orders:

No Results

Page / 10 10 of 100 records

```sql order_history
select id, order_datetime, category, item, sales  from needful_things.orders
limit 100
```

<DataTable data={order_history}/>

Use this input to filter the results:

Filtered Row Count: 28

No Results

Page / 3 10 of 28 records

<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}'
```

Filtered Row Count: {orders_filtered.length}

<DataTable data={orders_filtered}/>

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']}
/>

Selected: {inputs.category_multi_default.value}

Select all by Default Value with Multiple

Select and return all values in the dropdown list, requires "multiple" prop.

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
/>

Selected: {inputs.category_multi_selectAllByDefault.value}

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, with optional ordering keyword

Options:: column name [ asc | desc ]

Default:: Ascending based on dropdown value (or label, if specified)

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