I have a table that contains custom dropdown columns. I can't seem to filter by these columns. How do I support filtering by these columns? Thanks!
Hey @brycehemme, happy to help! You should be able to access the data in your custom columns via the columnMappers
table property:
You may need to set up custom filters that reference the columnMapper data as needed.
As a follow up here, custom columns just exist on the frontend, so you'll need to either have the column-to-filter-by come from the backend db or we can write a JS transformer to add the column-to-filter-by in after the db, but before the table component.
Here's a quick set up on my end:
- Make sure your data is an array of objects so we can loop through it. In Retool, SQL queries return their data as an object of arrays and REST API/Google Sheets queries return their data as an array of objects.
https://docs.retool.com/docs/javascript-in-retool#data-conversion-1
Then write a transformer to loop through your data and add a new column.
Here's my code:
const data = {{ formatDataAsArray(getProducts.data) }}
data.forEach(row => {
row.new_row = row.rating * 100
return row;
})
return data;
-
In your table Data field, show the result of this transformer
-
You can now filter based on the new column using the table's filter button!
Let me know if you have any questions about this at all!
Victoria this is fantastic!
I wanted to create a custom column that was a formatted combination of three other text columns - so, like, "Person - Town (Country)" in one column, to save showing 3 separate ones.
I thought of two approaches:
- Custom column
- Mapped value - e.g. in the Person column, have a mapped value of "{{self}} - {{currentRow.town}} ({{currentRow.country)"
The issue is that I wanted a user to be able to filter on that column in the table; approach 1 doesn't let you filter, and approach 2 only lets you filter on the {{self}}, not on the mapped value (which is obviously what the user sees).
So your solution worked for me.
However, IMO this is a hacky workaround - maybe you could add an option to filter on the mapped value vs. the key (i.e. {{self}})...
Hey @Henry14! So glad to hear the solution worked for you.
I hear you on this being a hacky workaround. Adding your feedback to the current ticket we have to make this experience better!