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">
<h2>Handsontable Basic Example (100x10)</h2>
<p>
Head to <a href="https://handsontable.com" target="_blank">handsontable.com</a> to learn more about Handsontable.
</p>

<div id="example"></div>

CSS

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 ROWS = 100, COLS = 10;
var data = function () {
  return Handsontable.helper.createSpreadsheetData(ROWS, COLS);
};

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

var hot = new Handsontable(container, {
  data: data(),
  minSpareCols: 1,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  afterChange : function(changes,source) {
      console.log("Changes:", changes, source);
      if (changes) {
          changes.forEach(function(change) {
              var test = hot.getCellMeta(change[0],change[1]);
              console.log(test.foo, test);          
          });
      }
  }
});
for (var row = 0; row < ROWS; row++) {
    for (var col = 0; col < COLS; col++) {
        hot.setCellMeta(row, col, "foo", "bar-"+row+"-"+col );
    }
}
console.log("meta00", hot.getCellMeta(1, 2));