Grouping

Since 0.1.0-alpha.20

Group by columns, a page of groups at a time, with values for each group.

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

Groups

Use Groupable to let people group from a header's menu, and InitialGroup to start grouped. Both are in the address, as ?group=status, and a group's row is a link that opens it, so this works on a static page with no script. A page counts top-level groups, so a group is never split, and a group's count is the whole group's. GroupAggregate shows a value on each group's row and GroupFooterAggregate one under an open group's rows, separate from the footer's Aggregate. With an ItemsProvider, add a GroupsProvider: rows still come from your provider, with the group's value in the filter.

Preview Code

Preview

Status

Orders in groups
	Order	Customer Group by this column	Placed Group by this column	Total Group by this column
Status: Paid (5)				Max: $399.50
Status: Pending (6)				Max: $483.75
Status: Refunded (6)				Max: $483.00
				Sum: $6,106.50

Code

Grouping.razor

@using Rows = IzzyBlazor.Site.Examples.Table.Orders
@* Choose "Group by this column" in a header's menu, or start from the address. Each group's row is a
   link that opens it, its count is the whole group's, and a page holds whole groups. *@
<DataGrid Items="Rows.All" PageSize="3" Caption="Orders in groups" ItemKey="o => o.Number.ToString()"
          Groupable InitialGroup="status" QueryPrefix="grouped-" Grow>
    <PropertyColumn Property="o => o.Number" Title="Order" Align="CellAlign.Start" Width="6.Rem" Groupable="false" />
    <PropertyColumn Property="o => o.Customer" Sortable />
    <PropertyColumn Property="o => o.Status" Filterable />
    <PropertyColumn Property="o => o.Date" Format="MMM d" GroupBy="o => o.Date.Month" GroupFormat="0" Title="Placed" />
    <PropertyColumn Property="o => o.Total" Format="C" Width="10.Rem"
                    GroupAggregate="DataAggregate.Max" GroupFooterAggregate="DataAggregate.Sum" Aggregate="DataAggregate.Sum" />
</DataGrid>