Color Cell by Value


i'm new to code and to retool. I'm just finding my feet with the apps and I've got my self to a point where I would like to make cells green or red depending on the value.

I have tried the background option when selecting a column but regardless if I put the suggested code {{self >10 ? 'green' : 'red'}} it turns the whole column the color.

is there a way to set color by single cells so: if the cell has 's' in it its red and if it has 'b' it is green.

again im new to code so I wouldn't know how to write it.

thanks for any help in advance

Basically remove your 'red' condition, so you only use this for example: {{self ? 'green' : ''}}

Hey @toby

Thanks for replying, I’ll give that a go when I’m on my laptop next. So will that just do one cell and not the whole column?

As with using the example given in the background box it does the whole column.

Thanks again

So this is per column, not per cell. Sorry I missed that part of the request.

Having said that, if your cell if a certain number it will only affect that those cells. If you only wanted to make like Cell B20 (like in Excell for example) a certain colour, you couldn't. Unless you made it match a certain criteria: Ex: B20 = 'topics' and test to find topics and you're good.

Hey @Sielski!

Happy to help here! If you are looking to conditionally set a column to be red or green based on if it has an 's' or 'b' in it you could use one of two code snippets depending on whether the column will only have an 's' or 'b' in it or if they're full words your checking.

If its a full work you could use Javascripts .includes() method (link to docs here) to make this check:

{{self.includes('s')? 'red' : (self.includes('b')? 'green' : '' ) }}

If it's only a single letter in this column you could use an object and key into it using the value of each column (self) like this:

{{  {'s':'red', 'b': 'green'}[self]  }}

Do you think either of these could work for your use case here?

1 Like