Unable to hide handsontable column header when i use td.hidden = true; cell render - handsontable

Question

I have used the following custom column render code for hiding handsontable column
function getCustomRenderer() {
return function(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (colsToHide.indexOf(col) > -1) {
td.hidden = true;
} else {
td.hidden = false;
}
}
but when i set colHeaders: true, the column headers does not get hidden.
http://jsfiddle.net/LkLkd405/91/

Answer 1

Correct, you can't hide the column headers that way since the rendering happens independently of the column renderers. I will go ahead and assume your endgoal is to put in data into your data object that you would like to hide, like a database ID. The solution is to use the columns definition.
This option, if you read the documentation carefully, allows you to define which columns to show. So, for example, if you had 3 columns plus your ID column, you would have:
var colHeaders = ['col1', 'col2', 'col3', 'ID'];
// assume `dataArray` is an aray you previously defined, with row Objects with 4 keys each, corresponding to the first 3 real data columns and the fourth as the ID.
columns: [{
data: colHeaders[0],
type: 'text'
},{
data: colHeaders[1],
type: 'text'
},{
data: colHeaders[2],
type: 'text'
}]
Now you don't even need to have a custom renderer as the table will omit that fourth value.

Answer 2

hot.addHook('afterGetColHeader', RemoveUnWantedHeader);
function RemoveUnWantedHeader(col, th) {
if (th.textContent == "A" || th.textContent == "B" || th.textContent == "C"
|| th.textContent == "D" || th.textContent == "E"
|| th.textContent == "F" || th.textContent == "G" || th.textContent == "H"
|| th.textContent == "I" || th.textContent == "J"
|| th.textContent == "K" || th.textContent == "L" || th.textContent == "M"
|| th.textContent == "N" || th.textContent == "O"
|| th.textContent == "P" || th.textContent == "Q" || th.textContent == "R"
|| th.textContent == "S" || th.textContent == "T"
|| th.textContent == "U" || th.textContent == "V" || th.textContent == "W"
|| th.textContent == "X" || th.textContent == "Y" || th.textContent == "Z"
|| th.textContent == "AQ" || th.textContent == "AR" || th.textContent == "AS"
|| th.textContent == "AT" || th.textContent == "AU" || th.textContent == "AV" || th.textContent == "AW") {
th.style.display = 'none';
}
}
I have used hook to remove the headers I need to. I tried the same inside my HandsonTable it doesn't work so I tried the same using addHook and worked like charm.
afterGetColHeader: It is a function which will be rendered when header is called.
RemoveUnWantedHeader: It is my own callback. You can have your own conditions and can remove.
Reference: Handsontable Add Hooks