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(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', '=C3/D3', '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,'readOnly', true);
		hot3.setCellMeta(i, 13,'readOnly', true);
		hot3.setCellMeta(i, 14,'readOnly', true);
	}
	for(var i = 0; i < 15; i++){
		hot3.setCellMeta(3,...