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.

Auto on MAUI

The header, every row, the summary rows and the footer are separate layouts, so an Auto column is resolved once for the whole grid and applied to all of them as an absolute width. The grid measures the header cell, the footer summary text and the cells of the first AutoWidthSampleSize items (default 100, in source order; 0 measures only the header and footer), takes the widest, and clamps it to the column’s MinWidth/MaxWidth. A tree column adds its caret and the deepest visible indent.

It re-measures when the columns, the source or its contents, Dense or the sample size change — not on sort, paging or expansion. A value wider than anything in the sample is cut off with an ellipsis; raise AutoWidthSampleSize or give the column a fixed width if that matters. Until the grid has a handler it cannot measure, so an Auto column stays provisional until it attaches.

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

Topic	Description
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