Dynamically display icons in a table

General 🤓
1

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…

2

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' }}
  1. 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 .

3

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.

image
image365Ă—1105 42.4 KB

4

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.