Table column reorder not updating view

[Anzil-Aufait]

I want to reorder table column , when i change column order and title of column on a button and click value changes reflect on table.colmn data , but not the view.

The view is not updated after the data change.

I tried with ChangeDetectorRef , but it also updating the view.

Here is the stackblitz Demo

[mazdik]

For example, as implemented in dt-column-toggler:

  save() {
    this.table.columns.forEach(x => {x.tableHidden = true; x.index = 99; });
    this.selectedColumns.forEach((el, i) => {
      const index = this.table.columns.findIndex(x => x.name === el.id);
      this.table.columns[index].tableHidden = false;
      this.table.columns[index].index = i;
    });
    this.table.columns.sort((a, b) => (a.index > b.index) ? 1 : (a.index < b.index) ? -1 : 0);
    this.table.initColumns();
    this.table.events.onRowsChanged();
    this.table.events.onResizeEnd();

    this.childModal.hide();
    this.cd.markForCheck();
  }

try

    this.table.initColumns();
    this.table.events.onRowsChanged();
    this.table.events.onResizeEnd();

[Anzil-Aufait]

@mazdik , Thank you for the update. It's working fine.

What if i want to reset table.columns after reordering the column.

I can't assign this.table.columns it is a read-only property.

[mazdik]

initOrders = new Map();
this.table.columns.forEach(x => this.initOrders.set(x.name, x.index));
// reset
this.table.columns.forEach(x => {x.index = this.initOrders.get(x.name); });
this.table.columns.sort((a, b) => (a.index > b.index) ? 1 : (a.index < b.index) ? -1 : 0);