Table - MudBlazor

Default Table

The default table displays your data in simple rows and is responsive, it breaks into mobile layout on Breakpoint.Xs unless changed.
Add the DataLabel property to your MudTd cells to properly display the column label when the table has changed to mobile layout.
The table can be prevented from breaking into mobile layout my setting the Breakpoint to Breakpoint.None.

Nr	Sign	Name	Position	Molar mass
1	H	Hydrogen	0	1.00794
2	He	Helium	17	4.002602
3	Li	Lithium	0	6.941
4	Be	Beryllium	1	9.012182

Hide position when Breakpoint=Xs

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>

@code {
    private bool _hidePosition;
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }
}

Table with pagination and filtering

The <MudTable> component supports pagination, sorting and filtering of rows as well as single and multiple row selection. To tell the table how to render your data, define a <RowTemplate> containing a <MudTableCell> or a <td> for every column.

Note: you can not fill this table in a conventional way, i.e. by defining multiple <tr> tags. See SimpleTable if you want that. Instead, you pass the collection of items to be displayed to the table's Items parameter.

Nr	Sign	Name	Position	Molar mass
1	H	Hydrogen	0	1.00794
2	He	Helium	17	4.002602
3	Li	Lithium	0	6.941
4	Be	Beryllium	1	9.012182
5	B	Boron	12	10.811
6	C	Carbon	13	12.0107
7	N	Nitrogen	14	14.0067
8	O	Oxygen	15	15.9994
9	F	Fluorine	16	18.998404
10	Ne	Neon	17	20.1797

Hover

Dense

Striped

Bordered

Selected:

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements" Dense="@dense" Hover="@hover" Bordered="@bordered" Striped="@striped" Filter="new Func<Element,bool>(FilterFunc)" @bind-SelectedItem="selectedItem">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudToolBarSpacer />
        <MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable>
<div class="d-flex flex-wrap mt-4">
    <MudSwitch @bind-Checked="@hover" Color="Color.Primary">Hover</MudSwitch>
    <MudSwitch @bind-Checked="@dense" Color="Color.Secondary">Dense</MudSwitch>
    <MudSwitch @bind-Checked="@striped" Color="Color.Tertiary">Striped</MudSwitch>
    <MudSwitch @bind-Checked="@bordered" Color="Color.Warning">Bordered</MudSwitch>
    <MudToolBarSpacer />
    <MudText Inline="true" Class="align-self-center" Style="min-width:200px;">Selected: @selectedItem?.Name</MudText>
</div>

@code {
    private bool dense = false;
    private bool hover = true;
    private bool striped = false;
    private bool bordered = false;
    private string searchString = "";
    private Element selectedItem = null;
    private HashSet<Element> selectedItems = new HashSet<Element>();

    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

    private bool FilterFunc(Element element)
    {
        if (string.IsNullOrWhiteSpace(searchString))
            return true;
        if (element.Sign.Contains(searchString, StringComparison.OrdinalIgnoreCase))
            return true;
        if (element.Name.Contains(searchString, StringComparison.OrdinalIgnoreCase))
            return true;
        if ($"{element.Number} {element.Position} {element.Molar}".Contains(searchString))
            return true;
        return false;
    }
}

Sorting

To enable sorting add <MudTableSortLabel> to the header cells and define a function that simply returns the value which should be sorted by when sorting by the specific column. Click on a header to sort the table by that column then click to cycle through sorting directions.

Sort By

Nr	Sign	Name	Position	Mass
13	Al	Aluminium	12	26.981539
51	Sb	Antimony	14	121.76
18	Ar	Argon	17	39.948
33	As	Arsenic	14	74.9216
85	At	Astatine	16	210
56	Ba	Barium	1	137.327
4	Be	Beryllium	1	9.012182
83	Bi	Bismuth	14	208.9804
107	Bh	Bohrium	6	272
5	B	Boron	12	10.811

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements" Hover="true" SortLabel="Sort By">
    <HeaderContent>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Number)">Nr</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Sign)">Sign</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Element, object>(x=>x.Name)">Name</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Position)">Position</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Molar)">Mass</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{50, 100}" />
    </PagerContent>
</MudTable>

@code {
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    } 
}

Multi-Selection

Setting MultiSelection="true" will enable selection check boxes for selecting multiple lines.

