Skip to main content

Button Group

Creates a group of single-select buttons for quick filtering

To see how to filter a query using a Button Group, see Filters.

Button Group
<ButtonGroup
data={query_name}
name=name_of_button_group
value=column_name
/>

Examples

Button Group using Options from a Query

Button Group
<ButtonGroup
data={query_name}
name=name_of_button_group
value=column_name
/>

With a Title

Button Group With Title
<ButtonGroup
data={query_name}
name=name_of_button_group
value=column_name
title="Select a Category"
/>

With a Default Value

Button Group With Default Value
<ButtonGroup
data={query_name}
name=name_of_button_group
value=column_name
title="Select a Category"
>
<ButtonGroupItem valueLabel="All Categories" value="%" />
</ButtonGroup>

Note that "%" is a wildcard character in SQL that can be used with where column_name like '${inputs.name_of_button_group}' to return all values.

With Hardcoded Options

Button Group Hardcoded
<ButtonGroup name=name_of_button_group>
<ButtonGroupItem valueLabel="Option One" value="1" />
<ButtonGroupItem valueLabel="Option Two" value="2" />
<ButtonGroupItem valueLabel="Option Three" value="3" />
</ButtonGroup>

Alternative Labels

Button Group Alternative Labels
<ButtonGroup
data={query_name}
name=name_of_button_group
value=column_name
label=column_name_containg_label
/>

Filtering a Query

<ButtonGroup
data={query_name}
name=name_of_button_group
value=column_name
/>

```sql filtered_query
select *
from source_name.table
where column_name like '${inputs.name_of_button_group}'
```

ButtonGroup

Options

NameDescriptionRequired?OptionsDefault
nameName of the button group, used to reference the selected value elsewhere as {inputs.name}Yes--
presetPreset values to use-"dates"-
dataQuery name, wrapped in curly braces-query name-
valueColumn name from the query containing values to pick from-column name-
labelColumn 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)-column nameUses the column in value
titleTitle to display above the button group-string-
orderColumn to sort options by-column nameUses the same order as the query in `data`
whereSQL where fragment to filter options by (e.g., where sales > 40000)-SQL where clause-

ButtonGroupItem

The ButtonGroupItem component can be used to manually add options to a button group. This is useful if you want to add a default option, or if you want to add options that are not in a query.

Options

NameDescriptionRequired?OptionsDefault
valueValue to use when the option is selectedYesstring-
valueLabelLabel to display for the option in the dropdown-stringUses value