<MudDataGrid @ref="dataGrid" MultiSelection="true" Items="@Elements" Filterable="true"
    Hideable="true" Groupable="true" GroupExpanded="false" GroupClassFunc="GroupClassFunc">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudSpacer />
    </ToolBarContent>
    <GroupTemplate>
        <span style="font-weight:bold">
            @context.DataGrid.GroupedColumn.Title: @context.Grouping.Key Count: @context.Grouping.Count()
            @if (context.DataGrid.FilteredItems.Count() != 0)
            {
                @string.Format(" Percentage: {0:P1}", context.Grouping.Count() / ((double)context.DataGrid.FilteredItems.Count()))
            }
            </span>
    </GroupTemplate>
    <Columns>
        <PropertyColumn Property="x => x.Number" Title="Nr" Filterable="false" Groupable="false" />
        <PropertyColumn Property="x => x.Sign" />
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.Position" />
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" />
        <PropertyColumn Property="x => x.Group" Title="Category" Grouping GroupBy="@_groupBy">
<!--overrides the grid level one -->
            <GroupTemplate>
                @if (_customizeGroupTemplate)
                {
                    <span style="font-weight:bold">Group: @context.Grouping.Key <MudChip Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Small">total @context.Grouping.Count()</MudChip></span>
                }
                else
                {
                    <span style="font-weight:bold">Category: @context.Grouping.Key</span>
                }
            </GroupTemplate>
        </PropertyColumn>
    </Columns>
</MudDataGrid>