Blazorise DataGrid: Header Group

Header Group feature for Blazorise DataGrid allows you to easily group a set of defined columns by rendering a top row header which groups the columns by the defined Caption.

Examples

Header Group

You can define columns that can be grouped by assigning the HeaderGroupCaption and enabling ShowHeaderGroupCaptions on the DataGrid.

Personal InfoAddress
#
First Name
Email
Last Name
Zip
City
1SamuelSamuel.Collier62@gmail.comCollier91848-4714New Lura
2IrvinIrvin.Ziemann@gmail.comZiemann16505-8405Modestomouth
3GeraldGerald82@yahoo.comPollich28612Theresashire
4CoraCora27@yahoo.comConn10437-2253North Art
5AlfonsoAlfonso.DAmore@hotmail.comD'Amore87912-3933East Carolefort
6JessieJessie_Wilkinson@gmail.comWilkinson34306Mayrafurt
7GregoryGregory63@hotmail.comRenner57895West Marcelleside
8MaryannMaryann.Hilpert12@gmail.comHilpert38859-0368Boehmview
9MerleMerle3@gmail.comPacocha48154-3034North Erlingport
10AngelinaAngelina42@gmail.comWard72291-1146Melyssaview
1 - 10 of 25 items
25 items
<DataGrid TItem="Employee"
          Data="inMemoryData"
          ShowPager
          ShowPageSizes
          ShowHeaderGroupCaptions>
    <DataGridColumns>
        <DataGridColumn DisplayOrder=2 TItem="Employee" Field="@nameof( Employee.LastName )" HeaderGroupCaption="Personal Info" Caption="Last Name" />
        <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="Width.Px( 60 )" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" HeaderGroupCaption="Personal Info" Caption="First Name" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Zip )" HeaderGroupCaption="Address" Caption="Zip" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" HeaderGroupCaption="Address" Caption="City">
            <CaptionTemplate>
                <Icon Name="IconName.City" /> @context.Caption
            </CaptionTemplate>
        </DataGridColumn>
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" HeaderGroupCaption="Personal Info" Caption="Email" />
    </DataGridColumns>
</DataGrid>

@code {
    private readonly EmployeeData EmployeeData = new();

    private List<Employee> inMemoryData;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 ).ToList();
        await base.OnInitializedAsync();
    }
}

Header Group Template

You can define also further customize the look of each header group by defining HeaderGroupCaptionTemplate.

Personal InformationAddress
#
First Name
Email
Last Name
Zip
City
1SamuelSamuel.Collier62@gmail.comCollier91848-4714New Lura
2IrvinIrvin.Ziemann@gmail.comZiemann16505-8405Modestomouth
3GeraldGerald82@yahoo.comPollich28612Theresashire
4CoraCora27@yahoo.comConn10437-2253North Art
5AlfonsoAlfonso.DAmore@hotmail.comD'Amore87912-3933East Carolefort
6JessieJessie_Wilkinson@gmail.comWilkinson34306Mayrafurt
7GregoryGregory63@hotmail.comRenner57895West Marcelleside
8MaryannMaryann.Hilpert12@gmail.comHilpert38859-0368Boehmview
9MerleMerle3@gmail.comPacocha48154-3034North Erlingport
10AngelinaAngelina42@gmail.comWard72291-1146Melyssaview
1 - 10 of 25 items
25 items
<DataGrid TItem="Employee"
          Data="inMemoryData"
          ShowPager
          ShowPageSizes
          ShowHeaderGroupCaptions>
    <DataGridColumns>
        <DataGridColumn DisplayOrder=2 TItem="Employee" Field="@nameof( Employee.LastName )" HeaderGroupCaption="PersonalInfo" Caption="Last Name" />
        <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="Width.Px( 60 )" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" HeaderGroupCaption="PersonalInfo" Caption="First Name" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Zip )" HeaderGroupCaption="Address" Caption="Zip" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" HeaderGroupCaption="Address" Caption="City">
            <CaptionTemplate>
                <Icon Name="IconName.City" /> @context.Caption
            </CaptionTemplate>
        </DataGridColumn>
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" HeaderGroupCaption="PersonalInfo" Caption="Email" />
    </DataGridColumns>
    <HeaderGroupCaptionTemplate>
        @if ( context.HeaderGroupCaption == "PersonalInfo" )
        {
            <Strong TextColor="TextColor.Primary">Personal Information</Strong>
        }
        else if ( context.HeaderGroupCaption == "Address" )
        {
            <Strong TextColor="TextColor.Success">Address</Strong>
        }
    </HeaderGroupCaptionTemplate>
</DataGrid>

@code {
    private readonly EmployeeData EmployeeData = new();

    private List<Employee> inMemoryData;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 ).ToList();
        await base.OnInitializedAsync();
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page