Skip to main content

​
Example

{% input_tabs
    id="category_filter"
    data="demo_daily_orders"
    value_column="category"
/%}

​
With Static Options

{% input_tabs id="status_filter" %}
    {% option value="active" label="Active" /%}
    {% option value="inactive" label="Inactive" /%}
    {% option value="pending" label="Pending" /%}
{% /input_tabs %}

​
Attributes

​
id
String
required
The id of the input tabs to be used in a filters prop
​
data
String
Name of the table to query
​
filters
Array
default:"[]"
Array of filter IDs to apply when querying for options
​
value_column
String
Column name to use as the value for each option, and the column to filter by when this input tabs’ id is used in the filters prop of a chart
​
label_column
String
Column name to use as the label for each option
​
initial_value
String
Initial selected value (single selection only)
​
variant
String
default:"default"
Visual style variant: “default” for underline style, “well” for button-style tabs
​
select_first
Boolean
default:"true"
Automatically select the first option when the component loads (defaults to true)
​
order
String
Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)
​
where
String
Custom SQL WHERE condition to apply to the query. For date filters, use date_range instead.
​
width
Number
Set the width of this component (in percent) relative to the page width

​
Available Filter Properties

When you reference a input tabs filter in inline queries using the {{filter_id.property}} syntax, the following properties are available:

​
.filter

Returns a complete SQL filter expression ready to use in WHERE clauses. Returns true when no value is selected.

​
.selected

Returns the selected value wrapped in quotes, suitable for SQL comparisons. Returns an empty string when no value is selected.

​
.literal

Returns the raw unescaped selected value, useful for dynamic column selection or other non-quoted uses.

​
Allowed Children