Filter table based on values specific column

💬 Queries and Resources
1

Hi there,

I use retool to get data from an API and show this data in a table. The API doesn't have options to filter the returned data on each field and I would like to show a table with records that only have a 'No' in a certain field.

I've been looking at the table properties but I can't seem to find options to add a filter over there, is that correct?

Is there another option where I can add this price-paid='No' filter easily? Or should I add it to this transformer:

return {{ query1.data.bookings }}
.map(({
apartment:{name: appartmentName},
channel:{name: channelName},
...booking}) => {return {...booking, appartmentName, channelName}});

And if so how would I add it there?

Thank for the help!

2

Hey @Industryofcool!

This is definitely possible. You can use table filtering:

https://docs.retool.com/docs/build-tables#sort-filter-and-customize-data-presentation

You can also use JS filtering:

https://docs.retool.com/docs/transformers#filter-an-api-query

Let me know if you're able to get this set up or if you have any questions at all!

3

Is it possible to implement an Excel like of automatic column based filter where I can click the head of column to get a dropdown of all the values in this column and I can select one of them to filter the table based that value?

4

Hi @Wei_Chen,

Unfortunately the "click the head of the column" functionality is not available, and there have been many feature requests around these in the forum.

Something you can do though, is set up your own filter that takes the values DIRECTLY from the table. The data source for the select component would be something like:

{{ _.uniq(table1.data.map (x => x.name) }}

This get's tricky when you have multiple filters as the filters will be showing all options, even though they are not visible in the table due to other filters being applied.

You could use a global function to get the table displayedData, and hide values of filter depending on whether they are visible or not (I just thought of this and I think I may want to implement it myself).

Does that make sense? Hoping this is helpful.

1 Like
5

Hi, @MiguelOrtiz thanks for the advise. Sounds like a doable solution. I will give it a try.

I also tried having a separate multi-selector component of all the column values and have a filter reading from that multi-selector component. UI wise this seems more straightforward if I only have one specific column to filter on.

However, what's still missing for Excel-like function is automatically having Select All and Clear function. Any suggestion to implement that?

6

Just to share what I did eventually for the Select All and Clear function. I enabled the Clear button in the multi-selector. Then added a script on the (one-off) filter so that, if nothing is selected, the filter will assume all the values from the column.

2 Likes