Add filtering
This guide will show you how to add a dropdown filter to a table
Dropdown filters are a common way to filter data that's usually displayed in a list format. By selecting an option from the dropdown filter, the data within the list updates to only show records that match with your selection. Adding a dropdown filter is a similar process to adding search to a table.

Prerequisites

For Filters to work, you need data. You may already have data, but if you don't you can use the data within the Sales CSV below.
When creating your new table in the data section, call it Sales. When uploading the CSV, please change the Region data type to Options (This is what we will use to filter our data).
1000 Sales Records.csv
122KB
Text
Sales.csv

Guide

After uploading the data above, Budibase autogenerated us 3 screens in the design section. Our table was called Sales, so our screens are:
    /sales/
    /sales/:id
    /sales/new/row

Steps

    Click on the /sales/ screen
    Add the Form component
    In the settings panel, under Schema, select your table
    Move the new Form component above the New Data Provider component
    Add a Options Picker component and make sure it is nested under the Form component
    In the settings panel, under 'Field', select the field you would like to filter (in our case, it's 'Region') and then add a placeholder (for those using the CSV above, I used 'Filter region' for my placeholder)
    In the navigation tree, move the New Data Provider component underneath our New Options Picker component
    In the settings panel for the New Data Provider component, click the Define Filters button
    Click add filter
    Select the column you would like to filter (in our case, Region)
    Select the value dropdown, and select Binding
    Click the lightning bolt on the last input
    Select {{ New Form.Fields.[[column]] }}
    Click Save, and Save again
And we're done. We've successfully added a dropdown filter to a table.
Last modified 1mo ago
Export as PDF
Copy link