DataGrid | Column Resizing

Switch resizing on per grid — Blazor ColumnResizeMode, MAUI AllowColumnResize="True" — and the user drags the right edge of a header. Any column can opt out with Resizable="false": it keeps its width and offers no handle at all.

Min / max width

Bound the drag per column with MinWidth / MaxWidth. Anything that sets neither falls back to the grid’s MinColumnWidth (48 by default) and MaxColumnWidth (unbounded by default).

@* Blazor - CSS values *@
<PropertyColumn Property="x => x.FirstName" Width="160px" MinWidth="80px" MaxWidth="260px" />

<!-- MAUI - device-independent units; 0 means "fall back to the grid" -->
<shiny:DataGridColumn Title="First" PropertyName="FirstName" Width="*" MinWidth="90" MaxWidth="260" />

Set at least a MinWidth on any column a user can drag. Without one they can squeeze it down to the floor and lose the header text with nothing on screen telling them how to get it back.

A few rules worth knowing before they surprise you:

• The grid-level pair bounds the drag, not the layout. A deliberately narrow Width="40" icon column stays 40 wide even though dragging it would stop at 48. Only a column’s own MinWidth/MaxWidth also constrain its declared width.
• A MaxWidth below the MinWidth loses. The floor wins, so a contradictory pair still leaves a column the user can see and drag rather than a sliver they cannot.
• Blazor takes CSS strings. A pixel value ("80px") also clamps the drag; any other unit (%, em) is emitted as CSS but leaves the drag on the grid-level default, because a drag works in pixels and only the browser knows what a percentage is worth.
• MAUI leaves star columns alone. A star width outside HorizontalScroll stays a star and is not clamped — MAUI’s Grid has no bounded star, so clamping would silently turn it absolute and kill the proportional layout. Under HorizontalScroll a star resolves to a number, and that number is bounded.

Resize modes (Blazor)

ColumnResizeMode.Column lets the grid grow as a column widens. ColumnResizeMode.Container takes whatever one column gains out of the next resizable column, so the grid’s total width holds — and when that neighbour hits its own minimum it stops giving, which stops the drag rather than letting the pair drift wider.

ColumnResized reports each finished drag as a column id and a final pixel width; persist those and re-apply them to restore a user’s layout on the next visit. ResetColumnWidths() drops every column back to its declared width.

Next Steps

• Column Widths — pixels, stars and percentages
• Column Ordering — drag-and-drop reorder and the MAUI arrows
• Frozen Header & Columns — pin a run of columns to either edge