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
– N.Zukowski, Commented Jul 6, 2016 at 20:19

SIVASANKARAN SIVADASSAN · Accepted Answer · 2019-06-17 07:51:13Z

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, 2019 at 7:51

SIVASANKARAN SIVADASSAN

412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hosam hemaily · Accepted Answer · 2020-04-09 20:27:28Z

3

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

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

answered Apr 9, 2020 at 20:27

hosam hemaily

4586 silver badges18 bronze badges

1 Comment

Aless Hosry Over a year ago

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

Unheilig · Accepted Answer · 2016-12-21 01:02:04Z

1

$scope.dtcolumns[0].visible = false

edited Dec 21, 2016 at 1:02

Unheilig

16.3k193 gold badges71 silver badges101 bronze badges

answered Dec 21, 2016 at 0:37

Mohammed Helly

113 bronze badges

1 Comment

Clement Cuvillier Over a year ago

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

epitka · Accepted Answer · 2016-07-06 20:27:02Z

0

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

answered Jul 6, 2016 at 20:27

epitka

17.6k21 gold badges91 silver badges146 bronze badges

3 Comments

epitka Over a year ago

Angular documentation has examples.

Jai Kumaresh Over a year ago

How to possibly this in ajax data-table?

Thisara Subath Over a year ago

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

AdvilUser · Accepted Answer · 2018-03-07 09:55:15Z

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 7, 2018 at 9:55

AdvilUser

3,5123 gold badges27 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular datatables hide column

5 Answers 5

Comments

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related