Handsontable example

by galvakojis

HTML

<div id="example1" class="hot htCenter handsontable htRowHeaders htColumnHeaders"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

var
    container = document.getElementById('example1'),
    hot1;
  
  hot1 = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(100, 18),
    colWidths: 100,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true,
    mergeCells: [
      {row: 1, col: 1, rowspan: 3, colspan: 3},
      {row: 3, col: 4, rowspan: 2, colspan: 2}
    ],
    className: "htCenter",
    cell: [
      {row: 0, col: 0, className: "htRight"},
      {row: 1, col: 1, className: "htLeft htMiddle"},
      {row: 3, col: 4, className: "htLeft htBottom"}
    ],
    afterSetCellMeta: function (row, col, key, val) {
      console.log("cell meta changed", row, col, key, val);
      
    }
  });