[DataGridPremium] Reordering support for row grouping

[MBilalShafi]

Resolves #7775

Preview: https://deploy-preview-18251--material-ui-x.netlify.app/x/react-data-grid/row-grouping/#drag-and-drop-group-reordering

Summary

This PR implements comprehensive drag-and-drop reordering support for row grouping using a two-phase approach: validation and execution.

Architecture

The reordering happens in two steps:

1. Validation Phase (dragOver):

• The getRowReorderTargetIndex pipe processor calls rowGroupingReorderValidator to check operation validity
• Returns -1 for invalid operations or the placeholderIndex for valid ones
• Uses rule-based validation via the RowReorderValidator class

2. Execution Phase (dragEnd):

• If validation passed, setRowIndex() triggers rowGroupingReorderExecutor
• Handles different scenarios (same-parent swap, cross-parent moves) via the RowReorderExecutor class
• Updates grouping fields automatically for cross-parent operations

Valid Reorder Cases

Case	Source	Target	Condition	Action
A	Leaf	Leaf	Same parent	Simple position swap
B	Group	Group	Same parent	Swap groups with all descendants
C	Leaf	Leaf	Different parents, same depth	Move source to target's parent with field updates
D	Leaf	Group	Target depth < source depth	Make source a child of target
G	Group	Group	Different parents, same depth	Move group preserving hierarchy

Invalid Reorder Cases

Case	Source	Target	Reason
E	Leaf	Group	Target is source's parent (no effect)
F	Group	Leaf	Would break grouping criteria
Any	Any	Adjacent	No actual movement needed
Any	Any	Same Node	Source and target are identical

Core Classes

RowReorderValidator: Rule-based validation system that checks conditions to determine if a reorder is valid

class RowReorderValidator {
  validate(context: ReorderValidationContext): boolean;
  addRule(rule: ValidationRule): void;
  removeRule(ruleName: string): void;
}

RowReorderExecutor: Manages execution of valid reorder operations with scenario-specific strategies

class RowReorderExecutor {
  async execute(ctx: ReorderExecutionContext): Promise<void>;
}

Drop Indicator Behavior

Updated behavior: Drop indicators now appear for adjacent positions and same-node drops, providing visual feedback even when no actual movement occurs. This improves user experience by showing that the drop zone is recognized.

• Visual Feedback: Blue drop line appears above/below target row
• Movement Prevention: No actual reordering when dropping on adjacent positions or same row
• Auto-expansion: Groups expand automatically after 500ms hover
• Animation: Smooth transitions during reorder operations

Logic Splitting

API methods:
Configuration Context provides useGridRowsOverridableMethods hook which currently supports setRowIndex but could support more methods later. This enables proper logic separation between different hooks and packages.

Feature-specific validation:
Uses pipe processing to allow respective hooks (useGridRowGrouping, useGridTreeData, etc.) to inject logic based on requirements. Called from useGridRowReorder hook.
I'm not happy with the processor name (getRowReorderTargetIndex()) though. Feel free to suggest a better name.

Related Updates

• Add groupingValueSetter() to complement groupingValueGetter() for updating grouping fields
• Styling improvements to drop indicator and drag image
• processRowUpdate() is called when row updates happen, allowing users to sync data before update
• Error handling with onProcessRowUpdateError for failed updates
• Event system publishes rowOrderChange for external handling

Cross-Parent Operations

When moving rows between different parent groups, the system automatically updates grouping fields using the configured groupingValueSetter or direct field updates, ensuring data consistency.

In Progress

• Create a way to have different logic per package using grid configuration context
• Add core row reordering logic for row grouping
• Incorporate the drop indicator change ([DataGridPro] Row reorder using drop indicator #18627)
• Customize reorder value for auto-generated (group) rows
• Fix scroll bug (https://v7.mui.com/x/react-data-grid/row-ordering/ vs https://v6.mui.com/x/react-data-grid/row-ordering/)
• Call processRowUpdate on group update
• Add groupingValueSetter (inverse of groupingValueGetter)
• Test with aggregation + row grouping and other edge cases
• Fix behavior with filtering
• UX improvements
  • Integrate the drop indicator
  • Show a different cursor (e.g. cursor: not-allowed) when drop is not applicable
  • Show browser native + (copy) cursor on droppable areas (debatable ?)
• Add tests
• Improve types
• Add/improve documentation
• Support moving parents under different higher level parents ([DataGridPremium] Reordering support for row grouping #18251 (comment))
• Bugfix: Update root row count if removal (e.g. move to another parent) of a leaf causes removal of more then two ascendants on one tree branch (e.g. removing 'Avatar' removed company and director autogenerated rows, but root row count isn't updated)

Open questions:

• Does it make sense to hide the reorder column if it's not supported, like with sort applied etc.?

Follow up

• [data grid] Add row reordering support for server side grouped data #18947
• Add a custom drag image
• Support touch devices
• Accessibility improvements

Changelog

• 🚀 Data Grid row grouping now supports row reordering ([DataGridPremium] Reordering support for row grouping #18251)

  See the Drag-and-drop group reordering section for more details.

[mui-bot]

Deploy preview: https://deploy-preview-18251--material-ui-x.netlify.app/

Updated pages:

• docs/data/data-grid/row-grouping/row-grouping.md
• docs/data/data-grid/row-ordering/row-ordering.md
• docs/data/data-grid/server-side-data/row-grouping.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	🔺+301B(+0.05%)	🔺+156B(+0.08%)
@mui/x-data-grid-pro	🔺+1.15KB(+0.16%)	🔺+399B(+0.18%)
@mui/x-data-grid-premium	🔺+15KB(+1.77%)	🔺+4.76KB(+1.88%)
@mui/x-charts	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 218558e

[arminmeh]

Great work @MBilalShafi 💯
I found a small issue when trying to drag a row from the bottom of the grid.
It might be due to some other element ending the drag event prematurely.

Screen.Recording.2025-08-25.at.15.10.41.mov

[arminmeh]

Part of these utilities are similar to the ones used for the automatic parent/child selection.
Maybe in the future we could consider merging them.

[MBilalShafi]

Sure, I'll do some reorganizing the in next PR addressing tree-data part. 👍

[MBilalShafi]

I found a small issue when trying to drag a row from the bottom of the grid. It might be due to some other element ending the drag event prematurely.

The issue is also visible here: https://mui.com/x/react-data-grid/row-ordering/#implementing-row-reordering

It's reproduced in combination of the setting "When scrolling" in "Show scroll bars" setting.

The scrollbar div overflows on the last cell and prevents the hover to work below that.

I'll open Opened a separate issue for this.