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

Question

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>

score 28 · Answer 1 · answered Oct 17 '16 at 01:21

28

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

answered Oct 17 '16 at 01:21

Mauricio Poppe

4,817
1
22
30

awesome and simple! – MohamadAbdelfatah Mar 29 '18 at 08:02
At first I didn't dare to use this solution because it seemend to simple for me it was just unbelievable at the all it was the simplest and the best solution ever lol I am just wondering why primeface doesnt provide a method that do the trick though =/ – Akyo Jun 27 '18 at 09:23
Thanks I used this and it worked, but I am getting ExpressionChangedAfterItHasBeenCheckedError. – P. Huhn yesterday – Phil Huhn Sep 14 '18 at 12:21
this is a better solution since making another call to the API is unnecessary. Big up. – Ahmed Hamed May 21 '19 at 11:43
2

using this trick inside popup caused fast hiding/showing experience that was unpleasant to me. – Hamid Noahdi Feb 20 '21 at 16:33
2

this works, but unfortunately causes "flicker", the table disappears and reappears at the correct size, probably an OK trade-off, but be aware of it. – BlackICE May 26 '21 at 14:51

score 6 · Answer 2 · answered Apr 03 '18 at 09:44

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>

score 6 · Answer 3 · answered Jun 18 '21 at 18:55

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

score 2 · Answer 4 · answered Feb 25 '22 at 16:54

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)...
}

score 1 · Answer 5 · edited Jan 29 '23 at 22:06

1

Just use a variable that can remove the primeng datatable and reassign it.

visible: boolean = true;
updateVisibility(): void {
  this.visible = false;
}
<button (click)="updateVisibility()">

<div *ngIf="visible">
    <p-dataTable></p-dataTable>
</div>

This is a easy solution.What it does is just remove the dom of the element and reassign it

edited Jan 29 '23 at 22:06

SwissCodeMen

4,222
8
24
34

answered Jan 25 '23 at 07:25

Faisal ahmed

59
4

score 0 · Answer 6 · answered Jun 11 '17 at 19:51

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

}

score 0 · Answer 7 · answered Oct 28 '21 at 11:56

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

score -1 · Answer 8 · answered Feb 20 '21 at 16:27

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

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

8 Answers8

Linked