CODEWITHSUNDEEP
angularprimengprimeng-datatable
Arianule
Arianule

Reputation: 9043

Updating the actual values upon filtering using PrimeNG

I am using PrimeNG with Global filter added to my table:

 <input #gb type="text" pInputText size="50" placeholder="Filter">

Datatable:

<p-dataTable *ngIf="users != null && users.length > 0" [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb">

I need to send mails to the users that have been filtered. I noticed however that the users count (amount of users) does not update upon filter.

The records are displayed correctly based on the filter in the table but mailing these users would send the mail to all users retrieved from the DB.

Is there a way of updating the actual users' amount upon filter using PrimeNG filter option?

Upvotes: 3

Views: 5170

Answers (1)

Stefan Svrkota
Stefan Svrkota

Reputation: 50623

DataTable component has a variable called filteredValue and filtered values are stored in that variable. There are two ways to get filtered values:

First way

You can use ViewChild to get a reference to DataTable object and get the users you filtered:

Template

<p-dataTable #dataTable *ngIf="users != null && users.length > 0" [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb">

Component

import { Component, ViewChild } from '@angular/core';
import { DataTable } from 'primeng/primeng';

@ViewChild('dataTable')
dataTable: DataTable;

Now that you have reference to DataTable component, it is easy to get filtered users:

printFilteredUsers() {
  console.log(this.dataTable.filteredValue);
}

Second way

DataTable component has event called onFilter which is triggered each time DataTable's content is filtered:

Template

<p-dataTable *ngIf="users != null && users.length > 0"
  [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb"
  (onFilter)="printFilteredUsers($event)">

Component

printFilteredUsers(event: any) {
  console.log(event.filteredValue); // filtered users
  console.log(event.filters); // applied filters
}

PrimeNG's DataTable is well documented, I suggest checking it out. You can do it here.

Upvotes: 5

Related Questions