Just like in a spreadsheet, you can have a conditional colour depending on the date in each row/cell, in this case, we need the cell with more than 0 to have different colour, how can we achieve that? And if we want a different colour on different cells depending on the data, how can we do that just like in conditional formatting in the excel sheet?
Great suggestion! I would also love to see display rules for Pivot Tables in the future.
I’ve created an alternative solution using some code for the time being. Here’s a video on how to set this up. https://www.screencast.com/t/8fK8iNRi
Code 1 (set background if the number is greater than 0)
TB.render('component_ID', function(data) {
data.ele.find('af-data-table-field').each(function(){
if(parseFloat($(this).text())){
$(this).parent().css('background-color','#00e676');
}
});
});
Code 2 (conditional statements)
TB.render('component_ID', function(data) {
data.ele.find('af-data-table-field').each(function(){
var num = parseFloat($(this).text());
if (num){ // Check to make sure it's a cell that is a number and is not null, empty, or zero
if(num > 0 && num < 11){ // Number is 1-10
$(this).parent().css('background-color','green');
} else if (num > 10 && num < 101){ // Number is 11-100
$(this).parent().css('background-color','blue');
} else if (num > 100 && num < 1001){ //Number is 101-1000
$(this).parent().css('background-color','yellow');
} else { // Number is higher than 1000
$(this).parent().css('background-color','red');
}
}
});
});
1 Like