Adding css to a specific cell

oristeph

I am populating and displaying my data using Datatables. I am attemping to add css to the background of a specific cell under my Revenue Growth Column if a certain condition is met.

For example: if revenue growth column is less then 3 then I would like to make that cell background-color: red

Here is the array I am using to populate my table :

 const data = [
{title: "Walk in", totalRevenue: 2002, growth: 3.2}, 
{title: "Retail", totalRevenue: 1231, growth: 2.2},
 {title: "Hospital", totalRevenue: 5421, growth: 1.9},
 {title: "Online", totalRevenue: 2442, growth: 3.2},
 {title: "Fitness", totalRevenue: 8742, growth: 0.3}
]

I've attempted this by using

    rowCallback: function(row, data, index){
if(data[2] < 3){
    $(row).find('td:eq(2)').css('background-color', 'red');
}

Which I believe is checking column 3 which would be the value of my growth in my array. Currently with this line of code my data table has not changed.

My expected outcome is to have the background display red for any of the values that is less then 3.

Here is a link to a jsfiddle for an example of what I am working with:

colin

This example should help - it's showing how to use rowCallback to colour cells if they're duplicated in the table.

Colin