ng-show doesn't work in handsontable column

Question

I am using Handsontable 0.34.5 with AngularJS 1.6.5 and ngHandsontable 0.13 wrapper.

I need to hide the handsontable table column according to the condition.

I try to do it with a ng-show or ng-hide directive but it does not work.

Handsontable HiddenColumns plugin does not seem to be supported in 0.34.5 version.

Here is the code:

<hot-table settings="tableSettings" datarows="items">
    <hot-column ng-show="false" data="id" title="'ID'"></hot-column>   
</hot-table>

Here is the demo.

How can i hide handsontable with angular directive?

UPDATE:

Currently i am using ng-if directive. But it has an issue that I am not satisfied with: It recreates DOM when condition is true and column is being added to the end of the table, but not the place it was prescribed for. Check it out here

Answer 1

To manipulate columns, avoid the <hot-column> directive. Instead use the columns attribute:

<hot-table col-headers="true" 
           datarows="ctrl.data" 
           columns="ctrl.columns">
</hot-table>

this.columns = [
    { data: 'id',    title: 'ID',    readOnly: true  },
    { data: 'name',  title: 'Name',  readOnly: true  },
    { data: 'price', title: 'Price', readOnly: false }
];


var deletedName;  
this.hideName = function() {
    deletedName = this.column.splice(1,1);
};
this.showName = function() {
    this.column.splice(1,0,deletedName);
};