agGrid - Total Row (Multi Column Totaling)

<!DOCTYPE html>
<html lang="en">
<head>
    <script>var __basePath = '/';</script>
    <style media="only screen">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }

        html {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            overflow: auto;
        }

        body {
            padding: 1rem;
            overflow: auto;
        }
    </style>
            <script src="https://unpkg.com/@ag-grid-enterprise/all-modules@23.1.1/dist/ag-grid-enterprise.min.js"></script>
    </head>

<body>
    <style>
  .total-col {
    font-weight: bold;
    color: burlywood;
  }
</style>

<div id="myGrid" style="height: 100%;" class="ag-theme-alpine-dark"></div>
    <script src="CustomPinnedRowRenderer.js"></script>
    <script src="main.js"></script>
</body>
</html>

var gridOptions = {
  columnDefs: [
    { field: 'a', type: 'valueColumn', headerName: 'A (Total disabled)' },
    { field: 'b', type: 'valueColumn' },
    { field: 'c', type: 'valueColumn' },
    { field: 'd', type: 'valueColumn' },
    { field: 'e', type: 'valueColumn' },
    { field: 'f', type: 'valueColumn' },
    // {
    //   headerName: 'Total',
    //   valueGetter: 'data.a + data.b + data.c + data.d + data.e + data.f',
    //   editable: false,
    //   aggFunc: 'sum',
    //   cellClass: 'total-col',
    // },
  ],
  defaultColDef: {
    flex: 1,
    sortable: true,
    pinnedRowCellRenderer: 'customPinnedRowRenderer',
    pinnedRowCellRendererParams: {
      style: { color: 'yellow', fontWeight: 'bold'},
    },
  },
  columnTypes: {
    valueColumn: {
      editable: true,
      aggFunc: 'sum',
      valueParser: 'Number(newValue)',
      filter: 'agNumberColumnFilter',
    },
  },
  rowData: getRowData(),
  groupDefaultExpanded: 1,
  enableCellChangeFlash: true,
  animateRows: true,
  pinnedBottomRowData: createFooterData(),
  components: {
    customPinnedRowRenderer: CustomPinnedRowRenderer,
  }, 
  onGridReady: onGridReady,
  onFilterChanged: onGridReady,
};


function onGridReady(event) {
  console.log('The grid is now ready');
  // gridOptions.pinnedBottomRowData = createFooterData();
  gridOptions.api.setPinnedBottomRowData(createFooterData(gridOptions.api));
}

function getRowData() {
  var rowData = [];
  for (var i = 1; i <= 30; i++) {
    rowData.push({
      group: i < 5 ? 'A' : 'B',
      a: (i * 863) % 100,
      b: (i * 811) % 100,
      c: (i * 743) % 100,
      d: (i * 677) % 100,
      e: (i * 619) % 100,
      f: (i * 571) % 100,
    });
  }
  return rowData;
}

function sum(values, col) {
    var sum = 0;
    values.forEach( function(value) {sum += value.data[col]} );
    return sum;
}

function createFooterData(gridApi) {
  var result = [];
  var model;
  var visibleRows = [];
  if(gridApi){
    model = gridApi.getModel();
    visibleRows = model.rowsToDisplay;
  }
  console.log('model:', model);
  console.log('visibleRows:', visibleRows);  
  result.push({
    a: null,
    b: sum(visibleRows, 'b'),
    c: sum(visibleRows, 'c'),
    d: sum(visibleRows, 'd'),
    e: sum(visibleRows, 'e'),
    f: sum(visibleRows, 'f'),
  });
  console.log('result:', result);
  return result;
}

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
});

function setStyle(element, propertyObject) {
  for (var property in propertyObject) {
    element.style[property] = propertyObject[property];
  }
}
function CustomPinnedRowRenderer() {}

CustomPinnedRowRenderer.prototype.init = function(params) {
  this.eGui = document.createElement('div');
  setStyle(this.eGui, params.style);
  this.eGui.innerHTML = params.value? params.value: null;
};

CustomPinnedRowRenderer.prototype.getGui = function() {
  return this.eGui;
};