How to programmatically trigger refresh primeNG datatable when a button is clicked

The Angular form guide contains a small trick that could be used as a workaround, it consists on recreating the dom by adding *ngIf to the element to control its visibility

visible: boolean = true;updateVisibility(): void {  this.visible = false;  setTimeout(() => this.visible = true, 0);}<button (click)="updateVisibility()"><p-dataTable *ngIf="visible">

We can have small trick to update the dataTable here:we can recreating the div by adding *ngIf to the element to control its visibility by this it will update dataTable also.

    visible: boolean = true;    updateVisibility(): void {      this.visible = false;    }    <button (click)="updateVisibility()">    <div *ngIf="visible">        <p-dataTable></p-dataTable>    </div>

If the table is in Lazy mode (loads data dynamically from a server with pagination and so on...) a better way to do this (preserving the page number, sorting, filter and so on) is listed here.

The solution is:

On your component template:

<p-table [value]="yourData" [lazy]="true" (onLazyLoad)="loadUserData($event)" ...

On your component code:

private lastTableLazyLoadEvent: LazyLoadEvent;loadUserData(event: LazyLoadEvent): void {    this.lastTableLazyLoadEvent = event;    // Lots of beautifull data loading code here     // (like calling a server trough a service and so on)...}...

And when you want to reload the table (e.g. when you insert or delete an item from the server):

this.loadUserData(this.lastTableLazyLoadEvent);