JSFiddle - React, Tailwind, and code Playground

by aszymanski

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
  }
});

let movePlugin = hot.getPlugin("manualColumnMove");

document.querySelector('.btn').addEventListener('click', function() {
  hot.updateSettings({
    hiddenColumns: {
      columns: []
    }
  })

  movePlugin.moveColumns([2, 4], 10)
  hot.render()
});