Using Filter Component Independent of Tables

I'm curious if there's a way to basically borrow the UI for the filter component to construct an arbitrary javascript query.

What I want to do is use a javascript query to get a filtered result of contacts based on the values from another data source. I wrote this code basically hardcoding in to compare based on last login date and status.

So, return contacts that have status of Gold and last login before 2023-09-01, but where that data isn't stored in the contacts data, but from another source. I have this working fine.

But I was wondering if there's a way to use the filter component to build which values to compare and which logic (AND/OR) and pull that into my custom JS query. But it doesn't look like there's a way to dynamically and arbitrarily set the choices the filter component.

It appears that the filter component when you start selecting things creates an object of the selections and that's what I was hoping to use in my JS, but I don't see a way to "push" in the options versus getting them from a table.

The hack I thought was to just create a table that has the filtering values I need and just hide it, but wondering if there's a non-hack way.

1 Like

Hello @jmr1234 ,

Currently, Retool doesn't offer a direct way to borrow the UI of the filter component and construct an arbitrary JavaScript query directly from it. The filter component is primarily designed to operate with table data and does not support dynamic column setting or external inputs. It also doesn't output a SQL/JS-ready string that you could use elsewhere.

You can access and manipulate a JS object representing the currently-selected filters, but converting that object into a query is a manual task. If your fields are fixed, you could manually create inputs for each and then incorporate those in your JS query as needed.

As workarounds, you could create a hidden table with the filter values you need, or use conditional rendering and React state positioning to simulate a filter functionality. You may also create a custom transformer to parse and manipulate your data based on dynamic conditions from another data source.

While Retool supports custom components, if you're comfortable with React, this would provide more flexibility for a dynamic filtering UI.

However, these workarounds might not be as clean or straightforward as using the filter component's intended functionality and could become hard to manage over time. I'm going to share this request with our Product team and have them assess the viability of building this into the Product.

Thank you very much for your feedback - Brett