Skip to content

fix: ColumnOptionsLabels in Data grid #3846

@goodcoffeecode

Description

@goodcoffeecode

🐛 Bug Report

Customising the ColumnOptionsLabels of a FluentDataGrid element does not result in any UI changes.

💻 Repro or Code Sample

<FluentDataGrid Items="@_files" ResizableColumns="true" ColumnOptionsLabels="@customOptionsLabels">
                <PropertyColumn Property="@(f => f.Name)" Sortable="true">
                    <ColumnOptions>
                        <div class="search-box">
                            <FluentSearch type="search" Autofocus="true" Placeholder="Search by name" @bind-Value="_nameFilter" @oninput="HandleNameFilter" @bind-Value:after="HandleNameClear" />
                        </div>
                    </ColumnOptions>
                </PropertyColumn>
</FluentDataGrid>
@code {
    private ColumnOptionsLabels customOptionsLabels = new()
        {
            Icon = new Icons.Regular.Size16.Search()
        };
}

🤔 Expected Behavior

I expected the Filter icon to be replaced with the Search icon for every column that is filterable.

😯 Current Behavior

The UI does not change from the default Icon.

💁 Possible Solution

It's possible that this is only meant to have an effect when HeaderCellAsButtonWithMenu is true - which does currently work. However, if the intent is to customise the filter icon, I think it should work whether HeaderCellAsButtonWithMenu is true or false.

It's also entirely possible that I'm not using this correctly! Although the Blazor website, ChatGPT, and Claude have been unable to shed any light on this for me.

🔦 Context

User feedback for one of our Blazor pages with a Data grid was "Oh, I would have never thought that that icon meant I could search in that column!". We want to make our app as intuitive as possible for our users.

🌍 Your Environment

  • Windows 11 Pro Surface Laptop 7
  • Microsoft Edge
  • .NET 9
  • Fluent UI Blazor library Version 4.11.9

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions