Filtering Gallery based on Table above?

Hello! Love retool. Built a pretty cool little digital archive for my grandpa using an underlying G-Sheet as it's source data.

I have a pretty simple table that displays the Gsheet data that leans on a text input the 'Search' the database.

What I'm trying to do is link a gallery below that table to display only images that are in the filtered table above. Possible? Any guidance as to where I should be looking? :pray:

Hi @Alex_Blunk! Cool app use case :sunglasses: thanks for reaching out

There are a few ways to do this with Javascript, so I'm happy to step into your account to take a look if you'd like.

First, is the table already filtering out records that don't match? If not, you could do this by adding a query transformer that references the search bar like this:

Then, since the table is filtered, you could reference tableName.data in the gallery

Another idea is to use a Query Json with SQL query type, like this community example. Again, it'll filter the table dynamically so you'd be able to reference the table in your gallery.

Let me know if one of these ideas will work!

Thanks Tess! Let me try that out and get back to you.

@Tess

Getting these funky errors.. any thoughts? Setup that transformer

return data.filter(x=> (x.name).toLowerCase().includes(({{search_term.value}}).toLowerCase()))

based on the shot you shared.. and then popped in {{table1.data}} in the data source for the gallery

Does it matter that this is how I'm filtering the table below? Is there some sort of unique functionality that 'Search term' houses..

image

Hmm, it seems like the user is typing something into the search before the table query has run. From what I can tell, there is no data yet, so the transformer fails. Transformers trigger immediately upon inputs change.

You could try to resolve the errors by modifying the transformer to check if there is data using optional chaining. return data?.filter(x=> (x.name).toLowerCase().includes(({{search_term.value}}).toLowerCase()))

The search term functionality searches across the table's columns and filters without the need for a transformer