title: handsontable: hide some columns without changing data array/object
body: <p>I have a data to show in grid. I am using handsontable to show data. Each 3rd column is computed as difference of previous two (for example, 3rd column is rendered as the sum of 1st and 2nd column; this is done by custom renderer taking sum of <code>i-1</code> and <code>i-2</code> columns). </p>
  
  <p>This is my custom renderer for "difference" columns:</p>
  
  <pre><code>var val1 = instance.getDataAtCell(row, col - 1),
      val2 = instance.getDataAtCell(row, col - 2),
      args = arguments;
          args[5] = val2 - val1;
          if (args[5] !== 0) {
              $(td).addClass('grid-column-class-nonzero');
          }
          Handsontable.renderers.NumericRenderer.apply(this, args);
  </code></pre>
  
  <p>I need to have a "switch". This switch would show/hide columns. If switch is ON then I need to show all columns. If switch is OFF, I need to show only columns that contains differences. 
  So, can you suggest - how to hide columns in hansontable? </p>
  
  <p><strong>EDIT:</strong> I have updated my code as suggested by @ZekeDroid.</p>
  
  <pre><code> // on 'switch click' I modify colsToHide global array and do table re-render
   $('#my-id').handsontable('render');
  </code></pre>
  
  <p>And this is my custom renderer for columns that should be hidden/shown based on switch:</p>
  
  <pre><code>var colsToHide = [];
  var classModel1Renderer = function (instance, td, row, col, prop, value, cellProperties) {
      "use strict";
      if (colsToHide.indexOf(col) &gt; -1) {
          td.hidden = true;
      } else {
          td.hidden = false;
      }
  
      Handsontable.renderers.TextRenderer.apply(this, arguments);
      $(td).addClass('grid-column-class-model1');
  };
  </code></pre>
  
  <p>This code indeed hides/shows columns, but it doesn't work for header column.</p>