Angular datatables hide column

Question

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.

Bestrew

create jsfiddle or make full example here on SO. – Mayce

did you look at ng-show directive? – Abel

@Abel ng-show did the trick. Can you please make you comment to an answer? I would like to accept it – Bestrew

Answer 1

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

Abel

Angular documentation has examples. – Abel

How to possibly this in ajax data-table? – Pump

@JaiKumaresh add "visible": false in "columnDefs". – Bridgeboard

Answer 2

The Datatable API for visible : column().visible();

Reference link : https://datatables.net/reference/api/column().visible()

Example Code : DTColumnBuilder.newColumn("columname").withTitle("column title").withOption('visible', false),

Claiborn

Answer 3

if you are working on type script file , you can do like this

"columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            },

Casease

Best professional way, tried with Angular 5 when defining dtOptions: this.dtOptions = { order:[1,'asc'],columnDefs:[ { "targets": [ 3 ],"visible": false }] }; Bravo ! – Skyler

Answer 4

$scope.dtcolumns[0].visible = false

Sofiasofie

It's work with column, but if we use the withLightColumnFilter() function, the filter is not hidden. There is a way to do that ? – Mariel

Answer 5

Maybe not the best solution, but I got this working by setting a class like:

$scope.dtColumns = [
    DTColumnBuilder.newColumn('hiddencol').withClass('hiddencol'),
    ...
]

Then, use CSS to hide it.

.hiddencol {
    display: none;
}

Mopup