Table filter by a custom column

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:

  1. 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;
  1. In your table Data field, show the result of this transformer

  2. 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!

1 Like

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:

  1. Custom column
  2. 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!