Problem in updating rows - ngx-datatable and Angular 6

[ali-hasani]

Hi everybody ! I updated my project to Angular 6, but after that I can't add a new row to ngx-datatable .. There is no problem with initializing it, but when i want to add a new row to the current rows, it doesn't work and the library doesn't show any Error or Warning .. It would appreciate it, if you help me ..

[Moik]

I encountered the similar issue. After updating my project to Angular 6 and ngx-datatable to 13.1.0 I could not add a new column. There are no errors, table just doesn't respond to any action. But when i add one more column all work just fine. I could not figured out what caused this behaviour, so I ended up with spare empty column for now.

[ghost]

Hello I had same problem with ngx-datatable when I wanted to remove a row, After some research I found out ngx-datatable doesn't detect any change because it assigned by value not reference,So when you want to change your model you should assign your model to new value of your model !! Javascript spread operator can do this for you : this.model = [...this.model]

also you can see this link : https://swimlane.gitbook.io/ngx-datatable/change-detection

[ali-hasani]

Thanks a lot Uncle Ali ..

[rashi04]

I have a requirement to update datatable data from different component. I have tried the following as per the doc: this.rows[i]['gender'] = 'Female' this.rows = [...this.rows]; This works when this piece of code is in the same component which renders the table. If I do it from other component it does not work. Could anyone help me on this?

[saveychauhan]

I have a requirement to update datatable data from different component. I have tried the following as per the doc: this.rows[i]['gender'] = 'Female' this.rows = [...this.rows]; This works when this piece of code is in the same component which renders the table. If I do it from other component it does not work. Could anyone help me on this?

use service to update the component, i did the same to update different components .

[FractalMind]

To enable "Change detection" with arrays you can clone your array. Took me a while to get that.

var clonedArray = JSON.parse(JSON.stringify(nodesArray))

[meenakshikp03]

Hi, I am facing the same issue after updating the library to latest version (19.0.0 and Angular 11) and it was working fine for version 16.1.0. Tried all the methods suggested here. And tried updating the rows using the spread operator -> this.rows = [...this.rows]; Any help would be appreciated.

Thanks in advance!

[nikolastj]

I also have the same Issue with Angular 11 and table 19.0.0

[FractalMind]

Hi, I am facing the same issue after updating the library to latest version (19.0.0 and Angular 11) and it was working fine for version 16.1.0. Tried all the methods suggested here. And tried updating the rows using the spread operator -> this.rows = [...this.rows]; Any help would be appreciated.

Thanks in advance!

this.itemListToDetectChange = this.itemListToDetectChange
// The inner pointer under the hood didn't change so won't trigger change detection

Try

this.itemListToDetectChange = JSON.parse(JSON.stringify(this.itemListToDetectChange))
// or
this.itemListToDetectChange = Object.assign( {}, this.itemListToDetectChange)

This will force the creation of new pointers

[chrisdurning22]

I was also facing the same issue (ngx-datatable 20.0.0 & Angular 10.1.1). None of the above suggestions helped me. On doing this:

this.model.push(newItem);
this.model = [...this.model];

the _rows property on the DatatableComponent updates correctly, however, the _internalRows does not. Upon looking at the DatatableComponent I noticed the 'rows' setter and how it sets _internalRows:

@Input() set rows(val: any) {
    this._rows = val;

    if (val) {
      this._internalRows = [...val];
    }
.....

Can anyone figure out why this._internalRows isn't getting updated by just doing the this.model = [...this.model] ?

The solution I found was to set the updated model using the 'rows' setter on the DatatableComponent like so:

@ViewChild('table') table;

updateModel(newModelValue) {
    // update model with new value
    this.model.push(newModelValue);

    // invoke rows setter passing updated model
    this.table.rows = this.model;
}