Ngx-Datatable - rowIndex value incorrect when sorting column

Question

I'm using ngx-datatable which works great but just facing an issue on the following behaviour:

I have a toggle switch which changes the column property when toggled:

To change the property value, I'm using below code in template and component:

<ngx-datatable-column name="Activation Status" prop="activation_status">
  <ng-template ngx-datatable-cell-template let-value="value" let-row="row" let-rowIndex="rowIndex">
    <mat-slide-toggle *ngIf="value === 'ACTIVATED'" color="accent" checked="true" disabled="true">
      {{value}}
    </mat-slide-toggle>
    <mat-slide-toggle *ngIf="value === 'PENDING'" color="accent" checked="false" (change)="onToggle(rowIndex)">
      {{value}}
    </mat-slide-toggle>
  </ng-template>
</ngx-datatable-column>

    onToggle(rowIndex) {
    setTimeout(() => {
      this.rows[rowIndex].activation_status = 'ACTIVATED';
      this.rows = [...this.rows];
    }, 100);
    console.log(rowIndex);
  }

The property is updated fine as long as the column is not sorted.

If I sort the column, then the rowIndex is kept as per original value and the property is not updated.

Any solution for this ?

Thanks

Luca Brasi Luca Brasi · Accepted Answer · 2018-04-29T04:59:18

Ok I think that's a noob mistake in my TS code.

I was modifying the rows object directly, which from my understanding is an immutable.

So instead if I do the following by modifying the let-row object then it works:

<ng-template ngx-datatable-cell-template let-value="value" let-row="row" let-rowIndex="rowIndex">
  <mat-slide-toggle *ngIf="value=='ACTIVATED'" color="accent" checked="true" disabled="true">
    {{value}}
  </mat-slide-toggle>
  <mat-slide-toggle *ngIf="value=='PENDING'" color="accent" checked="false" (change)="onToggle(row)">
    {{value}}
  </mat-slide-toggle>
</ng-template>

onToggle(row: any) {
   setTimeout(() => {
   row.activation_status = 'ACTIVATED';
 }, 200);
   console.log(row);
}

Ngx-Datatable - rowIndex value incorrect when sorting column

1 Answers