Datatables - Adding css to specific cells - css

Question

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:

Answer 1

The data parameter in your rowCallback is an object.
if (data.growth < 3) {
$(row).find('td:eq(2)').css('background-color', 'red');
}
Just need to change the if condition from data[2] to data.growth
$(document).ready(function() {
let className = ""
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
}
]
var table = $('#example').DataTable({
rowCallback: function(row, data, index) {
console.log({
data
})
if (data.growth < 3) {
$(row).find('td:eq(2)').css('background-color', 'red');
}
},
"columnDefs": [{
"targets": [1, 2],
"className": 'dt-body-right'
}, ],
data: data,
responsive: true,
paging: true,
searching: false,
bInfo: true,
"order": [
[2, "desc"]
],
"pageLength": 20,
columns: [{
data: "title",
title: "Title",
},
{
data: "totalRevenue",
title: 'Revenue'
},
{
data: "growth",
title: 'Revenue Growth'
},
]
});
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
</table>