DataTables - Row grouping with expand/collapse and rowcount

HTML

<link rel="stylesheet" href="//nightly.datatables.net/css/jquery.dataTables.css">
<script src="//nightly.datatables.net/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css">
<script src="//cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.css">
<script src="//cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<div class="container">
  <table id="example" class="display" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-search="Tiger Nixon">T. Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td data-order="1303689600">Mon 25th Apr 11</td>
        <td data-order="320800">$320,800/y</td>
      </tr>
      <tr>
        <td data-search="Garrett Winters">G. Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td data-order="1311552000">Mon 25th Jul 11</td>
        <td data-order="170750">$170,750/y</td>
      </tr>
      <tr>
        <td data-search="Ashton Cox">A. Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td data-order="1231718400">Mon 12th Jan 09</td>
        <td...

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

JavaScript

$(document).ready(function() {
  var collapsedGroups = {};

  var table = $('#example').DataTable({
    paging: false,
    order: [
      [2, 'asc']
    ],
    rowGroup: {
      // Uses the 'row group' plugin
      dataSrc: 2,
      startRender: function(rows, group) {
        var collapsed = !!collapsedGroups[group];

        rows.nodes().each(function (r) {
          r.style.display = 'none';
          if (collapsed) {
            r.style.display = '';
          }});
          
          var ageTotal = rows.cells(rows.indexes(), 3).data().reduce((a, b) => a += 1*b, 0);
          var ageAvg = ageTotal / rows.count();

        // Add category name to the <tr>. NOTE: Hardcoded colspan
        return $('<tr/>')
          .append('<td colspan="8">' + group + ' (' + rows.count() + ' Avg: ' + ageAvg.toFixed(1) +')</td>')
          .attr('data-name', group)
          .toggleClass('collapsed', collapsed);
      }
    }
  });

  $('#example tbody').on('click', 'tr.group-start', function() {
    var name = $(this).data('name');
    collapsedGroups[name] = !collapsedGroups[name];
    table.draw(false);
  });

});