Implement Custom Filters with Multiselect List Components to filter New Table Component

App Building
1

Hi,
I'm new to retool and I'm working on an app, I need help on how to implement the custom filters using multiselect lists. I'm using the New Table component as the table which I want to filter and I have my query to filter the table ready and working, I just need help on how I can make the filter to work on the table.

SELECT *
FROM tr_table
WHERE wallet_id = {{walletState.value}}
  AND (type = ANY ({{ multiselect1.value }}) OR {{ multiselect1.value == '' }} )
  AND (category = ANY ({{ multiselect2.value }}) OR {{multiselect2.value == ''}})
  AND (status = ANY ({{ multiselect3.value }}) OR {{ multiselect1.value == '' }});

I will be awaiting your response. Thanks.

2

Are you seeing a result? If so, the table component should repopulate with that result. Can you share a screenshot or two?

3

I can see result only when there is no value for the select options list, I mean if I don't select anything. I'm getting an error of malformed array literal.

scrnli_5_15_2023_4-19-09 PM
scrnli_5_15_2023_4-19-09 PM1277×453 42.7 KB

4

You could try {{ !multiselect1.value }} in stead of {{ multiselect1.value == '' }}

1 Like
5

When the multiselect component is empty its value is an empty array, so you may need to change your check to {{ !multiselect.length }}. You can check the value of the component in the "state" tab of the Retool editor for help debugging!

Screenshot 2023-05-15 at 1.37.43 PM

The team is also working on adding more built-in Filtering functionality to the new Table component to make client-side filtering easier, so stay tuned in a few weeks in case that would be helpful!

1 Like
6

I changed the component to a single option select list, apparently the user may only filter by one of the select options for the three select list.

But I will try this too for learning. Also it's great to know the team is working on the table component would also help if a button could trigger the filter. Also we need to be able to control component with custom React Component.

2 Likes
7

@Nasirullah Excellent! In a few weeks we'll be releasing filtering APIs which you can control via an event handler on a component like a button or text input ("Control Component" > Select your table > "Set filter"), which should cover that use case!

8

This works but you made a mistake, it is {{ !multiselect.value.length }}.

1 Like