I have a table the uses the rowGoup extension with startRender function that expands and collapses the row groups.

By default all groups are collapsed. All this works great.

Now I am trying to code a function for 2 buttons that would "expand all" and "collapse all"

I am having a difficult time trying to figure this out.

Has anyone did this before? Of has an idea how to do this?

Below is the code from rowGroup function.

   rowGroup: {
               dataSrc: [ 'employee_full_name', 'out_of_office'],
               startRender: function (rows, group, level) {
                   var all;

                   if (level === 0) {
                       level_1 = group;
                       all = group;
                       level_2 ='';
                   } else {
                       // if parent collapsed, nothing to do
                       if (!!collapsedGroups[level-1]) {
                           return;
                       }

                    if (level === 1) {
                           level_2 = group
                         }
                       
                    all = level_1 + level_2 + group;
                   }
                   console.log(group, level, all)
                     
                   var collapsed = !!collapsedGroups[all];

                   rows.nodes().each(function (r) {
                       r.style.display = 'none';
                       if (collapsed) {
                         r.style.display = '';
                       }});

                  //fontawsome + and - 
                  var toggleClass = collapsed ? 'fa fa-minus-circle' : 'fa fa-plus-circle';
                  var groupTD = '';

                    if(level == 0){
                                  groupTD = '<td colspan="' + rows.columns()[0].length +'">' + group + ' (' + rows.count() + ')</td>'
                    }else{
                                  groupTD = '<td colspan="' + rows.columns()[0].length +'">' + '<span style="color:#007bff;" class="fa fa-fw ' + toggleClass + ' toggler"/> ' + group + ' (' + rows.count() + ')</td>'
                     }

                // Add category name to the <tr>
                return $('<tr/>')
                  .append(groupTD)
                  .attr('data-name', all)
                  .toggleClass('collapsed', collapsed);

               }
   }