Handsontable example

HTML

<div>
  <div id="example3" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

CSS

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

JavaScript

var data = [
    ['Row1', '12', '1342', '3', '2', '2', '=SUM(B1:F1)', '43', '21', '23', '43', '87', '=SUM(H1:L1)', '=SUM(G1,M1)', '=N1/10'],
    ['Row2', '12', '13', '3', '2', '2', '=SUM(B2:F2)', '43', '21', '23', '43', '87', '=SUM(H2:L2)', '=SUM(G2,M2)', '=N2/10'],
    ['Row3', '0', '0', '0', '2', '2', '=SUM(B3:F3)', '43', '21', '23', '43', '87', '=SUM(H3:L3)', '=SUM(G3,M3)', '=N3/10'],
    ['Total', '', '', '', '', '', '=SUM(B4:F4)', '', '', '', '', '', '=SUM(H4:L4)', '=SUM(B4:F4, H4:L4)', '=N4/10']
  ];
  var example3 = document.getElementById('example3');

  var hot3 = new Handsontable(example3, {
    data: data,
    colHeaders: true,
    rowHeaders: true,
    contextMenu: true,
    dropdownMenu: true,
    formulas: true,
    filters: [0],
    afterGetColHeader: function(col, TH) {
      var BUTTON_CLASS_NAME = 'changeType';
      var existingButton = TH.querySelector('.' + BUTTON_CLASS_NAME);
      if (!this.enabled) {
        if (existingButton) {
          if (Object.prototype.toString.call(this.getSettings().filters) === '[object Array]' && this.getSettings().filters.indexOf(col) === -1) {
            existingButton.parentNode.removeChild(existingButton);
          }
        }
        return;
      }
    },
    columnSummary: function() {
      var configArray = [];
      for (var i = 1; i <= 11; i++) {
        if (i == 6) {
          continue;
        }
        configArray.push({
          sourceColumn: i,
          destinationRow: 3,
          destinationColumn: i,
          type: 'sum',
          forceNumeric: true,
          ranges: [
            [0, 2]
          ],
        });
      }
      return configArray;
    },
    afterChange: function(changes, source) {
      //console.log(changes, source)
    },
    /* afterRenderer: function(td, row, col, prop, value, cellprop){
    	console.log(row, col, prop, value, cellprop)
    } */
  });

  for (var i = 0; i < 3; i++) {
    hot3.setCellMeta(i, 6, 'readOnly', true);
    hot3.setCellMeta(i, 12,...