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>
<h2>Handsontable Basic</h2>

<div>
  <button id="btn1" onclick="addClass();">
    Add Class
  </button>
   <button  id="btn2" onclick="renderHot();">
    Render
  </button>
</div>
<div id="example"></div>

CSS

.paused-cell {
	background: #ffe6e6 !important;
}

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

a {
  color: #34A9DC;
  text-decoration: none;
}

p {
  margin: 5px 0 20px;
}

h2 {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: normal;
}

JavaScript

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

var container = document.getElementById('example');

var addCellClass = function() {
	var maximum = 10; var minimum = 0;
	var colIdx = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
  var rowIdx = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
  var className = "paused-cell";
  var selector = "#example";
  var cell = $(selector).find(".ht_master tr:nth-child(" + rowIdx + ") > td:nth-child(" + colIdx + ")");
  cell.addClass(className);
}
document.getElementById("btn1").onclick = addCellClass;

var renderHot = function(){
	hot.render();
}
document.getElementById("btn2").onclick = renderHot;

var hot = new Handsontable(container, {
  data: data(),
  minSpareCols: 1,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
});