Primeng: Datatable rows is not updated when source changes

[pmeems]

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

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.
http://stackoverflow.com/questions/42587424/primeng-datatable-doesnt-refresh

Current behavior

As mentioned here: http://stackoverflow.com/questions/42587424/primeng-datatable-doesnt-refresh I update the source of the datatable but the new rows are only shown after refreshing the page.

Expected behavior

The datatable should refresh itself when its datasource changes.

Minimal reproduction of the problem with instructions

http://stackoverflow.com/questions/42587424/primeng-datatable-doesnt-refresh

What is the motivation / use case for changing the behavior?

I'm dynamically filling the datatable with filenames of uploaded files.

Please tell us about your environment:

I'm on Azure, using npm

• Angular version: 2.0.X
  
  Angular v2.4.8

• PrimeNG version: 2.0.X
  
  PrimeNG v1.1.4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  
  All browsers

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Typescript

• Node (for AoT issues): node --version =

[MohammedFCIS]

I have the same issue

[rumfuddle]

+1

[bpbhat77]

Works fine with 2.0.6 but after updating to 4.0.0 it stopped working :(

[fistons]

Same problem here, with Angular 4.1.1 and PrimeNG 4.0.0

[fistons]

Ok, it is due to the removal of DoCheck in PrimeNG 4.0.0-RC4

You must recreate the array to notify the change, so
this.collection.push(newElement)
must become
this.collection = [...this.collection, newElement]

or just
this.collection = [...this.collectionwElement]
after removing an element

[westlake91361]

We have the same issue. We moved from PrimgNG 4.0.0-rc3 three days ago and now datatable on every single page cannot refresh all of a sudden! With this spread operator the performance slows down dramatically. Please FIX IT!!!

[makseo]

+1

I my case it doesn't work even with spread operator, because I need to add the new item on the begging.

this.collection = [newElement, ...this.collection];

[francarmona]

I have the same issue. If a recreate the array the performance is getting worse.

[ar53n]

I have the same issue. Not updated datatable

[kamran-pervaiz]

I have tried the above solution and its not reflecting on UI when adding new element. any other suggestion?

private onSubmit(): void {
        if (this.relationshipForm.valid) {
            let editableRelationship = this.relationships.find(relationship => relationship.inEditMode === true);

            if (editableRelationship) {
                this.createRelationship(editableRelationship);
                editableRelationship.inEditMode = false;
            } else
                // this.relationships.push(this.createRelationship(null));
                this.relationships = [...this.relationships, this.createRelationship(null)];

            this.relationshipUpdated.emit(this.relationships);
            this.showValidation = false;
            this.relationshipForm.reset();
        }
        else {
            this.showValidation = true;
        }
    }

[alapasset]

same issue :)

[siddharthaReddy]

+1 with
Angular - 4.1.3
PrimeNg - 4.0.3

However, when the data property is updated from API call, it gets reflected though.

[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);

[azuldotdev]

Another workaround:

Component html:

<p-dataTable [value]="dataValues">
[...]
</p-dataTable>

Component ts:

[...]
this.dataValues = this.dataValues.slice(); //Triggers data refresh
[...]

Hope this helps.

[brachi-wernick]

same issue for me. :cry:
do you plan to avoid it?
and it will work us without creating new instance per change.
I mean without the suggested workaround (this.data=[...this.data];)

[cagataycivici]

Please create a plunkr and we'll review, each case seems to be different. We've switched to setter based detection so require a new array.

[brachi-wernick]

in 4.1.0-rc.3 you have input immutable, if you set this to false then you have doCheck and no need reassign the array, actually you get the behavior of what you have before version 4

[sarahy18]

I have the same problem with my table.
brachi what I have to do to resolve it
Thanks

[brachi-wernick]

@sarahy18

1. Upgrade to 4.1.0-rc.3
2. In your html

<p-datatable [immutable]=false ....

[sarahy18]

Thanks but now I have another error
The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
With wich version of angular-cli its working?

[brachi-wernick]

@sarahy18 I'm not working with angular-cli

[vla47]

I have similar issue, when changing the value data to empty array, rows are still visible in the table, then assigning the value again just append the new data to the old one

[bl1428]

I ran into this issue with primeng 4.3.0. Manually triggering a round of Angular change detection did the trick for me.

See this StackOverflow answer for a few different ways to do that. I went with the ChangeDetectorRef approach.

There were some additional constraints in my case because I was rendering the datagrid inside an ng-bootstrap popover, so there was some weird interaction between ng-bootstrap and primeng. The other workarounds in this thread worked outside of the popover, but not inside.

[shorstki]

PrimeNg version 7.1.0, stil same issue exists. Angular 7.2.7.

Spread operator nor the slice method is not working, detectChanges() trigger not working, immutable property not available... Any clean way to fix p-table data rerendering?