Search code examples
angularprimeng

PrimeNG table filtering and sorting on each column doesn't work

I'm creating a table using PrimeNG. I want to allow the user to sort AND filter by column. I can successfully sort, but when I try to type in the filter text input of any column, the input loses focus and the column gets sorted. I've debugged a little and it seems like the sorting functionality of primeNG is activated whenever a click is captured in the header of the table. Since my filter input is inside the header, when I try to click on it to start typing, it activates the sort and I lose focus.

Stackblitz reproduction: https://stackblitz.com/edit/primeng-table-g9uxkf

Any idea on how I could counter this?

Thank you in advance.

Solution

  • What I ended up doing was capturing the click event on the text input (the filter) and stopping its propagation.

    clickOnFilter(event: Event) {
    event.stopPropagation();
}