Handsontable example

by handsoncode

HTML

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

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://docs.handsontable.com/pro/1.8.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var example1 = document.getElementById('example1');

  var hot = new Handsontable(example1, {
    data: Handsontable.helper.createSpreadsheetData(5, 20),
    //colHeaders: true,
    rowHeaders: true,
    nestedHeaders: [
      ['',
        '',
        '',
        '',
        '',
        '',
        '', {
          label: 'BP',
          colspan: 2
        }, {
          label: 'NA',
          colspan: 3
        }, {
          label: 'EU',
          colspan: 3
        }, {
          label: 'AP',
          colspan: 3
        },
        '',
        ''
      ],
      ['PN',
        'Desc',
        'Man',
        'MF',
        'MO',
        'Al',
        'Le',
        'G P',
        'N P',
        'Inco - NA',
        'Inco te- NA',
        'Total - NA',
        'Inco - EU',
        'Inco te - EU',
        'Total - EU',
        'Inco - APAC ',
        'Inco te- APAC',
        'Total - APAC',
        ' Control',
        'Comments'
      ]
    ],
    hiddenColumns: true,
    collapsibleColumns: [{
      row: -2,
      col: 7,
      collapsible: true
    }, {
      row: -2,
      col: 9,
      collapsible: true
    }, {
      row: -2,
      col: 12,
      collapsible: true
    }, {
      row: -2,
      col: 15,
      collapsible: true
    }]
  });

  hot.updateSettings({
    afterGetColHeader: function(col, TH) {
      var plug = hot.getPlugin('collapsibleColumns').collapsedSections;

      console.log(plug)

    }
  })

});