Visual treatment of icon in table

App Building
1

I have a table with an icon column implemented by column type Image URL. I have an expression for the Background property which does something like this:

{{ currentRow.foo <= 1 ? 'Gainsboro' : 'White' }}

This "works" in that it visually highlights the icon a bit based on some aspect of the data. However it's not great and what I would prefer is to increase the transparency of the icon to "dim" it.

Is there any way to do this? Somewhere I saw a property on some object that was similar to style.color and it held an rgb expression that seemed to include transparency. But I don't see this property on a "real" icon component and the kind in a table is something else...

2

Hey @Roland_Alden! I think your best bet might be custom CSS. The post goes over where to put the CSS and how to grab the correct selector for your icon.

Here's an example:

#rt-table-table1 > div.rt-tbody > div:nth-child(1) > div > div:nth-child(5) > div > div > div > img {
  opacity: 0.5
}

Let me know how this works for you!

3

Yikes! Somehow it seems more straightforward to make up a whole parallel universe of icon artwork and have some expression that mangles the selector that picks the icon.

4

That's very possible :sweat_smile: :sweat:

I'll put in a request for more easily controllable image/icon styling in the meantime!