Dynamically display icons in a table

[theuken]

I’m trying to display just icons (Eva Icons, no title) instead of a numeric value in a table column, possibly with different colors.
Like 1 => running (activity) and 0 => stopped (all-done)
Using Select/tag column type and the tag mapper doesn’t seem to work.
Now I’m playing with buttons, trying to dynamically change the icon, but nothing is displayed.

There’s possibly a very simple solution to this…

[Kate]

Hi @theuken

You can achieve this with a Button column:

1. Leave Text empty.
2. Set Icon placement to Center .
3. Set Appearance to Ghost .
4. Configure the icon dynamically:

{{ row.status === 1 ? 'activity-outline' : 'done-all-outline' }}

5. Optionally configure its color through Status :

{{ row.status === 1 ? 'success' : 'danger' }}

Replace status with your actual field name. If your values are strings, compare with '1' instead.

One important detail: the Eva icon name is done-all , not all-done . Also, the icon won’t appear while Icon placement is set to None .

[theuken]

I had actually implemented it like this (wrong icon-name was just a typo in the post).
The icon still doesn’t show. I can’t set the “text” field really to empty. I still shows a greyed out default object.
I removed the condition in the icons field just to see if an icon displays at all. No luck.

[theuken]

The icons just came to life. There were 1 or 2 spaces to the left of the curly brackets around the icons expression, which obviously broke it. Weired.

[Max]

@theuken good that you made it work. Just for your information:

• You, in fact, did set the text field to empty. The “greyed out default object” is just a placeholder for that field, showing an example of what could be entered.
• It’s not weird at all that it didn’t work with the spaces in front. Essentially instead of the 'activity-outline' icon you were requesting a ' activity-outline' icon, which obviously doesn’t exist

[theuken]

Ummm - no.
{{ Content }} => working
_2 spaces_ {{ Same Content }} => not working

[Max]

Yeah, that’s… exactly what I’m saying. It’s not working because there is no xyz icon only a xyz one. The content is not automatically truncated.

[theuken]

{‘Icon_xyz’} working
{‘Icon_xyz’} not working
That IS weird.