fix: Sticky Header Stops Working in FluentDataGrid with Virtualize="true"

[denisesagh]

🐛 Bug Report: Sticky Header Stops Working in FluentDataGrid with Virtualize="true"

💻 Repro or Code Sample

@page "/issue"

<h3>Items Übersicht</h3>

<FluentDataGrid Items="_filteredItems.AsQueryable()"
                ItemSize="48"
                Virtualize="true"
                AutoFit="true"
                DisplayMode="DataGridDisplayMode.Table"
                ResizableColumns="true"
                GenerateHeader="GenerateHeaderOption.Sticky">

    <PropertyColumn Width="150px" Property="@(c => c.Id)" Title="ID" Sortable="true" Filtered="_filter.Id != string.Empty">
        <ColumnOptions>
            <div class="search-box">
                <FluentSearch type="search" Autofocus="true"
                                              Immediate="true"
                                              @bind-Value="_filter.Id"
                                              Placeholder="ID ..." />
            </div>
        </ColumnOptions>
    </PropertyColumn>

    <PropertyColumn Width="200px" Property="@(c => c.Title)" Title="Title" Sortable="true" />
    <PropertyColumn Width="100px" Property="@(c => c.Value)" Title="Value" Sortable="true" />
</FluentDataGrid>

@code {
    private List<Item> _allItems = new();
    private List<Item> _filteredItems = new();

    private FilterModel _filter = new();

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 100; i++)
        {
            _allItems.Add(new Item
            {
                Id = $"ID-{i:D3}",
                Title = $"Title {i}",
                Value = i * 10
            });
        }

        _filteredItems = _allItems.ToList();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _filter.PropertyChanged += (_, __) => ApplyFilter();
        }
    }

    private void ApplyFilter()
    {
        _filteredItems = _allItems
            .Where(item => string.IsNullOrEmpty(_filter.Id) || item.Id.Contains(_filter.Id, StringComparison.OrdinalIgnoreCase))
            .ToList();

        StateHasChanged();
    }

    public class Item
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public int Value { get; set; }
    }

    public class FilterModel : System.ComponentModel.INotifyPropertyChanged
    {
        private string _id = string.Empty;

        public string Id
        {
            get => _id;
            set
            {
                if (_id != value)
                {
                    _id = value;
                    PropertyChanged?.Invoke(this, new System.ComponentModel.PropertyChangedEventArgs(nameof(Id)));
                }
            }
        }

        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
    }
}

Steps to reproduce:

1. Populate the grid with enough items to allow scrolling at least twice the height of the grid.
2. Scroll down the size of the grid
3. Paste a string into the search input field.

🤔 Expected Behavior
The sticky header should remain visible at the top of the grid while scrolling, and the grid content should remain visible below it.

😯 Current Behavior
When typing or pasting in the filter, the sticky header scrolls with the content instead of staying fixed. Depending on the scroll position, neither the header nor the grid items are visible.

💁 Possible Solution
Investigate how sticky headers interact with virtualized rows when StateHasChanged is triggered from filter input changes.
Adjust header positioning after virtualization re-renders.

🔦 Context
The issue prevents users from seeing the column header and grid content when filtering with large datasets.
Removing Virtualize="true" and adding @bind-Value:after="@(async () => await InvokeAsync(StateHasChanged))" to the Search Field fixes the sticky header but introduces performance issues. Removing Immediate="true" also fixes the issue.

🌍 Your Environment
OS & Device: Windows, PC
Browser: Chrome, Firefox, Edge
.NET Version: 9
Microsoft.FluentUI.AspNetCore.Components Version: 4.12.1
Blazor: Interactive SSR

I’m happy to help investigate or contribute a fix if needed.

[vnbaaij]

For the sticky header to work well, you should place your DataGrid in a 'confined' container (like a div with a set height)

This is what I get when surrounding your code with a

<div style="height: 600px; overflow-y: auto;" >
</div>

Result:

You can see I scrolled down but the header remains visible.

If there is no confined space, the header will (still) be sticky but then to the top of the window. The rest of the rows will scroll out of view:

Another thing is that using AutoFit and DataGridDisplayMode.Table do not work together. When using Table, you should specify a width per column (like you have already done).

Labeling this a closed for now. If I missed anything, then please add your comments

[denisesagh]

Thanks for your response!

I tried your solution by adding

<div style="height: 600px; overflow-y: auto;"></div>

I also removed AutoFit, but unfortunately the issue still persists.
I’ve attached a video where you can see how to reproduce the problem.

Thanks!

trim.5817EDD6-C68C-4471-A2EC-8A86DBE0CD41.MOV

[vnbaaij]

What happens is that the filtering throws the virtualization of its feet. You can see that the scrollbar gets positioned at the bottom of the div:

If you click on the scrollbar, the grid gets 'restored' and the filtered item can be seen.

As we use the standard Virtualize component, there is not much, or actually nothing, we can do to change its behavior, I'm afraid.

My advice would be to use either Virtualize or a filter option, but not both. Or accept that in this particular situation, an extra click is needed to get the desired outcome. It only shows this behavior when you actually paste the whole ID in one go in the filter box. If you just type in a number (like 068) it will work as expected.

Closing this as I can't change the Virtualize component