Category: Widget
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Set the Search Field of a Table in Appsmith

Issue

I need to access a page with a large table, where selecting a row updates a detail table. I can enter this page normally, but I also need to come from a different page with a stored value search. I can pass the stored value and query the DB, but I want to show the user that the table is only showing a subset of results. Is there a way to set the value shown in the search box of a table from Javascript?

Resolution

When working with large datasets in Appsmith, it’s common to use the Table widget’s search box to help users understand that they are viewing a filtered subset of data. A frequent requirement is to navigate from one page to another while preserving a search value and visually reflecting that value in the table’s search field.

This article explains how to achieve that behavior using Appsmith’s supported widget properties and JavaScript bindings.

Use Case

  • You have a source page where a user selects or stores a value.
  • You navigate to another page containing a large table.
  • The table is already filtered using that stored value.
  • You want the table’s search box to display the value so users know the data is filtered.

Recommended Approach

Appsmith does not support imperatively changing widget UI fields (such as the table search input) directly through JavaScript at runtime.

The supported and recommended solution is to bind the value to the Default Search Text property of the Table widget. This keeps the application declarative and consistent with Appsmith’s framework.

Step-by-Step Solution

1. Store the Search Value

When navigating from the previous page, store the value using storeValue().

storeValue("tableSearch", selectedValue);

This can be done from a button action, a table row click, or a JSObject function.

2. Bind the Value to the Table Widget

On the destination page:

  1. Select the Table widget.
  2. Open the Search & Filters section.
  3. Set Default Search Text to the following binding:
{{ appsmith.store.tableSearch }}

3. Resulting Behavior

  • The table loads with filtered results.
  • The search input visibly shows the stored value.
  • Users clearly understand they are viewing a subset of the data.
  • Row selection can continue to drive updates to a detail table.

Notes and Best Practices

  • Default Search Text is evaluated when the widget loads or refreshes.
  • If the stored value changes, re-trigger the table refresh or page navigation to reapply the search text.
  • This pattern works well with master–detail layouts and multi-page navigation.

Related Documentation