Handsontable example

HTML

<div>
  <div id="example3" class="hot scroll-container 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 = [
    ['12'],
    ['1342'],
    ['3'],
    ['2'],
    ['2'],
    [''],
    ['43'],
    ['21'],
    ['23'],
    ['43'],
    ['87'],
    [''],
    ['']
  ];
  var example3 = document.getElementById('example3');

  var hot3 = new Handsontable(example3, {
    data: data,
    colHeaders: true,
    rowHeaders: true,
    contextMenu: true,
    dropdownMenu: true,
    filters: true,
    formulas: true
  });

	hot3.setDataAtCell(5, 0, '=SUM(A1:A5)');
	hot3.setCellMeta(5,0,'readOnly', true);
	hot3.setDataAtCell(11, 0, '=SUM(A7:A11)');
	hot3.setCellMeta(11,0,'readOnly', true);
  hot3.setDataAtCell(12, 0, '=A6+A12');
	hot3.setCellMeta(12,0,'readOnly', true);
	hot3.render()