Handsontable Basic Example (100x10)

HTML

<script src="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="grid" class="inline-children">
</div>

CSS

body {
  margin: 20px 30px;
  font-size: 13px;
  font-family: 'Open Sans', Helvetica, Arial;
}

.inline-children > div {
  display: inline-block;
  cursor: cell;
  margin: 10px;
}

tr td:hover {
  font-weight: 900 !important;
}


tr:nth-child(1) > td{
  background-color: blue;
}

JavaScript

var data = function() {
  return Handsontable.helper.createSpreadsheetData(20, 5);
};

console.debug(data());


var _selectorMap = {} // keep track of styles already added.
var _originalColours = {};
var headElement = document.getElementsByTagName('head')[0];
var injectedCssRegistery = {};
var injectCssIntoDocument = function(selector, cssRules){
	var registryKey = [selector, cssRules].join("");
	if(!injectedCssRegistery[registryKey]){
		var style = document.createElement('style');
		style.type = 'text/css';
		style.innerHTML =  selector + " {" + cssRules + "}";  //'.cssClass { color: #F00; }';
		headElement.appendChild(style);
		injectedCssRegistery[registryKey] = true;
	}
  //console.debug(headElement);
}
// TODO: add to the same stylesheet rather than creating a new one
var injectCss = function(selector, cssRules){
  if(!_selectorMap[selector] && cssRules !== undefined){
    injectCssIntoDocument(selector, cssRules);
    _selectorMap[selector] = true;
  }
}


var applyColumnHeaderStyle =  function(id, headerStyle, colIdx){
  var selector = "#" +id;
  var findSelector = ".ht_clone_top th";
  if(colIdx !== undefined){
    findSelector = findSelector + ":nth-child(" + colIdx + ")";
  }
  var columnHeaders = $(selector).find(findSelector);
  if(true){
    injectCss(selector+ " " + findSelector, headerStyle);
  }
}


var applyCellStyle =  function(id, colIdx, rowIdx, style){
  var selector = "#" + id;
  var cellSelector = selector + " .ht_master tr:nth-child(" + rowIdx + ") > td:nth-child(" + colIdx + ")"
  var cell = $(cellSelector); //$(selector).find(".ht_master tr:nth-child(" + rowIdx + ") > td:nth-child(" + colIdx + ")");
  //console.debug(cell);
  if(true){
    injectCss(cellSelector, style);
  }
}

var hot = {};
hot.afterChange = function(){};
hot.beforeChange = function(){};
hot.afterRender = function(){};
hot.beforeRender = function(){};
hot.beforeValidate = function(){};
hot.afterSelection = function(){};
hot.afterOnCellMouseOver =...