DataGrid | Column Ordering

Set DragDropColumnReordering on the grid — off by default on both hosts — and a header can be dragged onto another. A marker shows the edge the column will land on: dropping to the right of a column puts it after that column, and to the left, before it.

@* Blazor *@
<DataGrid TItem="Person" Items="people"
          DragDropColumnReordering="true"
          ColumnReordered="e => Save(e.Order)">

<!-- MAUI -->
<shiny:DataGrid ItemsSource="{Binding People}" DragDropColumnReordering="True" />

Each drop raises ColumnReordered — persist what it reports to restore a user’s column layout on the next visit. Blazor gives you every visible column id left to right and keeps the order on the grid, so ResetColumnOrder() puts the columns back in declaration order; MAUI moves the column inside Columns itself and reports its new index.

MAUI also keeps its ‹ › reorder arrows on the separate AllowColumnReorder — the accessible, no-drag path to the same thing. The two switches are independent, so a grid can offer either, both, or neither. The drag runs on a pan gesture rather than the platform drag recognizers, which are broken on Mac Catalyst and missing from the AppKit and GTK4 hosts.

⚠️ On MAUI under HorizontalScroll, enabling drag reorder claims sideways gestures that start on a header — the enclosing scroller would otherwise take the gesture away mid-drag — so the grid is scrolled by dragging a row instead.

Next Steps

• Column Resizing — drag handles, min/max bounds, resize modes
• Column Widths — pixels, stars and percentages