Dynamically hidden rows in table, without removing rows from query

Is it possible to dynamically hide rows from a table without removing them from table.data?

For example, if the table has 4 rows

ID

1
2
3
4

and users can toggle hiding/showing odd rows. The query could have something equivalent to this in the where clause:

where (
{{show_odds_toggle.value}} = false and id_is_odd = 0
or
{{show_odds_toggle.value}} = true
)

However, this reduces actual table.data to only 2 rows. Is there an equivalent way of showing/hiding rows in the component while preserving the full dataset within table.data?

I believe the table filter is what you're looking for. table.data remains unchanged but only the matching rows are displayed.

Unfortunately from what I can tell there's no way to filter by where value in (array) so you may need to create a filter for each odd row. It doesn't seem to be officially documented but this thread covers it. Table.setFilter() is here!? - #8 by SalmanMaqbool

@kschirrmacher thanks for that, I was able to use the table.setfilterstack to apply UI filtering. Is there a way to incorporate an empty filter using the table.setfilter method?

The below code is what I have tried so far. Ideally, this would return all rows if the user had not selected anything in the id_picker dropdown, but Retool doesn't accept filter rules that differ from the COLUMN / OPERATOR / VALUE pattern.

Are you able to do something like this in your JS and have it run when that dropdown value changes?

if {!dropdown.value}(
   table.resetFilterStack()
)else(
// Generate filter stack here
)
1 Like