Handsontable Basic Example (100x10)

by armensg

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;
}

th:nth-child(1) {
  background-color: red;
  color: white;
}

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

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

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

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

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

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

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

JavaScript

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



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;
	}
}
// 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 hot = {};
hot.afterChange = function(){};
hot.beforeChange = function(){};
hot.afterRender = function(){};
hot.beforeRender = function(){};
hot.beforeValidate = function(){};
hot.afterInit = function(){};
hot.afterSelection = function(){};
hot.afterOnCellMouseOver = function(){};
hot.beforeOnCellMouseDown = function(){};

var $grid = $("#grid");
for (var i = 1; i <= 10; i++) {
  var $container = $('<div><div id="example' + i + '"></div></div>');
  $grid.append($container);
  $grid.append(function() {
  
      var ht = new Handsontable($container[0], {
        data: data(),
        minSpareCols: 1,
        minSpareRows: 1,
        rowHeaders: true,
        colHeaders: true,
        contextMenu: true,
        afterChange: hot.afterChange,
        beforeChange: hot.beforeChange,
        afterRender: hot.afterRender,
        beforeRender: hot.beforeRender,
        beforeValidate: hot.beforeValidate,
        afterInit: hot.afterInit,
        afterSelection: hot.afterSelection,
        afterOnCellMouseOver: hot.afterOnCellMouseOver,
       ...