How do I change the color of the text inside a table cell based on a certain criteria?

Question from Karan Worah on Discord:

Hello, experimenting with Appsmith and looking for some styling help. I’m trying to change the colour of the text inside a table cell based on certain criteria. Is the JS for Text Color meant to be used like this?

Answer from @pawankumar

This is a function that’ll update the colour based on the computed value shown in the above image.

{{ (function() {
    if ( > 7) {
        return "#EF463E";
    } else {
        return "#00000";
})() }}

Additionally, we could also do the following:

{{ > 7 ?  "#EF463E" : "#00000" }}

For more examples, refer our docs: Writing Code - Appsmith


Here’s another example to return a different color for each value in a column.

Screen Shot 2021-06-09 at 2.15.35 PM

let colors = {
	'Human Resources':'Purple',
return colors[currentRow.department]
1 Like

This is so cool, thanks for sharing @GreenFlux :raised_hands:

1 Like

I have similar issue, basically I have 2 tables with 2 columns(key & values) but the keys are not in order, because sometimes 2 table have more or less keys so the order matching will change.
Now issue is I like to compare 2 tables values with keys, if 2nd Table have matching key with different value then I need to highlight the background.
my sample code :
if(Object.hasOwn(, currentRow.Brandkey)){
const val1 =[currentRow.Brandkey];
currentRow.Value == val1 ? ‘transparent’ : ‘red’;

please help me.