Dynamic column label with Filter Component

[Simozilla]

1. My goal:

   Hello, i’m building a table that use the Filter Component to perform advanced filtering. The filter component is linked with a table that contains some columns with dynamic labels, such as: {{condition ? “foo“ : “bar”}}

2. Issue:

   When I open the Filter Component to add a filter, the field selection dropdown displays the literal expression of the label instead of its computed value.

   Expected: foo
   Obtained: {{condition ? “foo“ : “bar”}}

3. Steps I've taken to troubleshoot:

   1. Create a table (table1)
   2. Create a Filter (filter1)
      1. Link together table1 with filter1
   3. Make a label of one of the columns dynamic
   4. Open the filter component and see the literal representation of the label

4. Additional info: (Cloud or Self-hosted, Screenshots)

[WidleStudioLLP]

Hy @Simozilla , welcome to Retool community.

I checked out your issue, and I was able to reproduce it on my end. After testing a few setups, I found that your condition just needs a small adjustment in how the dynamic label is written.

Here’s the fix:

Dynamic Column Label Fix

In your column’s Dynamic Label Name field, use this expression:

{{ select4.value === true ? 'foo' : 'bar' }}

Example from My Test

I created a quick test in Retool to confirm the behavior:

• A Select component named select4 with boolean options (true / false).
• A Table component where the column label is dynamically bound using the above expression.

When I toggle between true and false, the column header instantly switches between “foo” and “bar” — exactly as expected.

Here are a couple of screenshots from my test setup for reference:

[Simozilla]

Hello @**WidleStudioLLP
**
i apologize for the late response, I wasn’t able to check your solution until now.

I’ve now tried all the steps you suggested:**
**

Unfortunately the result is still the same:

I’m using the cloud version of retool, i don’t know if could change anything..

[WidleStudioLLP]

Hey @Simozilla ,

I checked out your image and I understand what you mean. It looks like you’re using a filter component placed outside of the table, while in my case, I’m using the built-in filters that appear in the footer of the table.

The key difference is how each of these handles labeling and display:

• When using the table’s footer filters, the labels update correctly based on the condition — meaning the table still shows the proper column label after the filter is applied.
• However, when using an external filter component, it only reflects the condition itself, not the label name associated with the filtered column.

So, the behavior you’re seeing is expected because the external filter component doesn’t automatically bind to the column label context like the native table filter does.

If your goal is to keep consistent labeling or improve clarity for users, you might consider one of these options:

• Use the table’s footer filters for automatic label handling.

Hope that helps clarify the difference!

[Simozilla]

Hello @WidleStudioLLP

Thank you for your support and for the clarification.

I understand your point, but from a functional perspective, there shouldn’t be any difference between an internal and an external Filter — or at least, if there are some differences, they should be clearly documented in the component’s documentation.

About my goal, the external filter actually provides a better user experience, and since it’s quite clear that a Filter component cannot be used without a Table, it should behave consistently with the internal one.

Thank You,
Simone

[Jack_T]

Hi @Simozilla,

I agree, from a functional perspective, the two filters should behave the same.

I can make a bug report to the engineering team to have them set up external filter component's to evaluate JS logic instead of populating with the JS.

For a work around in the short term, @WidleStudioLLP's example of using a filter built in to the table component will properly evaluate the JS.