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

[vihar]

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?

[vihar]

Answer from @pawankumar

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

{{ (function() {
    if (currentRow.imdb.rating > 7) {
        return "#EF463E";
    } else {
        return "#00000";
    }
})() }}

Additionally, we could also do the following:

{{ currentRow.imdb.rating > 7 ?  "#EF463E" : "#00000" }}

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

[GreenFlux]

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

{{function(){
let colors = {
	'Training':'Blue',
	'Sales':'Green',
	'Marketing':'Red',
	'Human Resources':'Purple',
	'Accounting':'Orange'
};
return colors[currentRow.department]
}()}}

[vihar]

This is so cool, thanks for sharing @GreenFlux

[chander2010]

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 :
{{(function(){
if(Object.hasOwn(api1.data.object1, currentRow.Brandkey)){
const val1 = api1.data.object1[currentRow.Brandkey];
currentRow.Value == val1 ? ‘transparent’ : ‘red’;
}
})()}}

please help me.