Blazorise DataGrid: Grouping

Grouping feature for Blazorise DataGrid allows you to easily group and organize your data by specific columns.

This Blazorise DataGrid Grouping can be useful for analyzing large sets of data and finding patterns or trends.

Column Grouping

You can define columns that can be grouped by assigning the Groupable and Grouping parameters parameters. This will allow you to specify which columns can be grouped and which should be used for grouping.

By default grouping occurs on the column Field. However you may also provide a custom group Function.

#
First Name
Last Name
Email
Gender
Children
Active
D
F
M
<DataGrid TItem="Employee"
          Data="@employeeList"
          Responsive
          Groupable>
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn Field="@nameof(Employee.Gender)" Caption="Gender" Editable Groupable Grouping/>
    <DataGridColumn Field="@nameof(Employee.Childrens)" Caption="Children" Editable  />
    <DataGridColumn Field="@nameof(Employee.IsActive)" Caption="Active" Editable  />
</DataGrid>

@code{
    [Inject] public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Custom GroupBy Function

In addition to the Groupable and Grouping parameters, you can also provide a custom GroupBy function. This function allows you to define how the data should be grouped, providing even more flexibility and control over how your data is organized.
#
First Name
Last Name
Email
Gender
Children
Active
{ Childrens = 1, Gender = F }
{ Childrens = 1, Gender = M }
{ Childrens = 3, Gender = D }
{ Childrens = 3, Gender = M }
{ Childrens = 4, Gender = M }
{ Childrens = 5, Gender = D }
{ Childrens = 5, Gender = F }
<DataGrid TItem="Employee"
          Data="@employeeList"
          Responsive
          Groupable
          GroupBy="(x=> new { x.Childrens, x.Gender} )">
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn Field="@nameof(Employee.Gender)" Caption="Gender" Editable />
    <DataGridColumn Field="@nameof(Employee.Childrens)" Caption="Children" Editable />
    <DataGridColumn Field="@nameof(Employee.IsActive)" Caption="Active" Editable />
</DataGrid>

@code{
    [Inject] public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Drag and Drop Grouping

The ShowGrouping parameter, allows you to drag and drop groupable columns on a group area. This feature makes it easy to rearrange and experiment with different groupings, providing more flexibility and control over how you organize and analyze your data within the DataGrid.

Columns should be eligible for grouping by enabling Groupable. Once enabled, the columns that are draggable will show the "grip" icon next to the column title.

GenderActive
#
First Name
Last Name
Email
Gender
Children
Active
D
F
M
<DataGrid TItem="Employee"
          Data="@employeeList"
          Responsive
          Groupable
          ShowGrouping>
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn Field="@nameof(Employee.Gender)" Caption="Gender" Editable Groupable Grouping />
    <DataGridColumn Field="@nameof(Employee.Childrens)" Caption="Children" Editable />
    <DataGridColumn Field="@nameof(Employee.IsActive)" Caption="Active" Editable Groupable Grouping />
</DataGrid>

@code{
    [Inject] public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Grouping Methods

You can programatically control whether a group is expanded or collapsed by utilizing the provided

  • ExpandAllGroups
  • CollapseAllGroups
  • ExpandGroups
  • CollapseGroups
  • ToggleGroups

Please note, that these methods may require you to know the produced group keys beforehand. Either you are intimate with the data and know the possible produced keys beforehand, or you may access the DisplayGroupedData in order to obtain these from the Data that has been grouped.

#
First Name
Last Name
Email
Gender
Children
Active
{ Childrens = 1, Gender = F }
{ Childrens = 1, Gender = M }
{ Childrens = 3, Gender = D }
{ Childrens = 3, Gender = M }
{ Childrens = 4, Gender = M }
{ Childrens = 5, Gender = D }
{ Childrens = 5, Gender = F }
<Paragraph>
    <Button Color="Color.Primary" Clicked="@(() => dataGridRef.ExpandAllGroups())">Expand All</Button>
    <Button Color="Color.Secondary" Clicked="@(() => dataGridRef.CollapseAllGroups())">Collapse All</Button>
</Paragraph>

<Paragraph>
    <Field>
        <FieldLabel>
            <SelectList Data="@dataGridRef?.DisplayGroupedData"
                        TItem="GroupContext<Employee>" TValue="string"
                        TextField="x=> x.Key" ValueField="x=> x.Key"
            @bind-SelectedValue="selectedGroupKey"></SelectList>
        </FieldLabel>
        <FieldBody>
            <Button Color="Color.Primary" Clicked="@(() => dataGridRef.ExpandGroups(selectedGroupKey))">Expand Selected Group</Button>
            <Button Color="Color.Secondary" Clicked="@(() => dataGridRef.CollapseGroups(selectedGroupKey))">Collapse Selected Group</Button>
            <Button Color="Color.Light" Clicked="@(() => dataGridRef.ToggleGroups(selectedGroupKey))">Toggle Selected Group</Button>
        </FieldBody>
    </Field>
</Paragraph>

<DataGrid @ref="dataGridRef"
          TItem="Employee"
          Data="@employeeList"
          Responsive
          Groupable
          GroupBy="(x=> new { x.Childrens, x.Gender} )">
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn Field="@nameof(Employee.Gender)" Caption="Gender" Editable />
    <DataGridColumn Field="@nameof(Employee.Childrens)" Caption="Children" Editable />
    <DataGridColumn Field="@nameof(Employee.IsActive)" Caption="Active" Editable />
</DataGrid>

@code{
    [Inject] public EmployeeData EmployeeData { get; set; }

    private string selectedGroupKey = "{ Childrens = 1, Gender = F }";
    private DataGrid<Employee> dataGridRef;
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page