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.
Examples
Button Group using Options from a Query
Selected:
<ButtonGroup
data={categories}
name=category_picker
value=category
/>
Selected: {inputs.category_picker}With a Title
Select a Category
Selected:
<ButtonGroup
data={categories}
name=category_selector
value=category
title="Select a Category"
/>
Selected: {inputs.category_selector}With a Default Value
Selected: Cursed Sporting Goods
<ButtonGroup
data={categories}
name=selected_button1
value=category
defaultValue="Cursed Sporting Goods"
/>
Selected: {inputs.selected_button1}With Hardcoded Options
Selected:
<ButtonGroup name=hardcoded_options>
<ButtonGroupItem valueLabel="Option One" value="1" />
<ButtonGroupItem valueLabel="Option Two" value="2" />
<ButtonGroupItem valueLabel="Option Three" value="3" />
</ButtonGroup>
Selected: {inputs.hardcoded_options}With Hardcoded Options and Default Value
Selected: 2
<ButtonGroup name=hardcoded_options_default>
<ButtonGroupItem valueLabel="Option One" value="1" />
<ButtonGroupItem valueLabel="Option Two" value="2" default />
<ButtonGroupItem valueLabel="Option Three" value="3" />
</ButtonGroup>
Selected: {inputs.hardcoded_options_default}Alternative Labels
Selected:
<ButtonGroup
data={categories}
name=alternative_labels_selector
value=category
label=short_category
/>
Selected: {inputs.alternative_labels_selector}Filtering a Query
Loading...
<ButtonGroup
data={categories}
name=category_button_group
value=category
/>
<DataTable data={filtered_query} emptySet=pass emptyMessage="No category selected"/>Style Buttons as Tabs
Selected:
<ButtonGroup
data={categories}
name=buttons_as_tabs
value=category
display=tabs
/>
Selected: {inputs.buttons_as_tabs}Style Buttons as Tabs: With Hardcoded Options
Selected:
<ButtonGroup name=button_tabs_hardcoded_options display=tabs>
<ButtonGroupItem valueLabel="Option One" value="1" />
<ButtonGroupItem valueLabel="Option Two" value="2" />
<ButtonGroupItem valueLabel="Option Three" value="3" />
</ButtonGroup>
Selected: {inputs.button_tabs_hardcoded_options}ButtonGroup
Options
Required
Name of the button group, used to reference the selected value elsewhere as {inputs.name}
Preset values to use
- Options:
- dates
Query name, wrapped in curly braces
- Options:
- query name
Column name from the query containing values to pick from
- Options:
- column name
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 to display above the button group
- Options:
- string
Sets initial active button and current value
- Options:
- value from button group, e.g. 'Cursed Sporting Goods'
Column to sort options by
- Options:
- column name
- Default:
- Uses the same order as the query in `data`
SQL where fragment to filter options by (e.g., where sales > 40000)
- Options:
- 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
Required
Value to use when the option is selected
Label to display for the option in the dropdown
- Options:
- string
- Default:
- Uses value