Handsontable example

HTML

<div id="example1"></div>
<button class="btn">Add Calculation</button>

CSS

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

JavaScript

var example = document.getElementById('example1');
  var hot = new Handsontable(example, {
    data: [
      [5, 2, 7, 8, 5],
      [7, 4, 1, 0, 5],
      [8, 5, 5, 4, 6],
      [4, 2, 3, 0, 7],
      [3, 0, 2, 2, 0]
    ],
    rowHeaders: true,
    colHeaders: true,
    formulas: true
  });


  function addCalc() {
    //adding row and pushing new data
    hot.setDataAtCell(hot.countRows(), 0, '');
    //changing header to AVE for the last row  
    hot.updateSettings({
      afterGetRowHeader: function(row, TH) {
        if (row === hot.countRows() - 1) {
          TH.textContent = 'SUM'
        } else {
          TH.textContent = row + 1
        }
      }
    })
    hot.setDataAtCell(hot.countRows() - 1, 0, '=SUM(A1:A4)');
  }


  document.querySelector('.btn').addEventListener('click', function() {
    addCalc()
  })