Ngx-datatable: Ability to show/hide columns

[ethanve]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Feature

I would like to have the ability to show/hide different columns and let the table resize accordingly

[mattvaughan]

Checkout the toggling demo. You might have to write some of your own code to get the table to resize, but this will at least allow your to toggle columns. http://swimlane.github.io/angular2-data-table/

[amcdnl]

Ya, there is a demo on how to do this, https://github.com/swimlane/angular2-data-table/blob/master/demo/columns/column-toggle.ts

[phasjim]

Hello @amcdnl, the link to the demo is not working any more 😢

EDIT: Nevermind, I found it.
https://github.com/swimlane/ngx-datatable/blob/master/demo/columns/column-toggle.component.ts

[darkurse]

FYI, this demo is not working anymore with version 11.1.3

[pssubashps]

For me it is working, but it is taking too much time to get reflect

[amcdnl]

Checkout the demo now. Its working and I added the ability to do templates :)

[pssubashps]

Didn't see the templates in the demo

[darkurse]

By the way, an alternative is to use css to show/hide columns. In my case I need to hide last column containing buttons when in @media print mode.

ie. When creating your column, just specify the css classes for { headerClass: 'dont-print', cellClass: 'dont-print' }..

@amcdnl, do you think it would be hard to have the datatable to recalculate column redistribution based on column width. By that I mean that if a column is hidden, its width will collapse. if the component can detect it with @HostBinding('style.width') than it can act on it and 'force' this redistribution .. What do you think ?

[amcdnl]

@pssubashps - it was a new addition :)

[raghuam]

Trying to add the class for column and its working on load, we are trying to implement on button click, it will work only after clicking particular cell.
Bellow is the code.

 //button code
<button (click)  ="toggleme()">Toggle</button>   

 //table column code
<ngx-datatable-column 
      *ngFor="let col of columns" 
      [name]="col.name"  [headerClass]="getIsShowColName"  [cellClass]="getIsShowColName">
    </ngx-datatable-column>

//.ts File code
 toggleme() {    
    _this.isShowColName = false;
  }
  getIsShowColName({ row, column, value }) {   
   if(column.name =='name') {
    return {
      'hide': !_this.isShowColName
    };
   }

  }

Any help appreciated, Thanks

[pssubashps]

@amcdnl @darkurse we are facing some issue while doing show hide using css classes

[xyrintech]

There is an issue for the Column width when we hide and display column. It does not recalculate

[nikoszs]

@xyrintech https://github.com/swimlane/ngx-datatable/issues/423#issuecomment-377068947

[ermarkar]

Any solution so for?

https://github.com/swimlane/ngx-datatable/blob/master/demo/columns/column-toggle.component.ts

but i have different template for every column. so in this case how can i hide the specific columns?

I tried providing [width]="0" but this is not working even :(

[adrianodaddiego]

work for me:

<ngx-datatable-column name="Secret Price" ngIf="!HidePrice" > <ng-template let-row="row" ngx-datatable-cell-template> {{ row.Price }} </ng-template> </ngx-datatable-column>

[bmesin]

Current show/hide columns functionality appends columns at the end of the table.
How to make it just hide and then show at exact position as it was?

[Parthan-Sachin]

every link provided here is expired. Please provide a clear solution.

[TamoMaez]

every link provided here is expired. Please provide a clear solution.

http://swimlane.github.io/ngx-datatable/#toggle