Filter table with options picker

Try it out!

Scenario

The Table component allows you to use the head of each column as a search field, however there are cases 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. Download the following .csv file containing the sample data for this guide https://drive.google.com/file/d/1Q4l1QJ1OaR_G3P65JVhSjw2qoMR0FP6m/view?usp=sharing

2. In the Data tab of your Budibase app, click "Create new table", and select the "Create a Table from a CSV or JSON file" to upload the sample data. You may need to reject columns that have been unsuccessfully imported, and choose a display column.

   1. 

3. You may need to reject columns that were unsuccessfully imported, and select a Display Column.

   

4. When the data has been successfully imported, you should see a table of sample sales data populated in the Data Tab.

5. Head to the Design section, and create a new blank screen. Add a new Table component, and set the Data option to Sales Data.

   

6. Next, add a Form component* and add an Options Picker as a child of the form.
   *Form components are not to be confused with Form Blocks

7. In the settings of the Options Picker, you'll need to add a field value, and you should add a label - we'll set both to "Region".

8. Set the Options Source to Custom.

   

9. click 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

      

10. Head back to the Table settings, and add a filter.

    

11. Once the filter is set, you'll be able to select a region from the dropdown from within the builder, but to fully test you should click the preview button to take a closer look.

You may also decide that you want to filter by multiple region, for example when looking for sales in Europe and Asia - In this case, you should use a Multi-Select Picker component, and your filter should use the "Is In" operator.

---

App export

Downloads may take a few seconds.