# 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.

{% hint style="success" %}
Here, we talk about [Table](/reference/working-with-components/table.md) and [Text input](/reference/working-with-components/text-input.md) components.
{% endhint %}

## 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.

{% hint style="info" %}
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`**.
{% endhint %}

3. Next, scroll down to its **Triggers** section and assign the action that loads your data to the *On Change* trigger.
4. For the next step, you need add a **filter** to your *load data* action to see only the records corresponding to a certain criteria.
5. 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.

{% embed url="<https://demo.arcade.software/bO6PVW1dUMtsJB71dPod?embed=&embed_desktop=inline&embed_mobile=tab&show_copy_link=true>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/concepts/components/work-with-components/filtering-table-based-on-input-value.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.