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 (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

1 Like

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

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

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

1 Like