Handsontable example

HTML

<div id="example1"></div>
<div id="example2"></div>

CSS

</style>

<script src="https://cdn.jsdelivr.net/npm/handsontable@7.3.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@7.3.0/dist/handsontable.full.min.css">

JavaScript

var example = document.getElementById('example1');
  var hot = new Handsontable(example, {
    data: [
      [4, 6, 11, 45, 8, 34]
    ],
    type: 'numeric',
    colHeaders: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    licenseKey: 'non-commercial-and-evaluation'
  });

  var example2 = document.getElementById('example2');
  var hot2 = new Handsontable(example2, {
    data: [
      [null]
    ],
    type: 'numeric',
    colHeaders: ['SUM'],
    licenseKey: 'non-commercial-and-evaluation'
  });

  hot.addHook('afterChange', function() {
    var myRow = hot.getDataAtRow(0);
    var mySum = myRow.reduce(function(previousValue, currentValue, index, array) {
      return previousValue + currentValue;
    });
    hot2.setDataAtCell(0, 0, mySum)
  })