Display active table filter count

[mturoci]

via @shihan007

The table currently supports filtering, but to see how many filters are active per column, one needs to click it and see which filter options are checked.

Instead, we could display the filter count in the top right corner relative to the chevron icon so that it's visible without clicking the chevron.

Implementation note: If there are > 9 filters active, display 9+ instead of the actual number to prevent too big count numbers and related spacing problems.

[jding712]

Hi me and other friends would like to take on this issue.

[mturoci]

Go ahead @jding712!

[mturoci]

The issue is up for grabs again for anyone interested.

[Stijn-Kuijper]

Hi,

I was looking into fixing this, but as far as I can tell Fluent UI does not allow you to add custom elements to an IColumn. A different solution that is possible would be to use the Tooltip to show the amount of filters when hovering over the column header label.

I've made a start at this approach, and it would look something like this:

Would this be a satisfactory solution? If so, I can continue to fix this issue. If not I'm afraid it will be too difficult for me to fix.

[mturoci]

Thanks for your interest @Stijn-Kuijper!

Fluent UI does not allow you to add custom elements to an IColumn

Looking at the Fluent API, it seems like onRenderHeader might be what is needed.

use the Tooltip to show the amount of filters when hovering

Although this is an option, it may not be the optimal UX we are striving for as it would require an additional hover to show the counts.

[Stijn-Kuijper]

Hi, thanks for the quick reply!

onRenderHeader is actually what I am using right now to use the tooltip. However, this seems to only replace the content/label of the column header, rather than the entire header element. I tried adding a div element there that would have two children: one with the label and one with the filter amount, but this did not seem like an appropriate way of going about doing this, which is why I switched over to the tooltip approach.

Additionally, using onRenderHeader would mean the amount of filters would be displayed between the label and the chevron and some absolute positioning trickery would likely have to be used to get it displayed to the right of the chevron.

[mturoci]

However, this seems to only replace the content/label of the column header, rather than the entire header element.

Not sure I understood this fully. Are you saying this doesn't replace things like sorting/filter icons as well, but just the text? If so, the proper solution would be to render both sort/filter within the custom renderFunction. In fact, this would also make the onColumnClick better since no ugly isMenuClicked hacks would be needed.

using onRenderHeader would mean the amount of filters would be displayed between the label and the chevron and some absolute positioning trickery would likely have to be used to get it displayed to the right of the chevron.

This should be achievable by absolute positioning relative to the filter chevron.

[Stijn-Kuijper]

Are you saying this doesn't replace things like sorting/filter icons as well, but just the text?

This seems to be the case. Making changes in the onRenderHeader will not change the chevron in any way for example.

If so, the proper solution would be to render both sort/filter within the custom renderFunction.

Does this mean the label, chevron and active filter count should all be rendered within the onRenderHeader? And thus the columnActionsMode should just always be set to clickable?

[mturoci]

Does this mean the label, chevron and active filter count should all be rendered within the onRenderHeader? And thus the columnActionsMode should just always be set to clickable?

That's exactly what I think. Feel free to reach out if other assistance is needed. Btw, we also have Discord that may be better for such-realtime discussions.

[Stijn-Kuijper]

In that case I will have a look the coming days to see if I can come up with a fix. If I run into any more issues I'll make sure to run it by the discord first. Thanks for the help!

[Ultare1717]

Hello!! Is this issue still open. If yes me and my group would like to work on it?

[mturoci]

Yes, it's open. Feel free to make a PR :)

[Ultare1717]

Would something like this do?

[mturoci]

Would something like this do?

Something like that yes, but ideally following the design outlined in the description. Non need to also add the selection count within context menu.

[johannes-becker-otto]

maybe it would already be sufficient to change the open downward triangle to a filled downward triangle?
So V --> ▼
Cheers
Hannes

[dbranley]

Hello Wave,

I have a solution for this change request to display a filter count on tables.

As requested in the ticket, I have updated the table component so that it will display a count of selected options just to the top right of the chevron down icon. As suggested, I used onRenderHeader to accomplish this - this means the custom renderer for the column now displays the name, sort icon, chevron icon and count. The code changes are in ui/src/table.tsx and here is a screen shot of what it looks like:

And here is a short video demonstrating the filtering after this change:

issue1689_ui-test.mov

I added 3 new unit tests to ui/src/table.test.tsx that check for the new filter counts. These pass along with all the other unit tests. Here is a screen shot of the results from running all the regression tests:

Question for you: The count is being rendered in red with a red border to match how the requirement is defined in the ticket. I wasn't sure if that was done in red make it stand-out in the screen shot or if this is how it was supposed to be implemented. Can you confirm if red text with red border is what you expect?

I have a branch in my fork of the project and will be submitting a PR once I hear back about the styling of the new filter count. Let me know if this looks ok. Thanks!

[dbranley]

Hi,
I decided to go ahead with the PR and put the question about the text/border color into the PR. Let me know if there's anything you need me to change.
thanks,
Dan