FluentDataGrid: pinned column offsets leak into the grid of an open RowDetails (master-detail)

[sebguischr]

Setup: a FluentDataGrid with pinned columns (Pin="DataGridColumnPin.Start" / End) and RowDetails whose content is
another FluentDataGrid that also has pinned columns (master-detail).

Actual: once a detail is open, the pinned cells of the master grid are shifted by their own width (start column moved right,
end column moved left), and header cells of the nested grid overlap.

Cause: UpdatePinnedColumnOffsets (Components/DataGrid/FluentDataGrid.razor.js) uses
gridElement.querySelectorAll("th[col-pinned='start']") / 'end', which also returns the pinned headers of the nested grid, then
applyOffset writes the offset on every [col-index="N"] cell of the subtree — master and nested cells share col-index values.
The unpinned cells of the nested grid that share a col-index also receive inset-inline-* (visible on the sticky header row).

Suggested fix: only consider the grid's own header row and rows, e.g. gridElement.tHead.rows[0].cells and the cells of
gridElement.tHead.rows / gridElement.tBodies[n].rows instead of a subtree query.
(Workaround in our app: a MutationObserver that recomputes the offsets per table.)

Environment: Microsoft.FluentUI.AspNetCore.Components 5.0.0 / Microsoft.FluentUI.AspNetCore.McpServer 5.0.0, Blazor Server, net9.0, Chrome, Windows 11. Found while migrating an application from 4.14.4 to 5.0.0.

[vnbaaij]

Hi sebguischr,

Please add reproduction code to this (and the other issues you created). We don't have the time to contrive examples which reproduce your exact issue

[dvoituron]

Unlike the tools you have probably used to create this issue, we are not AI systems.
Without a clear explanation and a simple, working reproduction code, we will close this request.

[sebguischr]

Hi Vincent Baaij (@vnbaaij), Denis Voituron (@dvoituron),

First, an apology for this batch of issues. I opened them in the excitement of our migration to v5, and they clearly deserved more investigation before being posted, starting with a proper repro. Sorry for the noise and for the time it cost you.

For this one, here is a minimal repro: a blank dotnet new blazor --interactivity Server --empty project (net9.0), Microsoft.FluentUI.AspNetCore.Components 5.0.0, AddFluentUIComponents() and <FluentProviders /> in the layout, and this page:

@page "/"

<div style="width: 700px; overflow-x: auto;">
    <FluentDataGrid Items="@_orders" TGridItem="Order" RowDetails="@Details" ResizableColumns="true">
        <PropertyColumn Property="@(o => o.Name)" Pin="DataGridColumnPin.Start" Width="150px" />
        <PropertyColumn Property="@(o => o.Customer)" Width="200px" />
        <PropertyColumn Property="@(o => o.City)" Width="200px" />
        <PropertyColumn Property="@(o => o.Date)" Width="200px" />
        <TemplateColumn Title="Actions" Pin="DataGridColumnPin.End" Width="120px">
            <FluentButton>Edit</FluentButton>
        </TemplateColumn>
    </FluentDataGrid>
</div>

@code {
    private record Order(string Name, string Customer, string City, DateOnly Date, Line[] Lines);
    private record Line(string Product, int Quantity);

    private readonly IQueryable<Order> _orders = new[]
    {
        new Order("Order 1", "Contoso", "Paris", new DateOnly(2026, 9, 1), [new("Apples", 10), new("Pears", 5)]),
        new Order("Order 2", "Fabrikam", "Lyon", new DateOnly(2026, 9, 2), [new("Plums", 3)]),
    }.AsQueryable();

    private RenderFragment<Order> Details => order =>
        @<FluentDataGrid Items="@order.Lines.AsQueryable()" TGridItem="Line" ResizableColumns="true">
            <PropertyColumn Property="@(l => l.Product)" Pin="DataGridColumnPin.Start" Width="150px" />
            <PropertyColumn Property="@(l => l.Quantity)" Width="200px" />
            <TemplateColumn Title="Actions" Pin="DataGridColumnPin.End" Width="120px">
                <FluentButton>Delete</FluentButton>
            </TemplateColumn>
        </FluentDataGrid>;
}

Open the details of Order 1: the pinned cells of the master grid move. Name gets inset-inline-start: 150px instead of 0, and Actions gets inset-inline-end: 120px instead of 0. After opening Order 2, they get 300px and 240px, and the first detail grid moves too.

It only happens with ResizableColumns="true". I think the ResizeObserver then calls UpdatePinnedColumnOffsets, which also picks up the pinned headers of the nested grid through querySelectorAll("th[col-pinned=...]"). Without it, the offsets are computed once and stay correct.

[sebguischr]

Screenshot of the repro above, after opening the details of both orders: the pinned Name and Actions columns of the master grid have moved toward the middle, and the detail grid of Order 1 is shifted as well.