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.

@epitka `ng-show` did the trick. Can you please make you comment to an answer? I would like to accept it — N.Zukowski, Jul 06 '16 at 20:19

score 4 · Answer 1 · answered Jun 17 '19 at 07:51

4

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),

answered Jun 17 '19 at 07:51

SIVASANKARAN SIVADASSAN

41
2

score 3 · Answer 2 · answered Apr 09 '20 at 20:27

3

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

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

answered Apr 09 '20 at 20:27

hosam hemaily

412
5
17

Best professional way, tried with Angular 5 when defining `dtOptions: this.dtOptions = { order:[1,'asc'],columnDefs:[ { "targets": [ 3 ],"visible": false }] };` Bravo ! – Mlle 116 Sep 30 '20 at 09:21

score 1 · Answer 3 · edited Dec 21 '16 at 01:02

1

$scope.dtcolumns[0].visible = false

edited Dec 21 '16 at 01:02

Unheilig

16,196
193
68
98

answered Dec 21 '16 at 00:37

Mohammed Helly

11
3

It's work with column, but if we use the `withLightColumnFilter()` function, the filter is not hidden. There is a way to do that ? – Clement Cuvillier Sep 27 '17 at 11:05

score 0 · Accepted Answer · answered Jul 06 '16 at 20:27

0

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

answered Jul 06 '16 at 20:27

epitka

17,275
20
88
141

Angular documentation has examples. – epitka Aug 10 '17 at 14:07
How to possibly this in ajax data-table? – Jai Kumaresh Mar 20 '20 at 07:54
@JaiKumaresh add "visible": false in "columnDefs". – Thisara Subath Oct 16 '20 at 05:09

score 0 · Answer 5 · answered Mar 07 '18 at 09:55

0

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;
}

answered Mar 07 '18 at 09:55

AdvilUser

3,142
3
25
15

Angular datatables hide column

5 Answers5