Slickgrid : Grouping Tiers

HTML

<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.groupitemmetadataprovider.js"></script>
<button id='groupYear' type='button'>Group by Year</button>
<button id='clearGrouping' type='button'>Clear grouping</button>

<div id="myGrid" style="width:600px;height:500px;"></div>

JavaScript

var dataView = new Slick.Data.DataView();

$('#clearGrouping').click(function(){dataView.setGrouping([])})
$( "#groupYear" ).click(function() { 
  dataView.setGrouping([{
   getter: "myJunkColumn",
   formatter: function (g) {
   return "";
  },
  aggregators: [ new Slick.Data.Aggregators.Sum("data") ],
  aggregateCollapsed: false,
  lazyTotalsCalculation: true
  },{
   getter: "year",
   formatter: function (g) {
   return "Year(s): " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
  },
      aggregators: [ new Slick.Data.Aggregators.Sum("data") ],
  aggregateCollapsed: false,
  lazyTotalsCalculation: true
  }]);
});

function sumTotalsFormatter(totals, columnDef) {
  var val = totals.sum && totals.sum[columnDef.field];
  if (val != null) {
    return "total: " + val;
  }
  return "";
}

var columns = [
    {id: "column3", name: "Year", field: "year"},
    {id: "column2", name: "Data", field: "data", groupTotalsFormatter: sumTotalsFormatter}
    ];

var options = {
  enableCellNavigation: true,
  editable: true,
    forceFitColumns: true
};

var grid = new Slick.Grid('#myGrid', dataView, columns, options);

/* grid.onSort.subscribe(function(e, args) {
    var comparer = function(a, b) {
    return (a[args.sortCol.field] > b[args.sortCol.field]) ? 1 : -1;
  }
 
  dataView.sort(comparer, args.sortAsc);
});*/
                      
// Make the grid respond to DataView change events.
dataView.onRowCountChanged.subscribe(function (e, args) {
  grid.updateRowCount();
  grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
  grid.invalidateRows(args.rows);
  grid.render();
});

var data = [
  {'id': 'row1', 'data': '1', 'year': 1995},
  {'id': 'row2', 'data': '2', 'year': 1995},
  {'id': 'row3', 'data': '2', 'year': 2000},
  {'id': 'row4', 'data': '3', 'year': 1991}];

//inject the junk grouping column
for(i in data){
    data[i].myJunkColumn = ''
}
 
dataView.setItems(data);