Pivot formatting for records

Suggestion Box
#1

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?

#2

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