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

Go ahead @jding712!

The issue is up for grabs again for anyone interested.

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.

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.

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.

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.

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?

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.

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!

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

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

Would something like this do?

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.

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