Nr	Sign	Name	Position	Molar mass
1	H	Hydrogen	0	1.00794
2	He	Helium	17	4.002602
3	Li	Lithium	0	6.941
4	Be	Beryllium	1	9.012182
5	B	Boron	12	10.811
6	C	Carbon	13	12.0107
7	N	Nitrogen	14	14.0067
8	O	Oxygen	15	15.9994
9	F	Fluorine	16	18.998404
10	Ne	Neon	17	20.1797

Selected items:

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements" MultiSelection="true" @bind-SelectedItems="selectedItems" Hover="@hover">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{50, 100}" />
    </PagerContent>
</MudTable>
<MudText Inline="true">Selected items: @(selectedItems==null ? "" : string.Join(", ", selectedItems.OrderBy(x=>x.Sign).Select(x=>x.Sign)))</MudText>

@code {
    private bool hover = true;
    private HashSet<Element> selectedItems = new HashSet<Element>();

    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    } 
}

Fixed header

Set FixedHeader="true" to make the header sticky when scrolling the table. The table will scroll if you constrain its height using Height="400px" for instance.

Nr	Sign	Name	Position	Molar mass
1	H	Hydrogen	0	1.00794
2	He	Helium	17	4.002602
3	Li	Lithium	0	6.941
4	Be	Beryllium	1	9.012182
5	B	Boron	12	10.811
6	C	Carbon	13	12.0107
7	N	Nitrogen	14	14.0067
8	O	Oxygen	15	15.9994
9	F	Fluorine	16	18.998404
10	Ne	Neon	17	20.1797

Fixed Header

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements" FixedHeader="@fixed_header" Height="@(fixed_header?"400px":"")">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{50, 100}" />
    </PagerContent>
</MudTable>
<MudSwitch @bind-Checked="@fixed_header">Fixed Header</MudSwitch>

@code {
    bool fixed_header = true;

    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    } 
}

With Column Group and Text Alignment

Specifies a group of one or more columns in a table for formatting.

Nr	Sign	Name	Position	Molar mass
1	H	Hydrogen	0	1.00794
2	He	Helium	17	4.002602
3	Li	Lithium	0	6.941
4	Be	Beryllium	1	9.012182
5	B	Boron	12	10.811
6	C	Carbon	13	12.0107
7	N	Nitrogen	14	14.0067
8	O	Oxygen	15	15.9994
9	F	Fluorine	16	18.998404
10	Ne	Neon	17	20.1797

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements">
    <ColGroup>
        <col style="width: 60px;" />
        <col />
        <col style="width: 60%;" />
        <col style="width: 60px;" />
        <col />
    </ColGroup>
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh Style="text-align:center">Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass" Style="text-align:right">@context.Molar</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable>

@code {
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    } 
}

Inline Edit Mode

Provides input elements for Selected Row.

Sort By

Nr	Sign	Name	Position	Mass
13	Al	Aluminium	12	26.981539
51	Sb	Antimony	14	121.76
18	Ar	Argon	17	39.948
33	As	Arsenic	14	74.9216
85	At	Astatine	16	210
56	Ba	Barium	1	137.327
4	Be	Beryllium	1	9.012182
83	Bi	Bismuth	14	208.9804
107	Bh	Bohrium	6	272
5	B	Boron	12	10.811

Hover

Dense

Read Only

Selected:

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient
@inject ISnackbar Snackbar

<MudTable Items="@Elements" Dense="@dense" Hover="@hover" ReadOnly="@ronly" Filter="new Func<Element,bool>(FilterFunc)" @bind-SelectedItem="selectedItem" SortLabel="Sort By" CommitEditTooltip="Commit Edit" OnCommitEditClick="@(() => Snackbar.Add("Commit Edit Handler Invoked"))">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudToolBarSpacer />
        <MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <ColGroup>
        <col style="width:50px;" />
        <col style="width:80px;" />
        <col style="width:50%;" />
        <col />
        <col />
        <col style="width:50px;" />
    </ColGroup>
    <HeaderContent>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Number)">Nr</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Sign)">Sign</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Element, object>(x=>x.Name)">Name</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Position)">Position</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Molar)">Mass</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <RowEditingTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">
            <MudTextField @bind-Value="@context.Sign" Required />
        </MudTd>
        <MudTd DataLabel="Name">
            <MudTextField @bind-Value="@context.Name" Required />
        </MudTd>
        <MudTd DataLabel="Position">
            <MudTextField @bind-Value="@context.Position" Required />
        </MudTd>
        <MudTd DataLabel="Molar mass">
            <MudTextField @bind-Value="@context.Molar" Required />
        </MudTd>
    </RowEditingTemplate>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable>
