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

I have a refresh button that is outside the primeNG datatable. How do I programmatically trigger to refresh the datatable?

something like this:

<div class="pull-right">
  <button
    id="FilterBtnId"
    (click)="???">
  </button>
                </div>
<p-dataTable
   #datatable
   [value]="datasource"
   [(selection)]="jobs"
   [totalRecords]="totalRecords"
   selectionMode="multiple"
   resizableColumns="true"
   [pageLinks]="10"
   [rows]="10"
   [rowsPerPageOptions]="[10, 25, 50, 100]"
   [paginator]="true"
   [responsive]="true"
   [lazy]="true"
   (onLazyLoad)="getNewDatasource($event)"
   (onRowSelect)="onRowSelect($event)"
   >
     <p-column [style]="{'width':'40px'}" selectionMode="multiple"></p-column>
     <p-column *ngFor="let col of dt.colDefs" [field]="col.field" [header]="col.headerName" [sortable]="true">
     </p-column>
</p-dataTable>

Solution 1:^[1]

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">

Solution 2:^[2]

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>

Solution 3:^[3]

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

Solution 4:^[4]

If you refresh the list in the component, the table refresh automatically. Example after confirm a delete operation:

import { Component } from '@angular/core';
import { Interface } from '../..//model/interface.model'
import { InterfaceService } from '../../service/interface.service'
import { ButtonModule } from 'primeng/primeng';
import { ConfirmDialogModule, ConfirmationService } from 'primeng/primeng';

@Component({
    templateUrl: './interfaces.component.html'
})
export class InterfacesComponent {

    interfaces: Interface[];

    constructor(
        private interfaceService: InterfaceService,
        private confirmationService: ConfirmationService
    ) { }

    ngOnInit() {
        this.find();
    }

    find() {
        this.interfaceService.query().then(interfaces => this.interfaces = interfaces);
    }

    confirm(id: number) {
        this.confirmationService.confirm({
            message: 'Are you sure that you want to delete this record?',
            accept: () => {
                this.interfaceService.delete(id).then((_interface) => {
                    this.find();
                });            
            }
        });
    }

}

Solution 5:^[5]

Pls Try its working for me

refreshTable(){this.loadCustomers(this.lastEvent);}

loadCustomers(event: LazyLoadEvent) { this.lastEvent = event; this.loading = true;  this.service.getAll(event).subscribe( data => { this.loading = false; this.tableData = data['results']; }, error => { this.loading = false; } ); }

Solution 6:^[6]

I don't know since when it is available but you can call the method createLazyLoadMetadata to create the object you need for the server with sort, filter etc. So you can simply write

@ViewChild('dt') dataTable: Table;
if (this.dataTable) {
   this.loadData(this.dataTable.createLazyLoadMetadata());
}

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

Solution 7:^[7]

Rendere2 can be helpful

@ViewChild('table') table: Table;

constructor(private renderer: Renderer2) {
}

refreshTable(){
    const dataTableRef = this.renderer.selectRootElement(this.table.el.nativeElement, true);
    dataTableRef.focus();
}

dataTableRef.focus() will refresh the grid

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mauricio Poppe
Solution 2	Nitin Jangid
Solution 3	Iogui
Solution 4	jmfvarela
Solution 5	Shazvan Hanif
Solution 6	user2114638
Solution 7	Hamid Noahdi

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]