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.

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="60px" />
        <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 {
    [Inject] EmployeeData EmployeeData { get; set; }

    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="60px" />
        <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 {
    [Inject] EmployeeData EmployeeData { get; set; }

    private List<Employee> inMemoryData;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 ).ToList();
        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