rfc: add Filtered Indicator to FluentDataGrid in ColumnOptions

[NickHirras]

💬 RFC

I don't mine working on this feature myself and submitting a PR, however I'll need some guidance on how best to implement it. But before going that route would like some feedback on whether this feature is generally useful to other users, or should be handled by some internal component within our own project.

I'm using the ColumnOptions render fragment in FluentDataGrid to give my users a filter control on columns. There is a usability concern, that it is not easy to identify which (if any) columns have filtering applied.

I would like to be able to pass-in some parameter (maybe a boolean such as <ColumnOptions Filtered="true">. Depending on the value of Filtered, it would render the icon on the filter button differently.

I'm looking in ColumnBase.razor ~ lines 23 and 56. Instead of just rendering a single possible FluentIcon, I would prefer an optional difference based on the new Filtered boolean:

existing code:

<FluentButton Appearance="Appearance.Stealth" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="Filter this column">
    <FluentIcon Value="@(new CoreIcons.Regular.Size24.Filter())"/>
</FluentButton>

would change to:

<FluentButton Appearance="Appearance.Stealth" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="Filter this column">

    @if(Filtered) 
    {
        <FluentIcon Value="@(new CoreIcons.Regular.Size24.Filter())"/>
    }
    else
    { 
        <FluentIcon Value="@(new CoreIcons.Regular.Size24.Filter())" Color="@Color.Disabled" />
    }
</FluentButton>

Or maybe Color.Neutral instead of Disabled.

In the end, if the user has a screen with several filterable columns, I'd like to be able to visually indicate which ones have a filter value applied, and which ones have an empty filter.

🔦 Context

I would like a clear visual indication that filterable columns have a filter value applied, or not.

💻 Examples

For example, say I have this screen with 5 columns. Out of the 5 filterable columns, only 2 have any values applied to the filter, the Client Name, and the Tags columns.

Currently, all columns show the same color Filter icon, and there's no easy way to see which columns are affected the results returned.

What I would prefer, in this example, it is clearly indicated which fields are affecting the results and which ones are not.

[vnbaaij]

I think this is a good idea. But instead of working with different icon colors I think adding a small badge is perhaps a better solution. Going on your second screenshot, it gives me the impression that you can not apply filtering to the columns that have the gray color. They look disabled.

Having them all the same but applying an accent like a badge seems more clear to me. What do you think?

We can probably use our existing badge component for this.

Would be great if you can work on this!

[NickHirras]

I like that idea. I'm using one of the presence indicator badges, which may be too bold (the red dot), but it's a start. Feedback / suggestions appreciated.

https://github.com/microsoft/fluentui-blazor/assets/3911628/479fe88a-9e66-4137-9cec-735aefa9f532

[vnbaaij]

Closing this one in favor of the PR. We can discus further there.