Slickgrid Template : Grouping

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/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<button id='groupBank' type='button'>Group by Bank</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([])})


$( "#groupBank" ).click(function() { 
  dataView.setGrouping({
   getter: "BANK_ID",
   formatter: function (g) {
   return "Bank: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
  },
  aggregateCollapsed: false,
  lazyTotalsCalculation: true
  });

    /* dataView.setAggregators([ new Slick.Data.Aggregators.Sum("data") ], true) */;
});

/* function sumTotalsFormatter(totals, columnDef) {
  var val = totals.sum && totals.sum[columnDef.field];
  if (val != null) {
    return "total: " + val;
  }
  return "";
}
 */
 
function transactionStatusFormatter(status, columnDef) {
  if(status== 'FAILED'){
  return '<span><i class="fas fa-times-circle"></i></span>'
  }
  else {
  return '<span><i class="fas fa-times-circle"></i></span>'
  }
}

var columns = [
    {id: "IL_BATCH_ID", name: "Batch ID", field: "IL_BATCH_ID", width: 500},
    {id: "BANK_ID", name: "Bank Name", field: "BANK_ID", width: 500},
    {id: "AMOUNT", name: "Amount To Be Paid", field: "AMOUNT", width: 800},     
    {id: "STATUS", name: "Transaction Status", field: "STATUS", width: 500},    
    {id: "DIFFERENCE", name: "Arrears", field: "AMOUNTDIFFERENCE", width: 300},
    {id: "ENTITY_RESPONSE_AMOUNT", name: "Amount Paid", field: "ENTITY_RESPONSE_AMOUNT", width: 400}
];

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) {
 ...