Handsontable example

by handsoncode

HTML

<button class='hideCols'>hide columns</button>
<button class='hideRows'>hide rows</button>
<button class='showCols'>show all columns</button>
<button class='showRows'>show all rows</button>

<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"> </div>
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://docs.handsontable.com/pro/1.3.2/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.3.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

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

  var example1 = document.getElementById('example1');

  var hot = new Handsontable(example1, {
    data: Handsontable.helper.createSpreadsheetData(50, 50),
    colHeaders: true,
    rowHeaders: true,
    contextMenu: true,
    outsideClickDeselects: false,
    hiddenColumns: {
      columns: [],
      indicators: true
    },
    hiddenRows: {
      rows: [],
      indicators: true
    }
  });

  function hideMoreColumns(startCol, endCol) {
    var columns = [],
      amount = endCol - startCol;

    for (var i = 0; i < amount; i++) {
      columns[i] = startCol;
      startCol++
    }
    return columns
  }

  function hideMoreRows(startRow, endRow) {
    var rows = [],
      amount = endRow - startRow;

    for (var i = 0; i < amount; i++) {
      rows[i] = startRow;
      startRow++
    }
    return rows
  }

  hot.selectCell(0, 0);
  console.log(hot.getSelectedRange().from.col);

  var hideCols = document.querySelector('.hideCols');
  hideCols.addEventListener('click', function() {
    var start = hot.getSelectedRange().from.col,
      end = hot.getSelectedRange().to.col;

    hot.updateSettings({
      hiddenColumns: {
        columns: hideMoreColumns(start, end),
        indicators: true
      }
    });
  });

  var hideRows = document.querySelector('.hideRows');
  hideRows.addEventListener('click', function() {
    var start = hot.getSelectedRange().from.row,
      end = hot.getSelectedRange().to.row;

    hot.updateSettings({
      hiddenRows: {
        rows: hideMoreRows(start, end),
        indicators: true
      }
    });
  });

  var showCols = document.querySelector('.showCols');
  showCols.addEventListener('click', function() {
    hot.updateSettings({
      hiddenColumns: {
        columns: [],
        indicators: true
      }
    })
  });

  var showRows = document.querySelector('.showRows');
  showRows.addEventListener('click', function() {
    hot.updateSettings({
      hiddenRows: {
  ...