[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Blazor Row Grouping
The Ignite UI for Blazor Data Table / Data Grid lets you group rows into a ‘sticky header’ Row Group. This is similar to the Group By feature in Microsoft Outlook, which is an easy way to visually group data based on your own criteria.
Blazor Row Group-By Area Example
Group-By Area
Set IsGroupByAreaVisible
property on the DataGrid to True, as shown in the example above, to the user interface. The group-by area allows users more options to group and sort columns without interact when interacting the DataGrid indirectly. Groups can be positioned and reordered based on the users needs. This area also populates when columns are programmatically added as GroupDescriptions
on the DataGrid as well.
Using Group Descriptions Example
Hierarchical Groups
The GroupHeaderDisplayMode
property allows the groups to be hierarchical. By default, each group description that is added gets aggregated together. Setting the GroupHeaderDisplayMode
to Split
will create a section header for ever group defined in GroupDescriptions
property of the IgbGrid
.
<IgbDataGrid Height="100%" Width="100%"
@ref="DataGridRef"
DataSource="DataSource"
GroupHeaderDisplayMode="GroupHeaderDisplayMode.Split" />
Collapsable Groups
Also, the IgbGrid
can display a toggle on each group section to allow the end user to expand or collapse the grouped data via the IsGroupCollapsable
property.
<IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
DataSource="DataSource"
IsGroupCollapsable="true" />
Summary
For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project.
<IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
DataSource="DataSource"
GroupHeaderDisplayMode="GroupHeaderDisplayMode.Split"
IsGroupCollapsable="true" />
@code {
private IgbDataGrid grid;
public IgbDataGrid DataGridRef
{
get
{
return grid;
}
set
{
grid = value;
OnGridCreated();
StateHasChanged();
}
}
private void OnGridCreated()
{
var state = new ColumnGroupDescription { Field = "Country", DisplayName = "Location" };
var city = new ColumnGroupDescription { Field = "City", DisplayName = "City" };
var income = new ColumnGroupDescription { Field = "Income", DisplayName = "Income" };
this.DataGridRef.GroupDescriptions.Add(state);
this.DataGridRef.GroupDescriptions.Add(city);
this.DataGridRef.GroupDescriptions.Add(income);
}
}
API References
IgbGrid
GroupDescriptions
GroupHeaderDisplayMode
IsGroupByAreaVisible
IsGroupCollapsable