Home Components Button Group

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.

Selected: 

<ButtonGroup 
    data={categories} 
    name=selected_category 
    value=category
/>

Selected: {inputs.selected_category}

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

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

```sql filtered_query
select 
    category, item, sum(sales) as total_sales
from needful_things.orders
where category like '${inputs.category_button_group}'
group by all
```

<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

name
Required
Name of the button group, used to reference the selected value elsewhere as {inputs.name}
preset
Preset values to use
Options:
dates
data
Query name, wrapped in curly braces
Options:
query name
value
Column name from the query containing values to pick from
Options:
column name
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 button group
Options:
string
defaultValue
Sets initial active button and current value
Options:
value from button group, e.g. 'Cursed Sporting Goods'
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
display
Displays tabs with button functionality
Options:
Default:
buttons

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

value
Required
Value to use when the option is selected
valueLabel
Label to display for the option in the dropdown
Options:
string
Default:
Uses value
default
Sets the option as the default
Options:
Default:
false
hideDuringPrint
Hide the component when the report is printed
Options:
Default:
true