Expandable row in MudBlazor for complex objects

Question

I have an EmployeeModel which I would like to display in a MudTable. The employee has a few standard properties, such as Name, Email etc, but also a list of employment rates. For example an employee could be employed 50% from Jan-Jun 2022 and 80% from May-Aug 2023 etc.

public class EmployeeModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
    public int EmployeeId { get; set; }
    public IEnumerable<EmployeeEmploymentRateModel>? EmploymentRates { get; set; }
}

public class EmployeeEmploymentRateModel
{
    public int Id { get; set; }
    public decimal RatePercentage { get; set; }
    public string FromDateInclusive { get; set; }
    public string ToDateInclusive { get; set; }
}

What I want to achieve is to have each row of the table display the Name, Email, StartDate, EndDate and EmployeeId, and then have the row be expandable to display a new set of rows (or a new table) containing the employment rates for that employee. Currently the table looks like this Basically what I want to have happen is each row should be clickable and expand to a list of employment rates. I have tried using the grouping feature of MudBlazor, but that creates a group at the root level so that I first have to expand once to display Name, Email etc. Is there a way in MudBlazor to create a nested, expandable table for complex objects containing lists?

Answer 1

You can do it by using ChildRowContent for the table. Expand your EmployeeModel with a property like ShowDetails

public class EmployeeModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
    public int EmployeeId { get; set; }
    public bool ShowDetails {get; set;}
    public IEnumerable<EmployeeEmploymentRateModel>? EmploymentRates { get; set; }
}

Add a MudButton or MudToggleButton in the first column to toggle its state

<RowTemplate>
    <MudTd><MudButton Variant="Variant.Outlined" Size="Size.Small" OnClick="@(() => Toggle(context.Id))">@((context.ShowDetails == true)? "Hide" : "Show") Rates</MudButton></MudTd>
    <MudTd DataLabel="Name">@context.Name</MudTd>
    <MudTd DataLabel="Email">@context.Email</MudTd>
    <MudTd DataLabel="Startdate">@context.StartDate</MudTd>
</RowTemplate>

and display ChildRowContent accordingly

<ChildRowContent>
    @if (context.ShowDetails)
    {
        <MudTr>
            <td colspan="4">
                <MudCard Elevation="0">
                    <MudCardHeader>
                        <CardHeaderContent>
                            <MudText Typo="Typo.body1">Rates for <strong>@context.Name</strong></MudText>
                        </CardHeaderContent>
                    </MudCardHeader>
                    <MudCardContent Class="pa-0">
                        <MudTable Items="@context.EmploymentRates" Context="RateContext" Hover="true" Breakpoint="Breakpoint.Sm" Elevation="0">
                            <ColGroup>
                                <col />
                                <col />
                                <col style="width:200px;" />
                            </ColGroup>
                        <HeaderContent>
                            <MudTh>Rate</MudTh>
                            <MudTh>From</MudTh>
                            <MudTh>To</MudTh>
                        </HeaderContent>
                            <RowTemplate>
                                <MudTd DataLabel="Rate">@RateContext.RatePercentage</MudTd>
                                <MudTd DataLabel="From">@RateContext.FromDateInclusive</MudTd>
                                <MudTd DataLabel="To">@RateContext.ToDateInclusive</MudTd>
                            </RowTemplate>
                        </MudTable>
                    </MudCardContent>
                </MudCard>
            </td>
        </MudTr>
    }
</ChildRowContent>

there's an example in the MudBlazor documentation: table-with-related-data Or alternatively you can use Mudblazors DataGrid with expandable rows: row-detail-view