Handsontable example

by RishabhRanjanKesarwani

HTML

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

CSS

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

<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(C1, H1:L1)', '=SUM(G1,M1)', '=N1/10'],
		['Row2', '12', '13', '3', '2', '2', '=SUM(B2:E2)', '43', '21', '23', '43', '87', '=SUM(H2:L2)', '=SUM(G2,M2)', '=N2/10'],
		['Row3', '12', '132', '3', '2', '2', '=SUM(B3:F3)', '43', '21', '23', '43', '87', '=SUM(H3:L3)', '=SUM(G3,M3)', '=N3/10'],
		['Total', '', '', '', '=SUM(E1:E3)', '', '=SUM(G1:G3)', '', '', '', '', '', '', '', '']
  ];
  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;
			}
		},
		afterChange: function(changes, source){
			console.log(changes)
		}
  });
	
	for(var i = 0; i < 3; i++){
		hot3.setCellMeta(i, 6,'readOnly', true);
		hot3.setCellMeta(i, 12,'readOnly', true);
		hot3.setCellMeta(i, 13,'readOnly', true);
		hot3.setCellMeta(i, 14,'readOnly', true);
	}
	hot3.setCellMeta(3, 4,'readOnly', true);
	hot3.setCellMeta(3, 6,'readOnly', true);
	hot3.render();