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.

5

@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
6

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

7

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.

8

{ā€˜Icon_xyzā€™} working
{ā€˜Icon_xyzā€™} not working
That IS weird.

9

i think Max was saying that

<space><space>{{ icon-name }}

creates the string like so:

'  icon-name'

which he says does not exist obviously, instead of what you wanted like

'icon-name'

which is created by

{{ icon-name }}

(notice the no spaces in front of the curlies)

That is because that text field is expecting to output a string, so if Iā€™m not mistaking, it treats everything from position 0 as part of the string, regardless where you start the curlies. I always trim around the curly brackets to avoid this issue, like so:

let icon_name = 'this is output';
return {
 a: ({{ icon_name }}).trim(),
 b: (     {{ icon_name }}).trim(),
 c: (  {{ icon_name }}  ).trim()
}

// output
a: "this is output",
b: "this is output",
c: "this is output"

itā€™s at least how I understand itā€¦

1 Like