Color code a column in a table based on its value

App Building
,
1

Hi All

I have a retool table with Au_ppm column in it. I want this column to be color coded based on the Au_ppm value.
I tried to use tag but I am not sure how to use the range. For example, I want to make the cell color RED when the Au_ppm value is >5 ppm, and then orange if the value is between 3-5 ppm.
I can do it in excel but I want to integrate this in my retool app.

Is there anyone can help?

Thanks

This is my table

retool_column_color code
retool_column_color code1110×1241 125 KB

This is the example (Excel table)

example
example816×1089 349 KB

2

@Dhani This can be done but it is not yet possible with the new table component. I think there is a fix to be released soon.
When the fix is ready; you should use a ternary operator in the Au_ppm column for Background field like so:
{{self >5 ?'red':self >= 3 && self <= 5 ?'orange':''}}
Try it now any way

2 Likes
3

@Dhani It seems like this is ready to rock and roll:

image

Your Conditionals Will Vary :smiley:

2 Likes
4

Thanks Guys

I tried to use this simple code: {{self >0.5 ? 'red' : 'yellow'}}, in the new table it didn't work. It shows only all yellow.
But it works with the legacy table. Hmm...maybe I just wait for this to be fixed?

Thanks for all your helps

Cheers

5

Hello, self in new table is point to table itself. I try item is ok. but still with error tooltip.
pls help to fix this wrong tooltip, we can get item in the background option's scope.

image
image829×478 43.5 KB

6

Ah cool, it works with item instead of self.
Thanks for this. The tooltip shows error but I think the code is working.

7

Interesting stuf!! Thanks @ScottR :+1:

1 Like
8

Yes this does work, but interestingly the Retool linter is showing me that item does not exist.

image

9

Yes, despite error tooltip, but it can work. The error tooltip should be remove, I have reported that in another topic.

1 Like
10

@Dhani @bradlymathews @AnsonHwang I mentioned over here as well, circling back to let you know that incorrect tooltip error was fixed and released Aug 4th! :white_check_mark: Thanks for all your comments above making sure this at least functionally worked in the meantime

2 Likes