Filtering Data Table in PrimeNG

Question

How can I get the number of rows after filtering using PrimeNG's default filters in data table.

[totalRecords]="totalRecords" always shows the records count which is fetched initially.

Even though after filtering, totalRecords value remains same and does not change after filtering.

Example: initially totalRecords is 50 and after filtering, no.of records it shows in data table is 15. But I cannot get the value 15, instead getting 50.

Is there any way ?

Marylou

Answer 1

Supposing you have a reference to your datatable component, just ask totalRecords property on it :

<p-dataTable [value]="cars" [rows]="10" [paginator]="true" [globalFilter]="gb" #dt>
    ...
</p-dataTable>

{{ dt.totalRecords }} records

Demo

Farman

Answer 2

The above answer is correct and I'm adding up a little thing to it.

If you want to bind the totalRecords value to your typescript .ts file, then use an (onFilter) event and trigger a function with parameters as $event and dt.totalRecords

In my case, i have given

<p-table #dt [value]="personListData" [columns]="columns" (onPage)="onPageChange($event)" [resizableColumns]="true" [paginator]="true" [rows]="rowsCount" selectionMode="multiple" [(selection)]="selected_data" [loading]="loading" [totalRecords]="totalRecords" class="table table-hover table-responsive table-bordered" [responsive]="true" (onFilter)="handleFilter($event,dt.totalRecords)">

In short,

(onFilter)="handleFilter($event,dt.totalRecords)"

Function in .ts file ,

handleFilter(e,filteredRecordCount){
   console.log("filteredRecordCount");
}

NOTE: If you want to use the filtered records count value, then you can assign it to any variable and use anywhere in your typescript file.

Marylou

Answer 3

I'm on Angular 8, and my table is not paginated. dt.totalRecords is always the full amount. So if I have 20 rows, and I get it filtered down to 2 on-screen, dt.totalRecords still = 20.

What I ended up doing was using the onFilter, passing in the entire dt, then using dt.filteredValue:

onFilter(event: any, table: any): void {
    if(!!table.filteredValue) {
        this.visibleRows$.next(table.filteredValue.length);
    }
}

You have to check for null, because if you change the filter but don't filter out any additional rows, filteredValue is null.

Caenogenesis

Answer 4

html:

<p-dataTable #dt (onFilter)="handleFilter()" [value]="cars" [rows]="10" [paginator]="true" >
    ...
</p-dataTable>

{{ dt.totalRecords }} records

ts:

@ViewChild('dt', { static: true }) dt: Table;

handleFilter() {
    if (this.dt.filteredValue != null)
      this.dt.totalRecords = this.dt.filteredValue.length;
    else
      this.dt.totalRecords = this.cars.length;
  }

Thracian

Is there any relevant documentation? A link to that would be very helpful. – Therianthropic