Handsontable colMove / Hide Show Columns / colSizes (2)

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">
        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: 500px;
    position: relative;
}

.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><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/pro/1.6.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.6.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {
	var btn = document.getElementById('hiddenColumn');
  var colToHide = document.getElementById('columnToHide');
  var hiddeCol = function(col) {
  	hot1.getPlugin('hiddenColumns').hideColumns(col);
    hot1.render();
  };
  btn.addEventListener('click', function() {
    hiddeCol([colToHide.value]);
  });
  var
    table = document.getElementById('table'),
    hot1;
  
  hot1 = new Handsontable(table,{
    data: Handsontable.helper.createSpreadsheetData(100, 6),
    colHeaders: ['A', 'B', 'C', 'D', 'E', 'F'],
    manualColumnMove: [0,1,2,4,3],
    manualColumnResize: [50, 50, null, 50, null, null],
    colWidths: [10, 10,null, 20, null, null],
    hiddenColumns: {
      "columns": [3]
    },
    stretchH: 'all',
    // persistentState: true,
    rowHeaders: true,
    dropdownMenu: true,
    renderAllRows: true
  });
  // hide A, F
  // hiddeCol([0,5]);

});