v18 p-columnFilter: Column filtering indicator is missing

[rosenthalj]

Describe the bug

In PrimeNG v18 when a table column is filtered using the p-columnFilter component there is no indication of filtering in the corresponding table column header.

Note: When viewing the screenshots listed below and the videos listed below, you may want to use "full screen mode", because the "highlighting" of the background colors of the v17 filter icons buttons can be hard to see.

The following screenshot compares the "correct" v17 filter table demo after filtering vs "incorrect" v18 filter table demo after filtering:

The following screenshot compares the style of the filtered name button element for v17 and v18

The following video shows the v17 Table Advanced Filter demo "indicating" that column filters are set

https://github.com/user-attachments/assets/c40b22d0-337d-4163-9d2e-d06295ed3bbe

The following video shows the v18 Table Advanced Filter demo "not indicating" that column filters are set

https://github.com/user-attachments/assets/b18edccb-1927-4226-ae0a-770eea155033

Environment

n/a

Reproducer

https://v18.primeng.org/table#filter-advanced

Angular version

18.x

PrimeNG version

18.0.0.beta-3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

n/a

Browser(s)

chrome, firefox, safari

Steps to reproduce the behavior

1. Run the v18 Table Filter Advance Demo: https://v18.primeng.org/table#filter-advanced
2. Filter for one or more columns --- After the table is filtered there will be no indications in the table that any of the filters have been set (bad)

Expected behavior

When a column filter is set the corresponding column filter has a visual indication that it has been set.

I.e. v18 column filter set indicating functionality should work similarly to the current v17 functionality

[cagataycivici]

It seems to be missing yes but we can't add a new token right now due to RC stage, it'll be fixed in v18.1.0. Also an issue in PrimeVue which should be fixed in v4.3.0.

[shaman-apprentice]

It seems to be missing yes but we can't add a new token right now due to RC stage, it'll be fixed in v18.1.0. Also an issue in PrimeVue which should be fixed in v4.3.0.

From my point of view, there is nothing to be said against adding a new feature (token) with a reasonable default to a RC. Shouldn't break anything, so why not? Of course, it is your call to make 👍

[aberonni]

@cagataycivici @mertsincan FYI I still encounter the issue (also on the documentation website) with v18.0.2 and v19.0.2

[critchie]

v17 handled it at line 5148 in table.ts on branch v17 Prod I think.

But v18 and beyond uses a completely different approach that I couldn't quite figure out but it definitely broke the filter active class.

[ivan-price-acted]

hi there, we're seeing this too, it's pretty impactful for us because we initiate our tables with active filters, and we were relying on the column header icon indicator to inform the users what filters were being used (in v17)

has anyone developed a workaround while we wait for the class to be added ? otherwise we'll need to write a function/directive that inspects the underlying pTable filters and re-determines if there is a filter on a column i suppose.

[ivan-price-acted]

in case it's interesting to anyone encountering this we managed to build a workaround via an [ngClass] on the table column which returns a specific class if the given column has an active filter.. something like:

hasActiveFilter (columnKey: string): string {
  if (Object.hasOwn(this.pTable.filters, columnKey)) {
    let filter = this.pTable.filters[columnKey]
    if (!Array.isArray(filter)) {
      filter = [filter]
    }
    if (filter[0].value && filter[0].value !== 0) {
      return 'active-filter'
    }
  }
  return ''
}

.. until the issue is fixed in primeNG

[cagataycivici]

This is fixed in our new shared theming package, PrimeNG v19.1.0 will migrate to this new package and issue will be resolved. Minor dom change would be necessary as well, fix is verified in PrimeVue 4.3.0. Retargeting to v19.1.0.

Here is the new package that all Prime UI libraries will be using, instead of ports, there is now a single source of truth. PrimeNG styles will not be a ported one anymore resulting in revamped quality as issues from ports will disappear.

https://github.com/primefaces/primeuix/tree/main/packages/themes

[GaetanRouzies]

Still reproducible in 19.1.3. This issue significantly impacts visual feedback—without it, all tables appear broken to users.

[davide-bontempelli-zupit]

@cagataycivici This is not fixed yet and in fact it is also present on your website

[darcoola]

I see it fixed in v20, will it be also fixed in v19?

[NormantasN]

Still find this issue in v20