Filter component automatically triggers table data query despite manual mode

đź’¬ Queries and Resources
1

Hi Retool team and community,

I’m running into an issue with the Filter component in my Retool app. Even though I have set my data query to “Manual”, the table’s data query still fires automatically whenever I interact with the filter component. In other words, I want to control exactly when the query runs (for example, only when I click a “Search” button), but Retool keeps executing it as soon as the filter values change.

Here’s what I’ve tried so far:

  1. Query settings:
  • My main data query (e.g. getUsers) is set to “Manual”.
  • I’ve disabled “Run on page load” and “Run when inputs change”.
  1. Filter component setup:
  • Bound the filter inputs (e.g. text fields, dropdowns) to control the query’s input variables.
  • Wrapped the getUsers query in a JavaScript “Search” button handler:

js

CopiarEditar

getUsers.trigger();
  1. Expected behavior:
  • Retool should wait for me to click the “Search” button before calling getUsers.
  • Changing filter values alone should not trigger the query.
  1. Actual behavior:
  • As soon as I type into a filter or select an option, Retool automatically executes getUsers and refreshes the table.

Has anyone experienced the same? Is there a workaround to prevent the Filter component from auto-running the query when it’s set to manual? Any suggestions or best practices would be greatly appreciated!

—
Thank you in advance for your help!

Filter data in the Table component

2

Hi @Tamara_Rivas_Lagos,

Yes, this can be frustrating with the Filter component in Retool, and you're not alone! The confusion comes from how Retool components bind to queries and evaluate automatically, even when the query is set to "Manual."

Even if your query is set to manual execution, the filter component is likely still bound directly to the table, or your table is bound directly to the query, causing it to auto-refresh when the filter changes.

You could use a variable to hold filter inputs

  • Create a variable (e.g. searchFilters):
  • Add keys like name, role, status, etc.
{
 name: "",
 role: "",
 status: ""
}
  • Bind your Filter component inputs to this searchFilters: {{ searchFilters.value.name }}
  • On “Search” button click:
  additionalScope: {
    name: searchFilters.value.name,
    role: searchFilters.value.role,
    status: searchFilters.value.status
  }});

You could also do something similar, creating a variable storing the data from the query and link the table to the variable.

1 Like
3

Thank you very much. I ended up creating a hidden table to run my queries, automatically generate the columns I need, and prevent any double loading.

1 Like