# Set Up Search

## Overview

The search feature lets your users quickly filter and find specific records in a [**data table**](/dynamic-components/components/data-table.md). By configuring search, you can customize the user interface, enable searches on hidden data, and set default terms to streamline the user experience. 

<figure><img src="/files/h7SjaWQl9Jw8YIecc4oq" alt=""><figcaption></figcaption></figure>

**Note** that the search box will appear on your live page only after at least one field has been marked as "**Searchable**."

***

## 1. How to Make a Field Searchable

To enable search for a specific column, follow these steps in the editor:

1. Select your Data Table component.
2. Open the Properties panel on the right.
3. Navigate to the Data Mappings section.
4. Click on the specific Column/Field you want users to be able to search.
5. Scroll down to the Searchable attribute and toggle it on.

<figure><img src="https://docs.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FoeJoKfSaRXkhWLEZjmR1%252F2023-01-11_20-57-05qwe.png%3Falt%3Dmedia%26token%3D9b603212-f42e-46ee-9597-4f8f93c3cccf&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=dba3c04c&#x26;sv=2" alt="" width="375"><figcaption></figcaption></figure>

***

## 2. Searching on Non-Visible Data

Sometimes you may want users to find records based on data that isn't displayed in the table (e.g., searching by "ID Number" or "Internal Tags" without showing those columns).

1. Select the **Data Table**.
2. Open the **Data Mappings** section in the Properties panel.
3. Locate the **Search Fields** attribute.
4. Select the fields from the dropdown that should be searchable even though they are hidden from the table view.

<figure><img src="/files/jJmVaJ6KuUgY1TyRNDHG" alt="" width="563"><figcaption></figcaption></figure>

***

## 3. Adjusting Search Box Placement and Appearance

Once search is enabled, you can refine how the search box looks and behaves:

* **Placeholder Text**: Change the hint text (e.g., "Search by name or email...") to guide your users.
* **Position**: Move the search box to the left or right of the table header. OR FILL
* **Default Search Value**: Use the `defaultSearchValue` attribute to pre-fill the search box with a specific term. When the table loads, it will automatically filter the data based on this value.

<figure><img src="/files/GNSKwdzcL1ya06Wg7eA0" alt=""><figcaption></figcaption></figure>

***

## 4. Field Type Compatibility

The ability to search depends on the Data Source type you are using. Reference the table below to see which fields are supported:

| Field Type           | Query Data Source | Variable Data Source |
| -------------------- | ----------------- | -------------------- |
| **Lookup Fields**    | ✅ Supported       | ✅ Supported          |
| **Rich Text Fields** | ❌ Not Supported   | ✅ Supported          |

***

## Troubleshooting

<details>

<summary>The Search Box is Missing</summary>

If you cannot see the search input area at the top of your table, check the following:

* **Is at least one field searchable?** The search box is hidden by default if no columns are enabled for search. Go to Data Mappings, click a column, and ensure the Searchable toggle is active.
* **Check the Search Options**: Ensure that the search feature hasn't been accidentally disabled in the general Search properties panel

</details>

<details>

<summary>Results Aren't Appearing for Specific Data</summary>

If you type a term you know exists but the table shows "No results found," verify these settings:

* **The Field-Specific Toggle**: Even if search is "on" for the table, it must be enabled for each specific column you want to search. If you are searching for a "Last Name," make sure the "Last Name" column has the Searchable attribute toggled on.
* **Hidden Data Search**: If you are trying to search for data that isn't a visible column (like an ID number), ensure that field is manually added to the Search Fields attribute in the Data Mappings section.
* **Case Sensitivity**: Depending on your backend configuration, search might be case-sensitive. Try matching the exact capitalization of the data (e.g., "Admin" vs "admin")

</details>

<details>

<summary>Searching Works for Some Fields but Not Others</summary>

This is usually related to the Data Source type being used. Check your source settings

</details>

<details>

<summary>The Default Search Value Isn't Loading</summary>

If you set a `defaultSearchValue` but the table shows all records on load:

* **Syntax Check**: Ensure there are no extra spaces or hidden characters in the `defaultSearchValue` attribute.
* **Field Mapping**: Ensure the term you set as default exists within a field that has been marked as Searchable.

</details>


---

# 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.avonnicomponents.com/dynamic-components/tutorials/components/data-table/set-up-search.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.