fix: GenerateHeaderOption.Sticky with ResizableColumns doesn't work as expected in FluentDataGrid

[ghood97]

🐛 Bug Report

When using FluentDataGrid with GenerateHeaderOption.Sticky and ResizableColumns=true, the header does not stick. Without ResizableColumns=true, the sticky header works as expected.

💻 Repro or Code Sample

I have set up a minimal reproducible sample here: https://github.com/ghood97/FluentDataGridTest

The component with the data grid is at Components/Pages/Home.razor. The solution is ready to run so just need to clone and open in VS. I have also included the component code below:

@page "/"
@using Microsoft.FluentUI.AspNetCore.Components

<FluentDataGrid TGridItem="GridRowObject"
                Items="@AllItems.AsQueryable()"
                ResizableColumns
                GenerateHeader="GenerateHeaderOption.Sticky">
    <ChildContent>
        <PropertyColumn TGridItem="GridRowObject"
                        TProp="string"
                        Sortable="true"
                        Title="Name"
                        Property="i => i.Name"
                        Tooltip />
        <PropertyColumn TGridItem="GridRowObject"
                        TProp="string"
                        Sortable="true"
                        Title="Value"
                        Property="i => i.Value"
                        Tooltip />
    </ChildContent>
</FluentDataGrid>

@code {
    private List<GridRowObject> AllItems = [];

    protected override void OnInitialized()
    {
        for (int i = 0; i < 100; i++)
        {
            AllItems.Add(new GridRowObject
                {
                    Name = $"Instance {i}",
                    Value = $"Value {i}"
                });
        }
    }


    class GridRowObject
    {
        public required string Name { get; set; }

        public required string Value { get; set; }
    }
}

🤔 Expected Behavior

The header row should be sticky and should remain at the top of the page or container instead of scrolling out of view.

😯 Current Behavior

The header row scrolls out of view as if the Sticky option is not set. As soon as I set ResizableColumns=false, it works as expected.

💁 Possible Solution

🔦 Context

I am trying to present a FluentDataGrid with a sticky header and resizable columns among other options. However, in the repo linked above, no other options are added.

🌍 Your Environment

• OS & Device: Windows 11
• Browser: Microsoft Edge
• .NET and Fluent UI Blazor library Version: 4.12.0

[vnbaaij]

I can see this is caused by a position: relative being added to the column header th style tag.

Have not found yet why that gets added. Will investigate further later.

[vnbaaij]

Ok, I've found the culprit. Will be fixed in next release.

For it to work correctly in your demo, you'd need to enclose the grid in a div though. Something like:

<div style="height: 400px; overflow:auto;" >
<FluentDataGrid TGridItem="GridRowObject"
                Items="@AllItems.AsQueryable()"
                ResizableColumns="true"
                GenerateHeader="GenerateHeaderOption.Sticky">
    <ChildContent>
        <PropertyColumn TGridItem="GridRowObject"
                        TProp="string"
                        Sortable="true"
                        Title="Name"
                        Property="i => i.Name"
                        Tooltip />
        <PropertyColumn TGridItem="GridRowObject"
                        TProp="string"
                        Sortable="true"
                        Title="Value"
                        Property="i => i.Value"
                        Tooltip />
    </ChildContent>
</FluentDataGrid>
</div>

[vnbaaij]

PS: any specific reason you are not using our Fluent UI Blazor Templates for creating your reproduction? Running Fluent in a Bootstrap styles site does not really make a lot of sense...

[ghood97]

No reason other than I forgot to. I have removed bootstrap from my real project. What other advantages are there to using the templates? Other than that it doesn't include bootstrap?