primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.98k stars 1.2k forks source link

Datatable:migration from 3 to 4 removed button filter highlighting feature #6385

Open koen-i opened 2 weeks ago

koen-i commented 2 weeks ago

Describe the bug

In primevue 3 the filterbutton on top of a datatable was highlighted when a filter was active. This feature is not available anymore in primevue 4. The code to apply other CSS when the instace has a filter active was removed. I checked the code. This part of the code was not correctly migrated to version 4. It is missing. You can reproduce it on the primevue website: https://primevue.org/datatable/#advanced_filter vs https://v3.primevue.org/datatable/#advanced_filter

This is confusing for the enduser as he/she can not see that a filter is active.

Reproducer

https://template

PrimeVue version

4.0.5

Vue version

3.x

Language

ALL

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

koen-i commented 2 weeks ago

As far as I know, changes need to be made in primevue/datatable/style/index.mjs

Replacing this: pcColumnFilterButton: 'p-datatable-column-filter-button',

By something like this: pcColumnFilterButton: function filterMenuButton(_ref6) { var instance = _ref6.instance; return ['p-datatable-colum-filter-button', { 'p-datatable-column-filter-button-active': instance.hasFilter() }]; },

colinatwork commented 1 week ago

Bumping as we are seeing the same issue in v4.0.7