Feature Request: Visual Indicator for Active Column Filters (ColumnControl)
Feature Request: Visual Indicator for Active Column Filters (ColumnControl)
Tomasz_S
Posts: 4Questions: 1Answers: 0
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!
This question has an accepted answers - jump to answer
Answers
When a column has a filter applied, the dropdown will have the class
dtcc-button_activeadded 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
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.
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
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!
Inverting the icon is not a bad idea. It would certainly stand out more.
The
-content searchDropdowncontent 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
Sorry for jumping on to this, I'm using ColumnControl extensively for a project and can see that dtcc-button_active is applied for a searchText column, but not for a searchList column when one or more items have been selected. Is that expected or should it be working for searchList too? If the latter it's probably something to do with my modified integration but just want to check.
Tim
Hi Tim,
It should be and is in this example. Can you link to a test case showing the issue please?
Allan
Hi Allan,
Ok thanks - my integration has gone a bit bespoke in places so I will need to do some investigation - I'm assuming this would also work if using Ajax and the ColumnControl searchList is part of the response payload?
Tim
Yes. Example here.
Allan
@allan
Hello Allan,
Since you confirmed that the class is applied when using Ajax, I have a follow-up question: what happens when the server-side processing option is enabled?
In the server-side documentation, I couldn’t find any guidance on what type of response needs to be sent back so that the extension can determine which filters are currently active. Could you provide any insights on this?
Thank you,
Matija
Ahhh! It doesn't appear to work with server-side processing.
I will have a look into what is causing that. The client-side knows there is a filter, so it shouldn't need a different response.
Allan
I've committed a fix here and will aim to push a release out this week.
Many thanks for the investigation and letting me know the details.
Allan