PrimeNG Table - How to clear a text filter in code and a p-table

Question

I have been trying to figure this out for over a week now. I can't seem to be able to clear my filters without breaking them. I need a button that clears all the filters on my screen so the user does not have to do them one by one.

Here is my stackblitz link for the sample code. Does anyone know how to make this work? I am starting to think there is a bug in the new PrimeNG Table filter process.

https://stackblitz.com/edit/clear-filters?file=src/app/app.component.ts

Answer 1

Pass your p-table reference variable #mydt to your clear function like following

app.component.html

<button pButton label="Clear Filters"  class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(mydt)"></button>

and use table.clear() method

app.component.ts

clear(table: Table) {      
   table.clear();
} 

I have updated your stackblitz :

https://stackblitz.com/edit/clear-filters-6jxnp3?file=src/app/app.component.ts