Table refresh issue in PrimeNG

Question

I am displaying data by using p-dataTable in PrimeNG. I have a requirement where user can delete any row data.

I added a logic for deletion but after deletion table is not refreshing.

Also, I want to stay in the same page number after deletion

Here is my sample code :

<p-dataTable [value]="filteredInv" scrollable="true" scrollHeight="calc(100vh - 300px)" [rows]="list" [paginator]="true" 
    responsive="true" sortField="sku" sortOrder="1" [resizableColumns]="false"  class="custom-pagi" 
    [hidden]="inCall" [(first)]="pageNo" (onPage)="changePage($event)" (onPageChange)="paginate($event)" [rowTrackBy]="rowTrackBy">
        <p-column title="sku" field="sku" header="SKU" [style]="{'width':'120px'}" styleClass="sku-header border-column text-center" sortable="true"></p-column>
        <p-column title="name" field="name" header="Item Name" styleClass="no-border-column-removed text-left"></p-column>
        <p-column title="max" field="max" header="Quantity" styleClass="no-border-column-removed text-left"></p-column>
        <p-column title="updatedAt" field="updatedAt" header="Date" styleClass="no-border-column-removed text-left">
            <ng-template let-ri="rowIndex" let-rowdata="rowData" pTemplate="body">
                {{(rowdata.updatedAt) | date:'MM/dd/yyyy' }}
            </ng-template>
        </p-column>
        <p-column header="Actions" [style]="{'width': '150px'}" styleClass="no-border-column-removed text-left">
            <ng-template let-ri="rowIndex" let-rowdata="rowData" pTemplate="body">
                <md-icon class="fl cursor" (click)="editInventory(rowdata, ri)">mode_edit</md-icon>
                <md-icon class="fl cursor" (click)="deleteSKU(rowdata, ri)" style="margin-left:8px;">delete</md-icon>
            </ng-template>
        </p-column>
</p-dataTable>

Here is my deleteSKU() logic

deleteSKU(data, ind) {
let dialogRef = this.dialog.open(DeletedialogComponent, {
data: {
message : data.sku
}
});
dialogRef.afterClosed().subscribe(result => {
if (result && data.id) {
let indx = this.filteredInv.indexOf(data)
this.http.removeInven(data.id).subscribe(res => this.removeRow(indx))
}
});
}

removeRow(indx) {    
  this.filteredInv.splice(indx, 1);
}

Did you ever figure this out? I have the same issue. All of my primeng dataTables or dataGrids do not refresh regardless of what I'm doing- updating the underlying data, the color or the rows, or the variables tied to the [hidden] for p-columns. I've tried with all primeng 4+ and doesn't refresh in any version. — snowleopard
yes i was able to do it.Use slice() after deleting or adding a row data for example in my case i added the code this.filteredInv = this.filteredInv.slice(); — Jellaraj Yadav

ganesh kalje ganesh kalje · Accepted Answer · 2018-09-04T11:21:15

As per PrimeNg Document

Table may need to be aware of changes in its value in some cases such as reapplying sort. For the sake of performance, this is only done when the reference of the value changes meaning a setter is used instead of ngDoCheck/IterableDiffers which can reduce performance. So when you manipulate the value such as removing or adding an item, instead of using array methods such as push, splice create a new array reference using a spread operator or similar.

removeRow(indx) {    
  this.filteredInv.splice(indx, 1);
  this.filteredInv= [...this.filteredInv];
}

Table refresh issue in PrimeNG

1 Answers