Handsontable Column Move

by Gabriel Vazquez

HTML

<div class="table-container">
    <div class="table-handsontable">
        <div id="table" class="hot handsontable htRowHeaders htColumnHeaders">

        </div>
    </div>
    <div class="content1" style="display:none">
        Content 1
        <button id="hiddenColumn">
        Hide Column
        </button>
        <input type="text" id="columnToHide"/>
    </div>
</div>
<div class="content2">
    Content 2
</div>

CSS

.table-container {
    display: block;
    height: 338px;
    width: 800px;
    position: relative;
    padding-left: 50px;
    padding: 0;
}
}

.table-handsontable {
    overflow: hidden;
    position: absolute;
    top: 0px;
    bottom: 54px;
    width: 100%;
}

.content1 {
    background-color: #44AAFF;
    border: solid black 2px;
    
    position: absolute;
    width: 350px;
    height: 50px;
    
    bottom: 0;
    left: 0;
    right: 0;
}

.content2 {
    background-color: #FFAA44;
    border: solid black 2px;
    width: 350px;
    height: 50px;
}

</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://handsontable.com/bower_components/handsontable/plugins/bootstrap/handsontable.bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  var
    table = document.getElementById('table'),
    hot1;
	var hideBtn = document.getElementById('hiddenColumn');
  var colToHide = document.getElementById('columnToHide');
  var hideCol = function(columns) {
  	const hiddenColumnsPlugin = hot1.getPlugin('hiddenColumns');
    if (hiddenColumnsPlugin){
      hiddenColumnsPlugin.hideColumns(columns);
      hot1.render();    
    }
  };
  hideBtn.addEventListener('click', function() {
    hideCol([colToHide.value]);
  });
 
  
  hot1 = new Handsontable(table,{
    data: Handsontable.helper.createSpreadsheetData(100, 22),
    colHeaders: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
    manualColumnMove: [0,1,2,4,3],
    manualColumnResize: [150, 200, 250, 300, 50, 100],
    hiddenColumns: true,
    // stretchH: 'all',
    // persistentState: true,
    // rowHeaders: true,
    dropdownMenu: true,
    renderAllRows: true
  });
  // hide A, F
  hideCol([0,5]);

});