[dev-v5][DataGrid] Add master/detail row expansion

[sebguischr]

Pull Request

📖 Description

Adds a RowDetails template parameter that lets any row be expanded via a chevron toggle to reveal detail content spanning all columns directly below it, independent of the existing hierarchical view (which requires parent/child rows of the same item type and columns). The RowDetails template's context is the row's item, so it can host a child FluentDataGrid filtered by that item, nested to any depth.

This is a new feature (additive, non-breaking): existing grids are unaffected unless RowDetails is set.

New public API on FluentDataGrid<TGridItem>:

• RowDetails (RenderFragment<TGridItem>) — the detail template parameter.
• OnRowDetailsToggle (EventCallback<TGridItem>) — raised when a row's details are expanded or collapsed.
• ToggleRowDetailsAsync, ExpandRowDetailsAsync, CollapseRowDetailsAsync, ExpandAllRowDetailsAsync, CollapseAllRowDetailsAsync, IsRowDetailsExpanded — programmatic control of expansion state.
• DataGridCellType.RowDetails — new enum member identifying the detail cell.

RowDetails cannot be combined with Virtualize (throws InvalidOperationException, matching the existing MultiLine/Virtualize guard).

📸 Screenshots

• Single Master / Detail:

• Two Levels:

• Custom Detail content:

CSS notes for reviewers

FluentDataGrid's display: grid mode relies on display: contents on <tr> so cells participate directly in the table's CSS Grid. The original selector matched any tr under .grid, so a nested FluentDataGrid placed inside RowDetails had its own rows absorbed into the parent's grid layout instead of staying contained. Fixed by restricting the rule to this grid's own direct thead/tbody children (.fluent-data-grid.grid > thead > tr, .fluent-data-grid.grid > tbody > tr) so a nested grid's rows — several DOM levels deeper — aren't matched.

Also added display: inline-flex for the new toggle's container: unlike HierarchicalToggle (which wraps the entire cell content, so being block-level doesn't matter), the RowDetails toggle is a standalone element rendered before the cell's own content, so it needs to stay inline with it rather than starting its own line.

👩‍💻 Reviewer Notes

Two demo pages are included under /DataGrid/MasterDetail:

• Master / Detail — customers (master) → orders (detail), two structurally unrelated grids, to contrast with the existing /DataGrid/Hierarchical example where parent/child share the same item type and columns.
• Two levels of detail — customers → orders → order lines, showing that a child FluentDataGrid can itself define a RowDetails template, so nesting depth is unlimited.

Suggested smoke test: open /DataGrid/MasterDetail, expand a row in each example, confirm the child grid renders in its own area below the master row (not overlapping subsequent rows), confirm the toggle chevron sits beside the first column's value (not above/below it), collapse it again, and confirm sorting/columns in the child grid work independently of the master grid.

Areas to focus review on:

• FluentDataGrid.razor / .razor.cs — the RowDetails rendering and the new expand/collapse API (state keyed by ItemKey, so it survives sorting/refresh).
• FluentDataGrid.razor.css — the > thead > tr / > tbody > tr selector change (previously a bare tr descendant selector).
• FluentDataGridCell.razor.cs — DataGridCellType.RowDetails skips the fixed row-height and grid-column styles so the detail cell's height follows its content.
• FluentDataGridRow.razor.cs — click/double-click handling now ignores the row-details-row class so interacting with a nested grid doesn't bubble up OnRowClick/OnRowDoubleClick on the master grid.

📑 Test Plan

Added tests/Core/Components/DataGrid/FluentDataGridRowDetailsTests.razor (6 new bUnit tests):

• Toggle renders and starts collapsed.
• Clicking the toggle expands/collapses the details row.
• ExpandAllRowDetailsAsync / CollapseAllRowDetailsAsync affect all loaded rows.
• ExpandRowDetailsAsync / CollapseRowDetailsAsync / IsRowDetailsExpanded on a single item (including idempotency).
• OnRowDetailsToggle is raised with the correct item.
• RowDetails + Virtualize throws InvalidOperationException.

Full suite run locally: 3752 passed, 1 failed, 0 skipped — the one failure (FluentNumberTests.FluentNumber_Culture_FR) is pre-existing on a clean dev-v5 checkout with no changes (culture/environment-dependent) and unrelated to this change.

Also manually verified in the running demo app (FluentUI.Demo/FluentUI.Demo.Client) that: the nested child grid renders in its own row without overlapping the master grid's subsequent rows, the toggle chevron sits correctly beside the column value, and both demo pages behave correctly end to end.

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

⏭ Next Steps

• Could consider a RowDetailsTemplate variant that also receives the row's expanded/collapsed state if reviewers want the template itself to react to it (currently only OnRowDetailsToggle exposes this, from the grid side).
• Happy to add ARIA guidance/docs updates if maintainers want specific accessibility wording beyond the aria-expanded attribute already set on the toggle button.

