Handsontable example

HTML

<div id="example1" class="hot handsontable htColumnHeaders"></div>
<button class='show'>show</button>
<button class='hide'>hide</button>

CSS

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

<script src="https://docs.handsontable.com/pro/1.4.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.4.1/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/pro/1.4.1/bower_components/numeraljs/languages/de.js"></script>

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  
  var
    container = document.getElementById('example1'),
    hot;
  
  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(10, 10),
    colHeaders: true,
    hiddenColumns: true,
  });
  
  window.hot = hot;
  
var show = document.querySelector('.show'),
		hide = document.querySelector('.hide');

show.addEventListener('click', function() {
	console.log('show');
	hot.getPlugin('HiddenColumns').showColumn(1);
  hot.render();
});
hide.addEventListener('click', function() {
	console.log('hide');
	hot.getPlugin('HiddenColumns').hideColumn(1);
  hot.render();
});

});