Primeng: DataTable does not update on change detection in 4.0.0-rc.4 or later

[bomberblue07]

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

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
Using a DataTable with these settings:
<p-dataTable #dt [value]="shownActivities" [rows]="25" [paginator]="true">

The table does not update when shownActivities changes in primeng 4.0.0.rc.4 or later. Reverting to 4.0.0-rc.3 fixes the issue.

Expected behavior
The DataTable updates when the [value] variable changes

• Angular version: 4.X.X
  

• PrimeNG version: 4.0.0-rc.4 or later
  

• Browser: [all]
  

• Language: [TypeScript 2.2]

[ghost]

I have the same issue with 4.0.0 final; records are not updated when data source change.
Please, fix ASAP!

Thank you

[TracesMaker]

I have de same Issue, i want to update column data async, but the datatable does not load.

[tlcoder]

I also have the same issue.

[MayerMar]

duplicate of https://github.com/primefaces/primeng/issues/2660 imo

[xtoff]

I have the same issue.. too bad I have to downgrade to primeng 2 due to this issue :(

[MayerMar]

well, you have just to edit how you process data changes.

this.shownActivities = […this.shownActivities];
or
this.shownActivities = […this.shownActivities, activity];

Source: https://www.primefaces.org/primeng-4-0-0-rc4-released/

[bomberblue07]

Thanks @MayerMar , that did it for me.

[Arsenal83]

@bomberblue07, tell me please, how did you fix the problem?

[bomberblue07]

@Arsenal83 After you're done manipulating the array, you just need to change the array reference by rebuilding the array: this.myArray = [...this.myArray]; This will trigger the change detection in the data table.

If all you're doing it appending to an array, this is the preferred way this.myArray = [...this.myArray, newElement];

That should be it. It's additional work on our end, but the tables do seem to be more performant this way.

[pantonis]

@MayerMar thanks man took me hours to solve the problem

[Neutrino-Sunset]

@bomberblue07 That strikes me as a really poor solution. I have a view component that has a reference to an array generated by the model layer and a datatable bound to that array. When the model updates the contents of the array the view does not know this has occured.

Even if the view did know that the contents of the model array have changed it does not want to be displaying the contents of a copy of the model's array anyway, it wants to be displaying the contents of the model array itself, otherwise we have multiple redundant copies of the same potentially large array.

The model itself certainly doesn't want to be recreating this array everytime anything changes simply in order for the view updating to work correctly, since the model should be isolated from any view concerns at all.

How on earth having to copy the entire array can be called 'more performant' I don't know. More performant than what?

[bomberblue07]

@Neutrino-Sunset Firstly, I am not a contributor or owner of this project, just a user; so if you have concerns, I'm not the person you should be throwing shade at 😃 Secondly, if you want your tables to use the "old" method because they might be more performant for your project, set the immutable property to false

Further reading on this: https://www.primefaces.org/primeng-4-1-0-rc3-released/ See section on "Immutable vs Mutable"

https://www.primefaces.org/primeng/#/datatable See section on "Change Detection"