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 ?

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

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.

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.