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
1Samuel[email protected]Collier91848-4714New Lura
2Irvin[email protected]Ziemann16505-8405Modestomouth
3Gerald[email protected]Pollich28612Theresashire
4Cora[email protected]Conn10437-2253North Art
5Alfonso[email protected]D'Amore87912-3933East Carolefort
6Jessie[email protected]Wilkinson34306Mayrafurt
7Gregory[email protected]Renner57895West Marcelleside
8Maryann[email protected]Hilpert38859-0368Boehmview
9Merle[email protected]Pacocha48154-3034North Erlingport
10Angelina[email protected]Ward72291-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
1Samuel[email protected]Collier91848-4714New Lura
2Irvin[email protected]Ziemann16505-8405Modestomouth
3Gerald[email protected]Pollich28612Theresashire
4Cora[email protected]Conn10437-2253North Art
5Alfonso[email protected]D'Amore87912-3933East Carolefort
6Jessie[email protected]Wilkinson34306Mayrafurt
7Gregory[email protected]Renner57895West Marcelleside
8Maryann[email protected]Hilpert38859-0368Boehmview
9Merle[email protected]Pacocha48154-3034North Erlingport
10Angelina[email protected]Ward72291-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