Filter table with options picker
Filter by region dropdown or country name
Try it out!
Scenario
The Table block allows you to easily select and add search fields. These search fields will automatically detect the type of the underlying data field, so for example a Text column will map to a Text field.
There are cases however were you may want to use different type of field for searching, such as an Options picker.
This guide will show you how to add search that will display results for a selected Region from a preset list of values, or countries matching a Country field.
Challenge:
★★☆☆☆
★★☆☆☆
Steps
Add component
: Table block- In the Settings Panel select 'Country' as a Search field
Eject block

- Above the Stringfield in the Component Tree,
Add component
: Options Picker - Select 'Region' as the Field name and type 'Region' into the Placeholder field
- Select 'Custom' under the Options source setting
Define options
:Add Option
for each region:- Australia and Oceania
- Central America and the Caribbean
- Middle East and North Africa
- Sub-Saharan Africa
- Asia
- North America
- Europe
Alphabetical sort
Options picker have the Alphabetical sort setting checked by default, therefore options can be added in any order and still be presented correctly.
- Click on the
Styles
tab and set Width to '192px'

- Click on the Dataprovider and click the Filtering setting button
- Select 'Match any filter' under Behaviour
Add filter
: "Region Equals Binding":{{ Form.Fields.Region }}
Save
andPreview

App export
Downloads may take a few seconds.
Updated 3 months ago