Conditionally styling a RowGroup header

sorenbjerg

Hello there. I am unfortunately finding myself needing some help getting DataTables configured - specifically with regards to styling a RowGroup header based on the contents of the grouping rows.

I found an older question on this forum, Conditionally formatting a RowGroup header based on values in the group, that pointed in the direction of rowGroup.startRender, but for the life of me I just cannot seem to get hold of the grouped row's header to apply a style to - only all the actual rows in the group.

I tried applying .prev() to .to$(), which just caused the affected rows to shift up one row, and using .prev('.group') instead just removed the styling of the added class from all rows previously affected.

This is my DataTables initialization, with the rowGroup.startRender I'm stuck with:

var table = $(document).ready(function() {
  $('#table').DataTable( {
    columnDefs: [
      { visible: false, targets: 2 }
    ],
    orderFixed: [2, 'desc'],
    paging: false,
    rowGroup: {
      dataSrc: 2,
      startRender: function ( rows, group ) {
        if ( group == '-1' ) {
          rows.nodes().to$().addClass( 'bg-danger' );
        }
        return group;
      }
    }
  });
});

sorenbjerg

So I actually managed to figure it out myself, that I had to hard-overwrite the return value of rowGroup.startRender with a jQuery object with the desired tr and td contents (including a deliciously hardcoded colspan value):

var table = $(document).ready(function() {
    $('#hordes').DataTable( {
        columnDefs: [
            { visible: false, targets: 2 }
        ],
        orderFixed: [2, 'desc'],
        paging: false,
        rowGroup: {
            dataSrc: 2,
            startRender: function(rows, group) {
                return $('<tr class="group group-start"><td class="' + (group == '1' ? 'bg-success' : (group == '0' ? 'bg-danger' : 'bg-dark')) + '" colspan="5">' + group + '</td></tr>');
            }
        }
    });
});