Filter / Search Table based on Input value

You have created a new project and added a Table to view and interact with your data. Now, let’s add a search bar to be able to filter the data by a certain column/columns.

Find an Input component and drag-and-drop it above the Table.

Let’s configure the Input to search for the records by certain criteria. For instance, for the Products table, we would like to search for a product by a Product Code. Start by adding a descriptive placeholder for the search bar on the Appearance tab.

Adding Placeholder

Now, you can configure the Input to return the data based on a certain trigger. Follow the below steps.

Navigate the Trigger tab. We would like the search bar to return the table records upon the changes on the Input component. By default, the input name will be set to ”input”. You could leave it as is, but if you are going to add more inputs, we’d recommend renaming it, so you have a unique identifier and don’t get confused later by the input values. In our example, we’ll rename the input to “productCode

Changing Input name

Select the “On Change” trigger and choose an action that loads the data to your selected Table. With that, once you make any changes to the Input - type or paste any values - the load action step will be executed.

However, the action itself does not filter the data. And since we only need to see the records corresponding to certain criteria, let’s add filtering to reduce the amount of the returned values.

To do so, proceed to the Actions pane and add a new Filter. Set a column that should be used for filtering, specify the operator depending on the desired outcome (like), and reference an input value as a variable - {{ ui.inputName.value}}

Adding input.value filter

Now, anytime you insert a value into the input, the action is executed. It processes the filter criteria and returns only the required values, that are displayed in the Table.

Filtering data by Product Code in the Table