Filter table with options picker

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.

---

Steps

1. Add component: Table block
2. In the Settings Panel select 'Country' as a Search field
3. Eject block

4. Above the Stringfield in the Component Tree, Add component: Options Picker
5. Select 'Region' as the Field name and type 'Region' into the Placeholder field
6. Select 'Custom' under the Options source setting
7. Define options: Add Option for each region:
   1. Australia and Oceania
   2. Central America and the Caribbean
   3. Middle East and North Africa
   4. Sub-Saharan Africa
   5. Asia
   6. North America
   7. 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.

8. Click on the Styles tab and set Width to '192px'

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

---

App export

Downloads may take a few seconds.