CODEWITHSUNDEEP
datagridblazorwebassemblymudblazor
Toto
Toto

Reputation: 972

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.

Upvotes: 0

Views: 1331

Answers (1)

RBee
RBee

Reputation: 4967

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

Upvotes: 1

Related Questions