Handsontable colMove / Hide Show Columns

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
    </div>
</div>
<div class="content2">
    Content 2
</div>

CSS

.table-container {
    display: block;
    height: 338px;
    width: 338px;
    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/bower_components/handsontable/dist/handsontable.full.js"></script-->
<!--link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.css"-->

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

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var
    table = document.getElementById('table'),
    hot1;
  
  hot1 = new Handsontable(table,{
    data: Handsontable.helper.createSpreadsheetData(1000, 5),
    colWidths: 50,
    colHeaders: ['A', 'B', 'C', 'D', 'E'],
    manualColumnMove: [1,2,3,4,0],
    hiddenColumns: {
      columns: [2]
    },
    persistState: true,
    rowHeaders: false,
    dropdownMenu: true,
    renderAllRows: true
  });

});