fix: FluentDataGrid column header title truncation in 4.11.4+

[philliphoff]

🐛 Bug Report

Starting with 4.11.4 (up to at least 4.11.7), a FluentDataGrid with a sortable TemplateColumn with <ColumnOptions> will result in a truncated, fixed-width, column header title, even when there is sufficient space for the entire title. Resizing the grid will not resize the column header title.

💻 Repro or Code Sample

See the Weather page of the attached repro created from the FluentUI project template.

Archive.zip

🤔 Expected Behavior

The column header title should expand to fill the header width. Truncation of the title text should occur only if there is insufficient space for the text

😯 Current Behavior

The column header title is always truncated, regardless of the width of the column.

💁 Possible Solution

Our solution was to revert back to 4.11.3.

🔦 Context

We had attempted to pull forward the FluentUI library to 4.11.7 from 4.11.3 after which we observed the issue. Reverting back to 4.11.3 resolved the issue. The issue appears to start with 4.11.4.

🌍 Your Environment

• OS & Device: MacOS
• Browser: Edge
• .NET and Fluent UI Blazor library Version: .NET 9.0 and FluentUI 4.11.7

[vnbaaij]

Should be fixed by #3593.

[vnbaaij]

Ok, checked with your source and the PR mentioned does not fix your issue. That is because you are using an older combination of showing the filter button. It can be fixed by adding HeaderCellAsButtonWithMenu="true" to your DataGrid. This uses a different an much more accessible way of presenting the column options.
To mak it work fully, you also need to add a <FluentMenuProvider /> to your MainLayout.

[philliphoff]

Ok, checked with your source and the PR mentioned does not fix your issue. That is because you are using an older combination of showing the filter button. It can be fixed by adding HeaderCellAsButtonWithMenu="true" to your DataGrid. This uses a different an much more accessible way of presenting the column options.
To mak it work fully, you also need to add a to your MainLayout.

Ah, ok, I'll try that out on the latest version.

[philliphoff]

@vnbaaij I verified that using HeaderCellAsButtonWithMenu="true" does resolve the header title width issue. That said, I'm not fond of the new UX; it adds an additional click to change sorting or display the filtration controls. Is there a way to at least customize the sorting/filter menu label and/or add an icon?

[vnbaaij]

Yes, you can change the labels. Use the ColumnResizeLabels and ColumnOptionLabels parameters for that. It is not possible to add icons. Although that might be a nice addition, so I'll investigate that. Icons will be displayed behind the column title if sorting/filtering is applied to that column.

If only sorting is being offered, there is no extra click involved. It is still done on the click of the header button. (And right click removes the sorting if not the default sort column).

[vnbaaij]

It is not possible to add icons. Although that might be a nice addition, so I'll investigate that.

Yup, that is possible:

Will be added in a PR soon