[dev-v5][DataGrid] Add Hierarchical DataGrid functionality#4482
Merged
[dev-v5][DataGrid] Add Hierarchical DataGrid functionality#4482
Conversation
- Tweak (margings) and simplify markup - Fix using wrong localization string - Call JS Resize init at the right time
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 99.1%
|
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request introduces hierarchical grid functionality to the Fluent UI DataGrid component, enabling parent-child relationships in grid data with expand/collapse capabilities. The changes span core component logic, example demonstrations, documentation, and comprehensive test coverage.
Changes:
- Added hierarchical data support through new
HierarchicalGridItembase class andIHierarchicalGridIteminterface - Implemented expand/collapse functionality with visual toggle buttons and programmatic control
- Updated DataGrid styling and layout to accommodate hierarchical indentation and toggle controls
Reviewed changes
Copilot reviewed 37 out of 37 changed files in this pull request and generated 20 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Core/Components/DataGrid/IHierarchicalGridItem.cs | New interface defining hierarchical grid item contract |
| src/Core/Components/DataGrid/HierarchicalGridItem.cs | New base class for hierarchical grid items with depth tracking and collapse state |
| src/Core/Components/DataGrid/HierarchicalGridUtilities.cs | Utility methods for ordering hierarchical data structures |
| src/Core/Components/DataGrid/FluentDataGrid.razor | Added hierarchical toggle rendering and OnToggle event callback |
| src/Core/Components/DataGrid/FluentDataGrid.razor.cs | Added ToggleExpandedAsync method and OnToggle parameter |
| src/Core/Components/DataGrid/FluentDataGrid.razor.ts | Fixed column resizing logic to handle empty minWidth values |
| src/Core/Components/DataGrid/FluentDataGridCell.razor.css | Added CSS for hierarchical toggle buttons and expander styling |
| src/Core/Components/DataGrid/FluentDataGrid.razor.css | Updated resize handle width |
| src/Core/Components/DataGrid/FluentDataGridCell.razor.cs | Modified min-width logic for header cells |
| src/Core/Components/DataGrid/Columns/ColumnBase.razor | Refactored header styling and removed commented code |
| src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs | Added HierarchicalToggle parameter |
| src/Core/Components/DataGrid/Columns/ColumnBase.razor.css | Deleted (CSS moved to FluentDataGridCell.razor.css) |
| src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor | Updated label localization key |
| src/Core/Components/DataGrid/Columns/SelectColumn.cs | Added GC.SuppressFinalize call and trailing commas |
| examples/Demo/.../DataGridHierarchical.razor | Single-level hierarchy demo with continents and countries |
| examples/Demo/.../DataGridHierarchicalOrgChart.razor | Multi-level hierarchy demo with organizational structure |
| examples/Demo/.../DataGridHierarchical.razor.css | Custom styling for hierarchical demo |
| examples/Tools/.../Olympics2024.cs | Added continent data and ContinentCode field to countries |
| examples/Demo/.../DataGridHierachicalPage.md | Documentation for hierarchical grid feature (filename has typo) |
| examples/Demo/.../DataGridCustomComparerPage.md | Clarified custom localizer usage |
| examples/Demo/.../FluentDataGrid.md | Added hierarchical grid link to examples list |
| examples/Demo/.../DataGridTypical.razor.css | Updated flag border color to use design token |
| tests/Core/.../HierarchicalGridUtilitiesTests.cs | Comprehensive unit tests for hierarchical utilities |
| tests/Core/.../FluentDataGridTests.razor | Added tests for error handling, async query executor, toggle, and refresh |
| tests/Core/.../SelectColumnTests.*.verified.razor.html | Updated verified test snapshots with new HTML structure |
| tests/Core/.../FluentDataGridTests.*.verified.razor.html | Updated verified test snapshots with new HTML structure |
| tests/Tools/.../GetStartedInfoTests.cs | Deleted test file |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...emo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridHierarchicalPage.md
Show resolved
Hide resolved
...UI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridHierarchicalOrgChart.razor
Outdated
Show resolved
Hide resolved
...UI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridHierarchicalOrgChart.razor
Outdated
Show resolved
Hide resolved
...UI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridHierarchicalOrgChart.razor
Outdated
Show resolved
Hide resolved
...UI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridHierarchicalOrgChart.razor
Outdated
Show resolved
Hide resolved
...o/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridHierarchical.razor
Outdated
Show resolved
Hide resolved
… that it can only be placed on the 1st column - Localize toggle button aria label
…/github.com/microsoft/fluentui-blazor into users/vnbaaij/dev-v5/hierarchical-grid-item
dvoituron
requested changes
Jan 28, 2026
…/github.com/microsoft/fluentui-blazor into users/vnbaaij/dev-v5/hierarchical-grid-item
- Extend hierarchy examplew ith Expand/Collapse al - Add OnExpandAll/OnCollapseAll event callback
dvoituron
approved these changes
Jan 31, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces hierarchical grid data. It adds the
HerarchicalGridItemclass, examples and documentation updates for the Fluent UI DataGrid component. The main changes, besides adding the hierarchy support, include adding new demo pages and examples to showcase hierarchical and multi-level data grids, updating documentation links, and minor CSS improvements for consistency.New hierarchical data grid examples
DataGridHierarchical.razorto demonstrate a single-level hierarchical data grid using continents and countries, with flag images and medal counts.DataGridHierarchicalOrgChart.razorto demonstrate a multi-level hierarchy (CEO, Directors, Employees) and programmatic expand/collapse functionality.Documentation updates
DataGridHierachicalPage.mdexplaining hierarchical data grid usage, including both single-level and multi-level examples.CSS improvements
DataGridHierarchical.razor.cssfor hierarchical grid example, including styling for flag icons and grid hover color.DataGridTypical.razor.cssfor consistency with other examples.Other documentation cleanup