DataGrid | Column Widths

Blazor takes any CSS length on Width — "160px", "12rem", "25%". MAUI takes a GridLength ("*", "2*", "Auto", "160"), plus a WidthPercent (1–100) that wins over Width when set.

@* Blazor *@
<PropertyColumn Property="x => x.Department" Width="30%" />

<!-- MAUI -->
<shiny:DataGridColumn Title="Department" PropertyName="Department" WidthPercent="30" />

Percentages are the one width form that reads the same on both hosts, so prefer them when a layout has to be described once.

On MAUI a percentage resolves to a star of the same factor outside HorizontalScroll — a star factor is a percentage, since the Grid divides the available width in exactly the ratio of the factors, so columns whose percentages sum to 100 each get theirs. Percentages summing to less than 100 leave the remainder unclaimed (the columns simply share the whole width in that ratio), and mixed with absolute columns they split whatever is left over.

Under HorizontalScroll there is no available width to share — the columns are meant to overflow it — so a percentage resolves against the scroller’s own measured width instead, and percentages summing past 100 are what make the grid scroll. Before the first layout there is no viewport to take a percentage of; the column shows DefaultColumnWidth for that one frame and re-resolves as soon as the real width arrives.

Next Steps

• Column Resizing — drag handles, min/max bounds, resize modes
• Column Ordering — drag-and-drop reorder and the MAUI arrows
• Frozen Header & Columns — pin a run of columns to either edge