[Copilot]

Pull request overview

Adds a new master/detail row expansion feature to FluentDataGrid<TGridItem> via a RowDetails template, enabling per-row expandable detail content (including nested grids) without relying on the existing hierarchical (parent/child) model.

Changes:

• Introduces RowDetails rendering, toggle UI, and a programmatic expand/collapse API surface on FluentDataGrid<TGridItem>.
• Adds DataGridCellType.RowDetails and styling adjustments so the details row can span all columns and size to content.
• Adds bUnit coverage plus new demo documentation/examples for master/detail and multi-level nesting.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tests/Core/Components/DataGrid/FluentDataGridRowDetailsTests.razor	Adds bUnit tests covering RowDetails toggling, API methods, and Virtualize guard.
src/Core/Enums/DataGridCellType.cs	Adds RowDetails enum member for the new details cell type.
src/Core/Components/DataGrid/FluentDataGridRow.razor.cs	Prevents row click/double-click handlers from acting on the details row.
src/Core/Components/DataGrid/FluentDataGridCell.razor.css	Adds styling for the details cell and toggle container inline layout.
src/Core/Components/DataGrid/FluentDataGridCell.razor.cs	Skips fixed-height / grid-column styling for RowDetails cells.
src/Core/Components/DataGrid/FluentDataGridCell.razor	Renders RowDetails cells as <td> like default cells.
src/Core/Components/DataGrid/FluentDataGrid.razor.css	Restricts display: contents selector to avoid impacting nested grids.
src/Core/Components/DataGrid/FluentDataGrid.razor.cs	Adds RowDetails, OnRowDetailsToggle, Virtualize guard, and new expansion-state APIs.
src/Core/Components/DataGrid/FluentDataGrid.razor	Renders the toggle in the first column and conditionally renders the spanning details row.
examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridMasterDetailPage.md	Adds documentation page describing the new master/detail feature.
examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridMasterDetail.razor	Adds master/detail demo example with nested grid.
examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridMasterDetailTwoLevels.razor	Adds two-level nested RowDetails demo example.

[sebguischr]

@microsoft-github-policy-service agree

[MarvinKlein1508]

Great addition. In fact this is something I was searching before as well. This isn't just limited to nested FluentDataGrid components. In fact you can display any component/content there you want. I also tested DataGridDisplayMode.Table which works as I expect.

The only weird thing in my opinion is the mouse houver effect for the entire block.

[sebguischr]

Thanks, glad it's useful! And good catch on the hover — you're right, that's a real issue.

The hover highlight rule (FluentDataGridRow.razor.css) only excluded header/sticky-header/loading rows from the ShowHover background, so a RowDetails block (which can hold arbitrary, potentially large content) got the whole cell highlighted on hover instead of behaving like a normal thin row. Fixed in cb67cfa by excluding row-details-row the same way those other special rows already are.

[sebguischr]

Following up on your comment about RowDetails not being limited to a nested FluentDataGrid — added a dedicated example illustrating exactly that in 0a419eb.

New "Any content as detail" section on the /DataGrid/MasterDetail page: expanding a customer row now shows a contact card (FluentCard + FluentStack + FluentProgressBar) instead of a nested grid, bound to that row's item — no FluentDataGrid involved at all. Should make it clearer to readers that the template is a free-form RenderFragment, not something tied to grids specifically.

[vnbaaij]

I think I like this (have not had a chance to look at it closely and in detail). Perhaps you can add some screenshots to the PR description?

One thing that worries me a bit is that we end up with two solutions for (sort of) the same thing. We need to think carefully about how we can/should position this once we get to the point where we want to merge this in (not saying we are going to, also not saying we are not going to)

