Search code examples
datagridblazorwebassemblymudblazor

Is it possible to add a footer to a Mud Blazor DataGridComponent?


I am new to Mud Blazor, and use a DataGrid component to manage a database's content. I have a simple Add button which allows adding new entry to the datagrid. I have been browsing the specs and Google and have not found a way to add my button as a footer of the Data Grid, similarly to the provided screenshot:

enter image description here

I am not sure if it is possible out of the box with DataGrid maybe it should be (easily) achieved by grouping the data grid with a centered button and possibly some horizontal lines to make it look like it's part of the grid ? Thanks a lot for your help.


Solution

  • There doesn't seem to be a FooterTemplate for the entire MudDataGrid.

    However seems you can use the <PagerContent> RenderFragment to add footer elements to the MudDataGrid.

    Another thing to note there is a <FooterTemplate> for each <PropertyColumn>, this will be tied to the column though.

    <MudDataGrid Items="@_items" Groupable="true" Filterable="true" FixedFooter="true" Height="300px">
        <Columns>
            <PropertyColumn Property="x => x.Name">
                <FooterTemplate>
                    @{ int index = 1, count = @context.Items.Count(); }
                    People: 
                    @foreach (var person in @context.Items)
                    {
                        <MudAvatar Color="@((Color)index)" Variant="Variant.Outlined" Size="Size.Small" Class="mr-1">@person.Name.First()</MudAvatar>@person.Name.Substring(1)
                        if (index < count)
                        {
                            @(", ")
                        }
                        index++;
                    }
                </FooterTemplate>
            </PropertyColumn>
        <!-- Other property columns -->
            <PropertyColumn Property="x => x.IsManager" Title="Manager" />
        </Columns>
        <PagerContent>
            <MudText Typo="Typo.h3">Footer</MudText>
            <MudButton Vaiant="Variant.Filled" Color="Color.Primary">Footer button</MudButton>
        </PagerContent>
    </MudDataGrid>
    

    MudBlazor Snippet

    enter image description here