Angular datatables hide column

Issue

I am willing to hide some columns (actually from the example below the column with index 6) from user view but still want to have them in the DOM to make search access the values.

I use DTColumnDefBuilder:

$scope.dtColumnDefsTabs = [
                DTColumnDefBuilder.newColumnDef(0).notSortable(),
                DTColumnDefBuilder.newColumnDef(1),
                DTColumnDefBuilder.newColumnDef(2).withOption('orderDataType', 'content-categories'),
                DTColumnDefBuilder.newColumnDef(3).withOption('orderDataType', 'markers'),
                DTColumnDefBuilder.newColumnDef(4).notSortable(),
                DTColumnDefBuilder.newColumnDef(5).notSortable().withClass('no-background-image'),
                DTColumnDefBuilder.newColumnDef(6).withOption('visible', 'false')
            ];

In the <thead> html I define empty <td>:

<th></th>

And add data in the <tbody>:

<td>{{ entry.device.device }}</td>

So I tried all possibilities which I could find:

DTColumnDefBuilder.newColumnDef(6).withOption('visible', 'false')

DTColumnDefBuilder.newColumnDef(6).withOption('visible', false)

$scope.dtColumnDefsTabs[6].visible = false;

DTColumnDefBuilder.newColumnDef(6).notVisible()

Nothing worked, the column is still displayed.

P. S. All columns from (id=0) to (id=5) fill the whole table width (every <td> has a css width setting)

P. P. S. I don't want to show the column with responsive: true option.

Solution

Use ng-show directive to show and hide element, but keep it in DOM.

Answered By - epitka