Multi Level Row Group with Subtotals and Totals

VishalJobraj

I'm trying to implement a multi-level row group with subtotal and grandtotal and be able to collapse the row group.
I have managed to get the table to collapse, display the subtotal and total. The problem is that when I implement startRender in Row Group, I lose the row group heading. This is currently what it looks like:

This is more like how I need it to look:

Any answers to lead me in the right direction will be greatly appreciated.

Code:

    $(document).ready(function () {
    
            var collapsedGroups = {};
    
            var table = $('#report-table').DataTable({
                order: [[0, 'asc']],
                columnDefs: [{
                        targets: [0, 1, 2 ,3],
                        visible: false
                    }],
                rowGroup: {
                    dataSrc: [0, 1, 2, 3],
                    startRender: function (rows, group, level) {
                        var usageAvg = rows
                            .data()
                            .pluck(6)
                            .reduce(function (a, b) {
                                return parseFloat(a) + parseFloat(b);
                            }, 0);
    
                        var percentageAvg = rows
                            .data()
                            .pluck(7)
                            .reduce(function (a, b) {
                                return parseFloat(a) + parseFloat(b);
                            }, 0);
    
                            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' : '';
                            });
    
                        return $('<tr/>')
                            .append('<td>' + '' + '</td>' + 
                                    '<td>' + '' +  '</td>' + 
                                    '<td>' + usageAvg + '</td>' + 
                                    '<td>' + percentageAvg + '</td>')
                                    .attr('data-name', all).toggleClass('collapsed', collapsed);
    
                    }                
                },
                paging: false,
                responsive: true,
                ordering: false
            });
    
                $('#report-table tbody').on('click', 'tr.dtrg-start', function () {
                    var name = $(this).data('name');
                    collapsedGroups[name] = !collapsedGroups[name];
                    table.draw(false);
                });
    
        });

kthorngren

You have order: [[0, 'asc']], but your rowGroup.dataSrc is dataSrc: [0, 1, 2, 3],. For RowGroup to work properly all of the rowGroup.dataSrc columns need to be order. Try using orderFixed to force the ordering of those 4 columns at all times. The use can still order the remaining columns. Something like this:

"orderFixed": [ [ 0, 'asc' ], [ 1, 'asc' ],[ 2, 'asc' ],[ 3, 'asc' ] ],

Kevin

VishalJobraj

@kthorngren , I tried changing the "order" to what you recommended but it doesn't seem to be doing anything. Thank you

kthorngren

Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

VishalJobraj

Thank you @kthorngren , I have been able to recreate my problem successfully. Here is the link to the problem: http://live.datatables.net/bivemeko/1/edit?html,output

Vishal

kthorngren

Is this what you are looking for?
http://live.datatables.net/bivemeko/2/edit

I added the group to the tr returned from rowGroup.startRender, like this:

                    return $('<tr/>')
                        .append('<td>' + group + '</td>' +

I noticed you have -ordering false. Maybe the DOM table is in the order you want so the orderFixed might not do anything for you.

Kevin

VishalJobraj

Yes thank you, that's part of what I'm looking for. The other problem is that the rowGroups for column 1,2,3 (with column 0 being "Apollo" and "Discovery") are not visible.
I changed the ordering to true now

VishalJobraj

When I remove the code to make the rowGroups collapse, the table works perfectly. Its only once the code for collapse is present that I lose the lower level rowGroupings

colin

Can you update your test case to reflect that, please,

Colin

kthorngren

I pasted the if block from this example from this thread into your test case and it seems to work.

Pasted this:

                if (level === 0) {
                    top = group;
                    all = group;
                } else {
                    // if parent collapsed, nothing to do
                    if (!!collapsedGroups[top]) {
                        return;
                    }
                    all = top + group;
                }

http://live.datatables.net/bivemeko/8/edit

Your if block is different. Not sure what the goal is but it would take some debugging to determine why its not behaving as expected.

Kevin