Filtering Data Table in PrimeNG

angular5 primeng primeng-datatable
Sundara Moorthy Anandh picture Sundara Moorthy Anandh · Jul 19, 2018 · Viewed 9.3k times · Source

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

Antikhippe picture Antikhippe · Jul 19, 2018

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

Related questions

How to set default value for PrimeNG p-dropdown

I am using PrimeNG in my angular5 app. I have issue with p-dropdown Question I have p-dropdown for showing countries. I bind the select options correctly there it works fine (this data coming from api), but I need to set …

Read More
PrimeNG Dynamic Column Filtering

I currently have the following PrimeNG TurboTable: <p-table [value]="People" > <ng-template pTemplate="header"> <tr> <th>Name</th> <th>Age</th> <th>Height</th&…

Read More
Is there a way to remove html tags from a string in JavaScript?

I am working with the rich text editor component of primeng. This editor turns everything i type in into html. But sometimes i want to output these texts in plain text instead. Does angular 2 provide a way to easily remove …

Read More