Handsontable example

by galvakojis

HTML

<div id="example1" style="width: 400px; height: 200px; overflow: hidden" data-initialstyle="width: 400px; height: 200px; overflow: hidden" data-originalstyle="width: 400px; height: 200px; overflow: hidden" class="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 testValue = false,
  hot1;
$(document).ready(function() {

  var
    example = document.getElementById('example1'),
    maximize = document.querySelector('.maximize'),
    maxed = false,
    resizeTimeout,
    availableWidth,
    availableHeight;

  hot1 = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(40, 40),
    colWidths: [55, 80, 80, 80, 80, 80, 80], //can also be a number or a function
    rowHeaders: true,
    colHeaders: true,
    cells: function(row, col, prop) {
      if (col === 0 && testValue) {
        return {
          className: 'customClassName'
        };
      } else {
        return {
          className: ''
        };
      }
    },
    beforeChange: function(changes, source) {
      var changes = changes[0];
      if (changes && (changes[0] === 0 && changes[1] === 0)) {
        if (changes[3] === 'A') {
          testValue = true;
          //this.populateFromArray(1, 0, [['A']], hot1.countRows() - 1, 0);
        } else {
          testValue = false;
        }
      }
    },
    minSpareRows: 1,
    contextMenu: true
  });


 
});