Refresh ngx-datatable headers

Question

For a datatable I'm building I need to use dynamic headers (when a button is clicked, different data is loaded into the table and the headers need to change). I'm using this to switch between soft-deleted users and regular users (the delete column changes into a recover column).

Updating the rows, and with it the table works as described like this: this.rows = [...this.rows];

Updating my columns is a whole other story. I've tried it the same way using this.columns = [...this.columns]; but this doesn't refresh the table headers. Now what I have is a table where the header only changes when it is refreshed in the background and I can't seem to find a way to trigger a refresh myself. My table looks like this:

<ngx-datatable
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'flex'"
  [sortType]="'single'"
  [headerHeight]="50"
  [footerHeight]="50"
  [selected]="selected"
  (select)='onSelect($event)'
  [selectionType]="'checkbox'"
  [selectAllRowsOnPage]="true"
  [limit]="rowLimit"
  [reorderable]="false"
  [rowHeight]="'auto'" style="width: 100%">
</ngx-datatable>

And this is the code where I update the columns:

this.route.params.subscribe(params => {
  this.state = params.state;

  if (this.state === 'deleted') {
    this.columns[columnIndex].name = 'Recover';
  } else if (this.state === 'notactivated') {
    this.columns[columnIndex].name = 'Delete';
  }

Kay Lucas Kay Lucas · Accepted Answer · 2018-09-24T12:53:28

Okay, it took me a few more hours but I figured it out. It's a bit hacky but I can force a column refresh if I set the column id's to undefined. The code below works and forces a refresh every time the column header is updated (I called it switchedColumn):

// If there is a switchedColumn, remove the old column and add this as a new column to force a refresh
if (switchedColumn && switchedColumn.$$id) {
  this.columns = this.columns.filter(c => c.$$id != switchedColumn.$$id);
  switchedColumn.$$id = undefined;
  this.columns = [...this.columns, switchedColumn]
}

Refresh ngx-datatable headers

1 Answers