<MudSwitch @bind-Checked="@hover" Color="Color.Primary">Hover</MudSwitch>
<MudSwitch @bind-Checked="@dense" Color="Color.Secondary">Dense</MudSwitch>
<MudSwitch @bind-Checked="@ronly" Color="Color.Tertiary">Read Only</MudSwitch>
<MudText Inline="true">Selected: @selectedItem?.Name</MudText>

@code {
    private bool dense = false;
    private bool hover = true;
    private bool ronly = false;
    private string searchString = "";
    private Element selectedItem = null;
    private HashSet<Element> selectedItems = new HashSet<Element>();

    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    } 

    private bool FilterFunc(Element element)
    {
        if (string.IsNullOrWhiteSpace(searchString))
            return true;
        if (element.Sign.Contains(searchString, StringComparison.OrdinalIgnoreCase))
            return true;
        if (element.Name.Contains(searchString, StringComparison.OrdinalIgnoreCase))
            return true;
        if ($"{element.Number} {element.Position} {element.Molar}".Contains(searchString))
            return true;
        return false;
    }
}

Server Side Filtering, Sorting and Pagination

Set ServerData to load data from the backend that is filtered, sorted and paginated. Table will call this async function whenever the user navigates the pager or changes sorting by clicking on the sort header icons. In this example we also show how to force the table to update when the search textfield blurs, so that the table reloads server-filtered data.

Note: with a ServerData func you don't need Items and Filter.

Nr	Sign	Name	Position	Molar mass

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable ServerData="@(new Func<TableState, Task<TableData<Element>>>(ServerReload))"  
                        Dense="true" Hover="true" @ref="table">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudToolBarSpacer />
        <MudTextField T="string" ValueChanged="@(s=>OnSearch(s))" Placeholder="Search" Adornment="Adornment.Start" 
                        AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <HeaderContent>
        <MudTh><MudTableSortLabel SortLabel="nr_field" T="Element">Nr</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="sign_field" T="Element">Sign</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="name_field" T="Element">Name</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="position_field" T="Element">Position</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="mass_field" T="Element">Molar mass</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable>

@code {
    private IEnumerable<Element> pagedData;
    private MudTable<Element> table;

    private int totalItems;
    private string searchString = null;

    /// <summary>
    /// Here we simulate getting the paged, filtered and ordered data from the server
    /// </summary>
    private async Task<TableData<Element>> ServerReload(TableState state)
    {
        IEnumerable<Element> data = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
        data = data.Where(element =>
        {
            if (string.IsNullOrWhiteSpace(searchString))
                return true;
            if (element.Sign.Contains(searchString, StringComparison.OrdinalIgnoreCase))
                return true;
            if (element.Name.Contains(searchString, StringComparison.OrdinalIgnoreCase))
                return true;
            if ($"{element.Number} {element.Position} {element.Molar}".Contains(searchString))
                return true;
            return false;
        }).ToArray();
        totalItems = data.Count();
        switch (state.SortLabel)
        {
            case "nr_field":
                data = data.OrderByDirection(state.SortDirection, o => o.Number);
                break;
            case "sign_field":
                data = data.OrderByDirection(state.SortDirection, o => o.Sign);
                break;
            case "name_field":
                data = data.OrderByDirection(state.SortDirection, o => o.Name);
                break;
            case "position_field":
                data = data.OrderByDirection(state.SortDirection, o => o.Position);
                break;
            case "mass_field":
                data = data.OrderByDirection(state.SortDirection, o => o.Molar);
                break;
        }

        pagedData = data.Skip(state.Page * state.PageSize).Take(state.PageSize).ToArray();
        return new TableData<Element>() {TotalItems = totalItems, Items = pagedData};
    }

    private void OnSearch(string text)
    {
        searchString = text;
        table.ReloadServerData();
    }
}

Table With related data

Making use of the <ChildRowContent> allows more control over the layout for scenarios such as showing the related address data for each person below.

Nr

Name

Age

1

Harry Potter

11

2

Ash Ketchum

18

3

Frodo Baggins

24

Address Details for Frodo Baggins

Address Line 1	Address Line 2	Postal Code
123 Shire Lane	Bag End	223
456 Shire Street	Bag End	445
789 Shire Avenue	Bag End	667

