Handsontable example

by Aleksandra Maria Budnik

HTML

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

CSS

</style>

<script src="https://cdn.jsdelivr.net/gh/handsontable/handsontable@release/8.0.0-beta.1/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/handsontable/handsontable@release/8.0.0-beta.1/dist/handsontable.full.css">

JavaScript

var example1 = document.getElementById('example1');
  var hot = new Handsontable(example1, {
    data: Handsontable.helper.createSpreadsheetData(5,10),
    colHeaders: true,
    rowHeaders: true,
    hiddenColumns: true,
    manualColumnResize: true,
    colWidths: 60,
    nestedHeaders: [
      ['A', {label: 'B', colspan: 8}, 'C'],
      ['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
      ['H', {label: 'I', colspan: 2}, {label: 'J', colspan: 2}, {label: 'K', colspan: 2}, {label: 'L', colspan: 2}, 'M'],
      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']
    ],
    collapsibleColumns: [
      {row: -4, col: 1, collapsible: true},
      {row: -3, col: 1, collapsible: true},
      {row: -2, col: 1, collapsible: true},
      {row: -2, col: 3, collapsible: true}
    ],
    afterColumnCollapse: function(){
    	console.log(arguments[1]) //hidden column
      this.getPlugin('manualColumnResize').setManualSize(arguments[1] - 1, 10)
    }
  });