Hiding columns of handsontable from javascript

Question

Is there any way i can hide HOT columns from javascript? The requirement is such that the column to hide will come as a parameter in javascript and based on that the respective column will show hide accordingly.

The HOT has rowHeaders and colHeaders and the data with 20 columns.

Please advise.

Answer 1

OUTDATED SOLUTION

Ok I founnd a possible solution. I tested it out on my own system but it's actually quite simple.

You should be using a customRenderer in your columns option. Read up about this if you aren't already. The idea is that you're giving each cell its own renderer. In this custom function, you can do something like this:

var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns

function getCustomRenderer() {
  return function(instance, td, row, col, prop, value, cellProperties) {
    if (colsToHide.indexOf(col) > -1) {
      td.hidden = true;
    } else {
      td.hidden = false;
    }
  }
}

What this renderer does is hide the cells that the var colsToHide specify. All you do now is add a DOM element that lets the user pick which and so every time the table gets rendered (which happens basically after any change, or manually triggered need be), the cells in the columns specified will be hidden, keeping the data array intact like you described. And when not in colsToHide they are re-rendered so make sure you get that working as well.

Here I implemented it with very basic functionality. Just enter the index of a column into the input fields and watch the magic happen.

http://jsfiddle.net/zekedroid/LkLkd405/2/

Better Solution: handsontable: hide some columns without changing data array/object