Feature Request: Visual Indicator for Active Column Filters (ColumnControl)

Tomasz_S

Note: This is primarily a design/CSS question.

I often use DataTables as an alternative to Excel for filtering and exploring data. However, when applying filters to multiple columns, it’s easy to forget that filters are active - there’s currently no clear visual indicator on the column controls themselves.

While the default column control icons look great, they don’t clearly reflect the filtered state. In my own python package for converting dataframes to DataTables - df2tables (which I previously shared here), I tried making the default (unfiltered) icons slightly more transparent, but that subtle change doesn’t provide enough visual feedback.

I’ve attached a few rough sketches to illustrate the concept, but they’re purely placeholders.

Ideally, this would evolve into icons/CSS styles created by someone with UI/UX or design experience.
Something that visually communicate “filtered” vs. “unfiltered” states without breaking the existing clean look of DataTables.

Thanks for considering this!

allan

When a column has a filter applied, the dropdown will have the class dtcc-button_active added to it, which could be used for some extra styling - at the moment I use it to change the opacity for the icon so it does stand out a bit more when there is a filter.

That isn't enough I guess? You could add a colour - I've done that before. Or do you want a different icon in this condition, or is there something else you would like to have that visual representation?

Allan

Tomasz_S

Thanks, Allan - there's absolutely no need to change the dropdown menu itself; it already works perfectly.

My intention was simply to make it easier to visually distinguish which columns have filters applied. In the default styling, I've found the only change is the opacity of the 3-line (hamburger) icon:

• Inactive filter: --dtcc-button_opacity: 0.4;

• Active filter: button.dtcc-button_active { opacity: 1; }

That’s a subtle difference, and for me (and probably others), it’s not very noticeable at a glance - especially when multiple columns are filtered. I thought adding a small icon variation or accent color might make filtered columns stand out more quickly. Some commercial table libraries use this approach to good effect.

That said, this might just be a personal preference rather than a universal issue. It’s a tricky UX question - there’s even an interesting discussion about it here:
https://ux.stackexchange.com/questions/134929/is-the-filter-icon-widely-recognised-by-users

And if you do Google Image search for “applied filter icon”, you’ll find several design variations - though not everyone would agree on which one is good.

allan

Yeah, its a tricky one. I do recall while writing that particular feature pondering over this and the opacity change was what I came up with at the time. It looked enough on my monitors, but that might not always be the case.

The option of an icon variation sounds like a good idea. I'll have a think about that!

Allan

Tomasz_S

Thank you for your reply!

Regarding the icons -I’ve attached an example from Google Sheets. It might not suit everyone’s taste (it’s arguably a bit too obvious), but it does make it immediately clear which columns have active filters.

Thanks again for your work and support!

allan

Inverting the icon is not a bad idea. It would certainly stand out more.

The -content searchDropdown content type uses a magnifying glass, rather than the funnel, and the general dropdown can host both search and other menu icons, which does complicate things, but an inverted icon might be bold enough to catch the eye, and if someone does want colour, that is easy to do with CSS.

Allan