JSFiddle - React, Tailwind, and code Playground

by namihihii

HTML

<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>
<button class="btn">Show hidden column</button>

CSS

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

    <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1.0/dist/handsontable.full.js"></script>
    <link type="text/css" rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/handsontable@12.1.0/dist/handsontable.full.css">

JavaScript

var example1 = document.getElementById('example1');
  var hot = new Handsontable(example1, {
    data: Handsontable.helper.createSpreadsheetData(5,12),
    colHeaders: true,
    rowHeaders: true,
    contextMenu: true,
    manualColumnMove: true,
		outsideClickDeselects: false,
    hiddenColumns: {
      columns: [2, 4],
      indicators: true
    }
  });
  
	document.querySelector('.btn').addEventListener('click', function(){
  hot.updateSettings({
  	hiddenColumns: {
    	columns: []
    }
  })
	hot.render()
	});