Hello,

I am having trouble using the createdRow option.

I created three conditionsla in the createdRow function, and they are not coloring the <td> like intended. I have created the proper classes in my CSS (green, yellow, red). I have just have one Department in currently, "IT", and it has two current employees in the department.

I want to do a day by day color code based on attendance, so if data[5] == any of the following conditional formats, then $(td).addClass( 'corresponding class' ); to the data[4] cell. Data[5] is a hidden column with the field MondayStatus and data[4] cell is the visible Monday column. So on and so forth for the rest of the days of the week.

Towards the bottom of the JS, where the category name is added to the <tr>, I used seperated conditionals to make the whole parent row green, now I want to use the child rows to determine the color of the parent. if Monday - Friday is green then to make the parent row green. If 50-75% of the cells are green, make the parent row yellow, and if <50% of the cells are green, then make the parent row red.

$(document).ready(function() {
        var collapsedGroups = {};
        var top = '';
        var parent = '';
    
        var table = $('#myTable').DataTable({
            "createdRow": function( row, data, dataIndex ) {
                if ( data[5] == "P" || data[5] == "TRNG") {
                    $(row).addClass( 'green' );
                } 
                if (data[5] == "O" || data[5] == "H" || data[5] == "LA" || data[5] == "JD" || data[5] == "ML" || data[5] == "TLV" || data[5] == "LO") {
                    $(row).addClass( 'red' );
                }
                if ( data[5] == "NR" || data[5] == "TAD" || data[5] == "LS" ) {
                    $(row).addClass( 'yellow' );
                }
            },
        "pageLength" : 10,
            "columns": [
                {"data": "Department",
              visible: false},
                { "data": "User.Title",
                visible: false },
                { "data": "Locations"},
                { "data": "Sunday", 
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
                },
                { "data": "Monday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "MondayStatus",
                visible: false},
                { "data": "Tuesday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "TuesdayStatus",
                visible: false},
                { "data": "Wednesday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "WednesdayStatus",
                visible: false},
                { "data": "Thursday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "ThursdayStatus",
                visible: false},
                { "data": "Friday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "FridayStatus",
                visible: false}
            ],
            dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [{
                extend: 'collection',
                className: "btn-dark",
                text: 'Export/Update Table',
                buttons: [{
                        extend: "excel",
                        className: "btn-dark"
                    },
                    {
                        extend: "print",
                        className: "btn-dark"
                    },
                    {
                        text: 'User Guide',
                        action: function (e, dt, node, config){
                        $('#ugModal').modal('show');
            }
        },
                ],
            }],
            order: [
                [0, 'asc'],
                [1, 'asc']
            ],
            rowGroup: {
                dataSrc: [
                    'Department',
                    'User.Title'
                ],
                startRender: function(rows, group, level) {
                    var all;
                    if (level === 0) {
                        top = group;
                        all = group;
                    } else if (level === 1) {
                        parent = top + group;
                        all = parent;
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[top]) {
                            return;
                        }
                    } else {
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[parent]) {
                            return;
                        }
                        all = top + parent + group;
                    }
    
                    var collapsed = !collapsedGroups[all];
                    console.log('collapsed:', collapsed);
    
                    rows.nodes().each(function(r) {
                        r.style.display = collapsed ? 'none' : '';
                    });
                    //Add category name to the <tr>.
                    if ( group == "IT" && rows.count() == 2 ){
                        return $('<tr/>')
                        .append('<td class="green" colspan="8">' + group + ' (' + rows.count() + ')</td>')
                        .attr('data-name', all)
                        .toggleClass('collapsed', collapsed);
                    }else {
                        return $('<tr/>')
                        .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                        .attr('data-name', all)
                        .toggleClass('collapsed', collapsed);
                    }
                }
    
            }
        });
    
        loadData();
    
        $('#myTable tbody').on('click', 'tr.dtrg-start', function() {
            var name = $(this).data('name');
            collapsedGroups[name] = !collapsedGroups[name];
            table.draw(false);
        });
    });