Primeng: Adding data in DataTable not reflecting on UI

[kamran-pervaiz]

Hi,

I upgraded primeng from version 1.0.0 to 4.0.3 because it contains a fix which I did for fileupload (#2745). When i regression tested my site, it seems adding data to DataTable is not working anymore. did you guys change the behaviour. it doesnt update the UI.

As below Gif file shows that its not refreshing the UI although I can see the object is added in the array in console. If i save the record, it does save it in database and will show on next refresh. I believe its not calling updateDataToRender but could be wrong.

I can provide the code if its necessary but is it a known bug?

primeng: 4.0.3
angular: 4.0.0

[ctrl-brk]

https://github.com/primefaces/primeng/issues/2219#issuecomment-300739505

[nag0538]

same issue:)

any way i used following code for temp solution.Hope this will resolve in feature updates.

use this as ngIf for table
//ngif
visible: boolean = true;

place this in your btn click action

this.visible = false;
setTimeout(() => this.visible = true, 0);

[kenisteward]

@kamran-pervaiz Make sure when you do the add it is using an IMMUTABLE object. What I mean by that is when you add the data you should not use

data.push({});

you should instead use

data = data.concat({});
or

data = [...data, {}];

This is explained under managing data
https://www.primefaces.org/primeng/#/datatable
DataTable uses setter based checking to realize if the underlying data has changed to update the UI so your data changes such as adding or removing a record should always create a new array reference instead of manipulating an existing array. For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item.

The reason is all the components use ChangeDetectorStrategy.OnPush in order to not update too many components when adding or removing elements.

[kamran-pervaiz]

@kenisteward I did change code to use spread operator than push but it was not working. I will try concat and see if it fixes the problem.

[cagataycivici]

https://github.com/primefaces/primeng/issues/3227 will also help.

[devhci]

Hi guys, I ran into the same issue, till yesterday data.push({}) was working BUT today it jus don't add into table view when new data is added. Any help is much appreciated

[devhci]

[immutable]="false" works with 4.1.0.rc3 :)