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.
<DataGrid TItem="Employee" Data="" 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 theGroupable
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.
<DataGrid TItem="Employee" Data="" 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.
<DataGrid TItem="Employee" Data="" 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(); } }