Multi Level Row Group with Subtotals and Totals

Multi Level Row Group with Subtotals and Totals

VishalJobrajVishalJobraj Posts: 8Questions: 3Answers: 0
edited March 2022 in General

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);
                });
    
        });

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • VishalJobrajVishalJobraj Posts: 8Questions: 3Answers: 0

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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • VishalJobrajVishalJobraj Posts: 8Questions: 3Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • VishalJobrajVishalJobraj Posts: 8Questions: 3Answers: 0

    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

  • VishalJobrajVishalJobraj Posts: 8Questions: 3Answers: 0

    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

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

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

    Colin

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

    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

Sign In or Register to comment.