<MudTable Items="@People" Hover="true" Breakpoint="Breakpoint.Sm">
    <ColGroup>
        <col style="width:300px;" />
        <col style="width:100px;" />
        <col />
        <col style="width:100px;" />
    </ColGroup>
    <HeaderContent>
        <MudTh></MudTh>
        <MudTh>Nr</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Age</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd><MudButton Variant="Variant.Outlined" Size="Size.Small" OnClick="@(() => ShowBtnPress(context.Number))">@((context.ShowDetails == true)? "Hide" : "Show") Address Details</MudButton></MudTd>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Age">@context.Age</MudTd>
    </RowTemplate>
    <ChildRowContent>
        @if (context.ShowDetails)
        {
<MudTr>
    <td colspan="4">
        <MudCard Elevation="0">
            <MudCardHeader>
                <CardHeaderContent>
                    <MudText Typo="Typo.body1">Address Details for <strong>@context.Name</strong></MudText>
                </CardHeaderContent>
            </MudCardHeader>
            <MudCardContent Class="pa-0">
                <MudTable Items="@context.Addresses" Context="AddressContext" Hover="true" Breakpoint="Breakpoint.Sm" Elevation="0">
                    <ColGroup>
                        <col />
                        <col />
                        <col style="width:200px;"/>
                    </ColGroup>
                    <HeaderContent>
                        <MudTh>Address Line 1</MudTh>
                        <MudTh>Address Line 2</MudTh>
                        <MudTh>Postal Code</MudTh>
                    </HeaderContent>
                    <RowTemplate>
                        <MudTd DataLabel="Address Line 1">@AddressContext.Address_Line_1</MudTd>
                        <MudTd DataLabel="Address Line 2">@AddressContext.Address_Line_2</MudTd>
                        <MudTd DataLabel="Postal Code">@AddressContext.Postal_Code</MudTd>
                    </RowTemplate>
                </MudTable>
            </MudCardContent>
        </MudCard>
    </td>
</MudTr>}
    </ChildRowContent>
</MudTable>

@code
{
    protected override void OnInitialized()
    {
        FillPeople();
    }

    public class Address
    {
        public string Address_Line_1 { get; set; }
        public string Address_Line_2 { get; set; }
        public int Postal_Code { get; set; }
    }
    public class Person
    {
        public bool ShowDetails { get; set; }
        public int Number { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public IList<Address> Addresses { get; set; }
    }
    private void FillPeople()
    {
        IList<Person> people = new List<Person>();
        IList<Address> addresses = new List<Address>();
        addresses.Add(new Address { Address_Line_1 = "4 Privet Drive", Address_Line_2 = "Little Whinging", Postal_Code = 111 });
        addresses.Add(new Address { Address_Line_1 = "12 Grimmauld Place", Address_Line_2 = "The Burrow", Postal_Code = 333 });
        people.Add(new Person
        {
            ShowDetails = false,
            Number = 1,
            Name = "Harry Potter",
            Age = 11,
            Addresses = addresses
        });

        addresses = new List<Address>();
        addresses.Add(new Address { Address_Line_1 = "123 Pikachu Lane", Address_Line_2 = "Pallet Town", Postal_Code = 777 });
        addresses.Add(new Address { Address_Line_1 = "456 Mew Street", Address_Line_2 = "Pallet Town", Postal_Code = 999 });
        people.Add(new Person
        {
            ShowDetails = false,
            Number = 2,
            Name = "Ash Ketchum",
            Age = 18,
            Addresses = addresses
        });
        People = people;

        addresses = new List<Address>();
        addresses.Add(new Address { Address_Line_1 = "123 Shire Lane", Address_Line_2 = "Bag End", Postal_Code = 223 });
        addresses.Add(new Address { Address_Line_1 = "456 Shire Street", Address_Line_2 = "Bag End", Postal_Code = 445 });
        addresses.Add(new Address { Address_Line_1 = "789 Shire Avenue", Address_Line_2 = "Bag End", Postal_Code = 667 });
        people.Add(new Person
        {
            ShowDetails = true,
            Number = 3,
            Name = "Frodo Baggins",
            Age = 24,
            Addresses = addresses
        });
        People = people;
    }
    private static IEnumerable<Person> People { get; set; }

    private void ShowBtnPress(int nr)
    {
        Person tmpPerson = People.First(f => f.Number == nr);
        tmpPerson.ShowDetails = !tmpPerson.ShowDetails;
    }
}