fix: Datagrid Column header not flex display if no Sortable property is given

[PascalVorwerk]

🐛 Bug Report

Most of my table columns are sortable, but after upgrading to 4.11 i noticed one table did something weird:

Visual:

Html:

Razor:

   <PropertyColumn Property="@(environment => environment.AppName)" Title="App">
                        <ColumnOptions>
                            <FluentSearch @bind-Value="@_linkedEnvironmentSearch"
                                          Immediate ImmediateDelay="200"
                                          Placeholder="App naam..."/>
                        </ColumnOptions>
                    </PropertyColumn>

After adding a sortable property, a display: flex property is given to the table header.

Visual:

Html:

Razor:

<PropertyColumn Property="@(environment => environment.AppName)" Title="App" Sortable="false">
                        <ColumnOptions>
                            <FluentSearch @bind-Value="@_linkedEnvironmentSearch"
                                          Immediate ImmediateDelay="200"
                                          Placeholder="App naam..."/>
                        </ColumnOptions>
                    </PropertyColumn>

🤔 Expected Behavior

I'd probably expect the default value of sortable to be False and then this will be fixed, the property is nullable now and that is probably why this is happening? The header needs to be a flex display :)

💁 Possible Solution

Either:

• If Sortable is null, still make the header a display:flex property
• Default the sortable property to a false value
• Make the sortable property a required property to define

In order of what i believe is most desirable? 😄

🌍 Your Environment

Fluent Components 4.11.3, .NET 9, Global interactivity set to WebAssembly and prerendering disabled.

[davhdavh]

I was just about to file this bug :)

This is display:block

fluentui-blazor/src/Core/Components/DataGrid/Columns/ColumnBase.razor

Line 119 in e6e151c

<div class="col-title" style="@($"width: calc(100% - {wdelta});")">

This is display: inline-flex

fluentui-blazor/src/Core/Components/DataGrid/Columns/ColumnBase.razor

Line 96 in e6e151c

<FluentButton Appearance="Appearance.Stealth" Class="col-sort-button" Style="@($"width: calc(100% - {wdelta});")" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip">

it is not enough though to fix the display... the font-weight, padding and line-height are different also, among others.

[vnbaaij]

@davhdavh your are mixing up two things here. In the case of Sortable not being set (null), the header is displayed as just a title. If it is set to true, the header will be displayed as a button which will use a different presentation.

@PascalVorwerk Adding Sortable="false" will make sure the icon/title are displayed correctly.

One remark though, the behavior of the ColumnOption is not correct in this situation. It always shows a 'filter' icon while the actual action does not always need to be filtering. Also, it shows a 'remove filter' icon if the ColumnBase.Filtered parameter is true which is wrong as it doesn't remove the filter but just opens the option popup again. The actual correct behavior is to show the filter icon behind the title just like the sort button. Thing is in this specific situation, you get both:

You get a better user experience, and much better a11y support, if you use the HeaderCellAsButtonWithMenu="true" on the DataGrid.

(Both Sort and Filter applied)

[vnbaaij]

I'll work on a fix for the situation where Sortable is null for the next patch release

[vnbaaij]

Fixed with PR mentioned