Open
Conversation
Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/795c54fa-1f26-41c6-a39b-b5f4bfc2463e Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>
Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/795c54fa-1f26-41c6-a39b-b5f4bfc2463e Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>
- Refactor and clean up column configuration and UI by introducing ColumnHeaderCapabilities
- Refactor column header ui and show/close logic - Adapt tests
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds column reordering to the FluentDataGrid (drag-and-drop plus an accessible header UI) and refactors the column header popup infrastructure to support sort/resize/options/reorder consistently. It also introduces persisted column order support and updates demo/docs/tests accordingly.
Changes:
- Add
ReorderableColumns, column-order persistence (ColumnOrder/ColumnOrderChanged), and reorder UI/actions for DataGrid. - Refactor header popup into a unified “column header UI” surface and consolidate capability logic via
ColumnHeaderCapabilities. - Update localization, demos/docs, and test suite/snapshots to cover the new behaviors and renamed settings/events.
Reviewed changes
Copilot reviewed 36 out of 37 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Core/Components/DataGrid/FluentDataGrid.razor.cs | Adds reorder feature, persisted order API, unified header UI state, new ColumnMenuSettings parameters |
| src/Core/Components/DataGrid/FluentDataGrid.razor(.css/.ts) | Unifies popup markup/CSS and adds drag-drop reordering wiring and popup positioning |
| src/Core/Components/DataGrid/Columns/ColumnBase.razor(.cs) | Uses ColumnHeaderCapabilities, updates menu rendering, adds reorder menu item/action |
| src/Core/Components/DataGrid/Columns/ColumnReorderOptions.razor(.cs/.css) | New accessible reorder actions UI in the header popup |
| src/Core/Components/DataGrid/ColumnHeaderCapabilities.cs | New capability struct used for consistent conditional rendering |
| src/Core/Events/EventHandlers.cs | Replaces close events with onclosecolumnheaderui |
| src/Core/Localization/LanguageResource.resx | Adds reorder-related resource strings |
| tests/Core/Components/DataGrid/FluentDataGridTests.razor | Adds reorder and order persistence tests; updates close UI tests and menu settings tests |
| tests/Core/Components/DataGrid/FluentDataGridPinnedColumnTests.razor | Updates pinned column tests to align with new ordering behavior |
| examples/Demo/**/DataGridReorderableColumnsPage.md + example .razor | New demo doc page and sample for reorderable columns |
| examples/Demo/**/DataGridCustomComparerPage.md | Note/admonition formatting update |
| Directory.Build.props | Version suffix bump |
| .github/copilot-instructions.md | Adds repo-specific Copilot guidance |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/Core/Components/DataGrid/Columns/ColumnReorderOptions.razor.css
Outdated
Show resolved
Hide resolved
...uentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridReorderableColumnsPage.md
Outdated
Show resolved
Hide resolved
...o/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridCustomComparerPage.md
Outdated
Show resolved
Hide resolved
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 99.2%
|
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
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 reorderable columns to DataGrid component. This functionality required a new column header popup with UI and the existing infrastructure to display such UI was at the end of its capabilities. The popup display logic has therefore been refactored and improved. Besides using the popup, columns can also be reordered via drag and drop.
Result
DataGrid component enhancements
ColumnHeaderCapabilitiesstruct to centralize and simplify logic for determining available header actions (sort, resize, reorder, options, popup content) in DataGrid columns. All menu and header button rendering now consistently use this struct for conditional UI logic. [1] [2] [3] [4] [5] [6] [7]ColumnSortMenuSettings,ColumnResizeMenuSettings,ColumnOptionsMenuSettings, andColumnReorderMenuSettingsfor improved customization and localization. [1] [2]Demo and documentation updates
DataGridReorderableColumnsPage.md) demonstrating column reordering, including accessibility shortcuts and usage instructions. [1] [2]Project configuration and guidelines
Other improvements