Columns

Since 0.1.0-alpha.20

Let people resize, move, hide and freeze columns.

Static server-side rendering: no circuit, no WebAssembly.

Rearranging columns

ResizableColumns, ReorderableColumns and ColumnPicker let people change the columns. A LayoutKey keeps what they chose in a cookie, per person and per page, and the server draws it on the first paint. Drag a handle or a header, or use the keys and the ⋮ menu in each header. Visible set to false starts a column hidden, and the picker can show it; with Pickable false too, it stays hidden.

Preview Code

Preview

Orders you arrange
Order	Customer	Date	Status	Total
1001	Margaret Hamilton	Sep 8	Failed	$66.25
1002	Katherine Johnson	Sep 15	Refunded	$108.00
1003	Grace Hopper	Sep 22	Pending	$149.75
1004	Barbara Liskov	Sep 29	Paid	$191.50
1005	Linus Torvalds	Oct 6	Failed	$233.25

Code

Arrange.razor

@* Drag a header's edge or the header itself, or use the keys and the ⋮ menu in each header. Weekday starts
   hidden: show it from the picker. The layout is kept per person in a cookie, and the server draws it on the first paint: reload to see. *@
@using Rows = IzzyBlazor.Site.Examples.Table.Orders
<DataGrid Items="Rows.All" PageSize="5" Caption="Orders you arrange" LayoutKey="arrange-example" ResizableColumns ReorderableColumns ColumnPicker Grow>
    <PropertyColumn Property="o => o.Number" Title="Order" Align="CellAlign.Start" Width="6.Rem" Resizable="false" Reorderable="false" Pickable="false" />
    <PropertyColumn Property="o => o.Customer" Width="14.Rem" Sortable MaxWidth="30.Rem" />
    <PropertyColumn Property="o => o.Date" Format="MMM d" Width="9.Rem" Sortable />
    <TemplateColumn Title="Status" Width="10.Rem">
        <Badge Status="Rows.StatusOf(context.Status)" Dot>@context.Status</Badge>
    </TemplateColumn>
    <PropertyColumn Property="o => o.Total" Format="C" Sortable />
    <PropertyColumn Property="o => o.Date.DayOfWeek" Title="Weekday" Width="8.Rem" Visible="false" />
</DataGrid>

Frozen columns

Use Frozen to keep a column in view at the grid's start or end while the rest scroll sideways. It works with no script. A frozen column needs a Width, and is drawn at its edge wherever it's declared. On a phone they scroll like the rest.

Preview Code

Preview

Orders by column
Order	Customer	Placed	Shipped	Delivered	Status	Invoiced	Paid	Total
1001	Margaret Hamilton	Sep 8	2026-09-08	2026-09-08	Failed	2026-09-08	2026-09-08	$66.25
1002	Katherine Johnson	Sep 15	2026-09-15	2026-09-15	Refunded	2026-09-15	2026-09-15	$108.00
1003	Grace Hopper	Sep 22	2026-09-22	2026-09-22	Pending	2026-09-22	2026-09-22	$149.75
1004	Barbara Liskov	Sep 29	2026-09-29	2026-09-29	Paid	2026-09-29	2026-09-29	$191.50
1005	Linus Torvalds	Oct 6	2026-10-06	2026-10-06	Failed	2026-10-06	2026-10-06	$233.25

Code

Frozen.razor

@* Order and Customer stay at the start and Total at the end while the rest scroll sideways, with no
   script. On a phone they'd leave too little room, so they scroll too. *@
@using Rows = IzzyBlazor.Site.Examples.Table.Orders
<DataGrid Items="Rows.All" PageSize="5" Caption="Orders by column" Striped Grow>
    <PropertyColumn Property="o => o.Number" Title="Order" Align="CellAlign.Start" Width="6.Rem" Frozen="ColumnFrozen.Start" />
    <PropertyColumn Property="o => o.Customer" Width="12.Rem" Frozen="ColumnFrozen.Start" />
    <PropertyColumn Property="o => o.Date" Title="Placed" Format="MMM d" Width="10.Rem" />
    <PropertyColumn Property="o => o.Date" Title="Shipped" Format="yyyy-MM-dd" Width="10.Rem" SortKey="shipped" />
    <PropertyColumn Property="o => o.Date" Title="Delivered" Format="yyyy-MM-dd" Width="10.Rem" SortKey="delivered" />
    <TemplateColumn Title="Status" Width="10.Rem">
        <Badge Status="Rows.StatusOf(context.Status)" Dot>@context.Status</Badge>
    </TemplateColumn>
    <PropertyColumn Property="o => o.Date" Title="Invoiced" Format="yyyy-MM-dd" Width="10.Rem" SortKey="invoiced" />
    <PropertyColumn Property="o => o.Date" Title="Paid" Format="yyyy-MM-dd" Width="10.Rem" SortKey="paid" />
    <PropertyColumn Property="o => o.Total" Format="C" Width="8.Rem" Frozen="ColumnFrozen.End" />
</DataGrid>