Adding/Removing filters using a filter component

App Building
1
  • Goal:
    I have a table and a filter component. I have several buttons to use as "quick filters". Example:
    Table shows movies. A quick filter is "movies I have seen", which sets the filter on the table to
[
    { columnId: "seen", operator: "=", value: 1 }    
]

This works great, but every button press wipes out the current filter and replaces it.

I want to be able to add to the filter. I.e. a push function.

I am using this approach:
image

I can't quite figure out how to set the filter to "current filters plus new filters". I tried iterating over the current filters, copying to a variable, etc. but I am a bit stuck. Am I going about this the wrong way?

2

Hi @Freyr_Gudmundsson,

I think you can achieve this by modifying the table filter directly, which defaults to being additive. The Filter component is linked to the table, so it will stay in sync without having to do anything to it.

In your click handler, change it from "Control Component" to "Run Script" and use something like this (substitute your table name).

image

That's

table3.setFilter( {  columnId: "seen", operator: "=", value: 1 } )

If you have different buttons / click events that have some filter objects attached, Retool will attach them to the end of the filter stack. You can optionally give them ID's when you add them, and then you can reference them by ID if you want to update a specific one.

1 Like
3

Hi, thanks for the answer!

I am able to add a filter directly to the table with the code you provided. However, the filter component does not stay in sync.

I'm currently experimenting with .push() but not having luck there either.

4

There is a function on the table called MovieTable.updateLinkedFilter() that seems to do the trick. Thanks for getting me on the right track!

5

Now my challenge is this. It seems I can only add a single filter per event. If I have a script like this:

MovieTable.setFilter({ columnId: "year", operator: "<", value: "2000"});
MovieTable.setFilter({ columnId: "year", operator: ">=", value: "1990"});
MovieTable.updateLinkedFilter();

only the second filter is saved in the table and filter component.

6

Hi @Freyr_Gudmundsson! Have you tried using the setFilterStack function? It will allow you to set the entire filterstack property as once:

Also I wonder if adding an await to the beginning of the setFilter calls would help at all? It's possible that the events are run in too quick of succession that the table does not have the updated state when it runs the second line in the script

1 Like
7

Awesome thank you! I knew there had to be a blindingly obvious way to do that :sweat_smile: