Handsontable example

HTML

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
<button class='load'>load data and count</button>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://docs.handsontable.com/pro/1.4.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.4.1/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var generateDataObj = function(rows, columns) {
    var data = [];
    var number = 0;
  
    if (!rows) {
      rows = 3;
    }
    if (!columns) {
      columns = 7;
    }
  
    for (var i = 0; i < rows; i++) {
      data[i] = [];
      for (var j = 0; j < columns; j++) {
        data[i][j] = number++;
      }
    }
  
    for (i = 0; i < 2; i++) {
      data.push([]);
    }
  
    return data;
  };
  
  var example1 = document.getElementById('example1');
  
  var hot = new Handsontable(example1, {
    data: [[""]],
    colHeaders: true,
    rowHeaders: true
  });
  
 var load = document.querySelector('.load');
 load.addEventListener('click', function(){
 	hot.loadData(generateDataObj());
  hot.updateSettings({
  	columnSummary: [
      {
        destinationRow: 4,
        destinationColumn: 1,
        type: 'min'
      },
      {
        destinationRow: 0,
        destinationColumn: 3,
        reversedRowCoords: true,
        type: 'max'
      },
      {
        destinationRow: 4,
        destinationColumn: 5,
        type: 'sum',
        forceNumeric: true
      }
    ]
  })
 });

});