Searching Table based on input value

The Table component allows you to view and interact with your data. Since your data may contain a large number of records, you may want to add a search bar to filter the data by a certain column/columns. Let's find out how you can do that.

Here, we talk about Table and Text input components.

To search the Table:

1. Drag a Text input component and drop it above the Table.

2. Add a descriptive label or placeholder for the Input.

It's a good practice to rename components so that they have a unique identifier, and you don't confuse them in the process of building your app. For example, we'll rename the Text input component here to productCode.

1. Next, scroll down to its Triggers section and assign the action that loads your data to the On Change trigger.

2. For the next step, you need add a filter to your load data action to see only the records corresponding to a certain criteria.

3. Go to the action - set a column that will be used for filtering and reference the input value as the {{ui.inputName.value}} variable.

Done! Now, anytime you insert a value into the input, the action will be executed. It will process the filter criteria and return only the required values displayed in the Table.