With .NET 11 we get the option to have inequal heights with Validation. We should investigate if we can then support this new option (and Multiline) in the that version (#ifdef's or something like that)

[sebguischr]

Screenshots attached — one per example on /DataGrid/MasterDetail:

Single-level (customers → orders)
Custom content as detail (contact card, no nested grid at all)
Two levels of nesting (customers → orders → order lines)
On the "two solutions for the same thing" concern — I think they actually target different shapes of data rather than overlapping:

Hierarchical view: parent and children are the same TItem, rendered through the same columns in a single grid — it's for recursive/self-referential data (org charts, categories/subcategories).
Master/Detail: the detail is a RenderFragment, so it can be a different item type, different columns, or non-tabular content entirely (as screenshot 2 shows) — it's for showing associated but differently-shaped data per row, not another view of the same tree.
So picking one over the other is really about the shape of the data, not a stylistic choice — but I get the discoverability worry (two different "expand a row" mechanisms to explain). Happy to make that distinction more prominent in the docs (I already cross-link the two pages) if that would help positioning this for a merge decision — let me know what would be useful, no pressure either way.

Good call on .NET 11 — I hadn't looked into the unequal-heights/Validation work there. I don't know that API surface yet, but I'm glad to dig into whether RowDetails (and MultiLine) could ride on it once it's available, if/when that becomes relevant here.

[vnbaaij]

I tried to merge latest dev-v5 branch because of the performance PR for DataGrid, but now I get some errors. Can you fix those in your branch?

[sebguischr]

Fixed — rebased onto the latest dev-v5 in e33c611. The conflict was with the perf PR (#5023, non-interactive cells as plain ), which touched the same rendering path as RowDetails.

What changed on my side to accommodate it:

• Moved the RowDetails toggle into RenderCellInner, the new shared render helper used by both the component and plain- code paths, keyed off col.Index == 1 instead of the old loop index.

• Re-applied the CellType != DataGridCellType.RowDetails style guards (skipping the fixed row-height/grid-column styling) onto the new static BuildStyle/BuildClass methods, since cell styling is now shared between the component and the plain- fast path.

Rebuilt, reran the full suite (3756/3757 — same one pre-existing unrelated failure as before), and re-verified all three demo examples render identically to before the rebase, so the perf change and RowDetails coexist cleanly. Let me know if you'd like anything else adjusted.

[vnbaaij]

Ok, now I know I like this 😁. Well done!

Couple of nitpicks...

Please change the note in the docs to:

>[!WARNING] The `RowDetails` parameter cannot be used when the `Virtualize` parameter is set to `true`.

It will then render with the appropriate style:

For the examples, I would tweak the style of the detail header a bit:

 <h5 style="margin: 0 0 10px 20px;">Orders of @customer.Name</h5> 

So it aligns better with the text o the master row:

I saw in the other examples you are re-sing this style a couple of times, so maybe it makes sense to define a class for it in the <style> tags you have already created?

Also, I think it would be good to show in the default example 1 row (somewhere in the middle) that doesn't have any detail data. And to include a simple description of what the example shows (and explain that row x doesn't have detail data)

Now that we are merging this, the hierarchical-toggle-container and hierarchical-expander' and hierarchical-expandedclass names do not really cover the load anymore. Can you do a rename of these torow-...` (and check if tests still pass)

[MarvinKlein1508]

@sebguischr is there any way to get some sort of loading mechanism into it as well?

For example: I expand the row which should trigger a load mechanism.

<RowDetails Context="customer">
    @if (ordersForCustomer is null)
    {
        <FluentSpinner />
        return;
    }
    else
    {
        <h5 style="margin: 0 0 0.5rem 0;">Orders of @customer.Name</h5>
        <FluentDataGrid Items="ordersForCustomer" ShowHover="true">
            <PropertyColumn Title="Order #" Property="@(o => o.OrderNumber)" />
            <PropertyColumn Title="Date" Property="@(o => o.OrderDate)" Format="yyyy-MM-dd" Sortable="true" InitialSortDirection="DataGridSortDirection.Descending" IsDefaultSortColumn="true" />
            <PropertyColumn Title="Amount" Property="@(o => o.Amount)" Format="c" Align="DataGridCellAlignment.End" Sortable="true" />
            <TemplateColumn Title="Status">
                <FluentBadge Color="@(context.Status == "Delivered" ? BadgeColor.Success : BadgeColor.Subtle)">
                    @context.Status
                </FluentBadge>
            </TemplateColumn>
        </FluentDataGrid>
    }
</RowDetails>

private async Task LoadOrdersAsync(Customer customer)
{
    ordersForCustomer = null;
    await Task.Delay(2000);

    ordersForCustomer = OrdersOf(customer.Id);
}

This would allow the user to achieve the same without the need to have all orders in memory.

[vnbaaij]

@MarvinKlein1508 Good addition! But I propose that if this needs extra code, to do it in a new PR so this stays manageable

[sebguischr]

All done, pushed in 4fad3ae and bec54e0 — thanks for the detailed feedback, it's a lot cleaner now! 😁

• Warning callout: switched to >[!WARNING] for the Virtualize restriction.

• Detail heading: now margin: 0 0 10px 20px, factored into a shared .detail-heading class in each example instead of a repeated inline style.

• Empty detail row: added "Tailspin Toys" (no orders) in the middle of the default example, with a dedicated EmptyContent ("No orders yet.") on the child grid, plus a sentence in the description calling it out.

• Renamed hierarchical-toggle-container/-expander/-expanded/-collapsed/-expand-button to row-toggle-container/-expander/-expanded/-collapsed/-expand-button everywhere (CSS, markup, and test selectors) — including the pre-existing hierarchical-view usages, since the classes are shared between both features now. Left row-details-toggle-container as-is.

Reran the full suite (306/306 DataGrid tests, 3756/3757 overall — same pre-existing unrelated failure) and re-verified all examples visually, including the empty-row case and the admonition rendering with the site's standard warning style.

Issue was resolved