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 = [
    ['12'],
		['1342'],
		['3'],
		['2'],
		['2'],
		[''],
		['43'],
		['21'],
		['23'],
		['43'],
		['87'],
		['5'],
		[''],
		[''],
  ];
  var example3 = document.getElementById('example3');
  
  var hot3 = new Handsontable(example3, {
    data: data,
    colHeaders: true,
    rowHeaders: true,
    contextMenu: true,
		dropdownMenu: true,
		filters: true,
		columnSummary: function() {
			var configArray = [];
			var destination = [5, 11];
			var rangeArray = [[0, 4], [6, 10]]
			for (var i = 0; i < 2; i++) {
				configArray.push({
					sourceColumn: 0,
					destinationRow: destination[i],
					destinationColumn: 0,
					type: 'sum',
					forceNumeric: true,
					ranges: [rangeArray[i]],
				});
			}
			configArray.push({
				sourceColumn: 0,
				destinationRow: 12,
				destinationColumn: 0,
				type: 'sum',
				forceNumeric: true,
				ranges: rangeArray,
			});
			configArray.push({
				sourceColumn: 0,
				destinationRow: 13,
				destinationColumn: 0,
				type: 'custom',
				forceNumeric: true,
				customFunction: function(endpoint){
					var hotInstance = this.hot;
					return (parseInt(hotInstance.getDataAtCell(endpoint.destinationRow-1, endpoint.destinationColumn), 10))/10;
				},
			});
			/* console.log(configArray) */
			return configArray;
		},
		afterChange: function(changes, source) {
			console.log(changes, source)
		}
  });