MudBlazor

Table

A sortable, filterable table with multiselection and pagination.

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 by 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
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
    <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>
<MudSwitch @bind-Checked="_loading">Show Loading</MudSwitch>
@code {
    private bool _hidePosition;
    private bool _loading;
    private IEnumerable<Element> Elements = new List<Element>();

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

Click Event and display for selected Row

The RowClassFunc function can be used to customize the display of the selected row. RowClickEvent is triggered each time the row is clicked.

Nr Sign Name Position Molar mass
1 H Hydrogen 0 1.00794
2 He Helium 17 4.002602
3 Li Lithium 0 6.941
Show inline-clicked event log
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<style>
    .selected {
        background-color: #1E88E5 !important;
    }

        .selected > td {
            color: white !important;
        }

            .selected > td .mud-input {
                color: white !important;
            }
</style>

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" @ref="mudTable" 
 RowClassFunc="@SelectedRowClassFunc" OnRowClick="RowClickEvent" T="Element">
    <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>
</MudTable>
<MudExpansionPanels Style="flex: 1;">
    <MudExpansionPanel Text="Show inline-clicked event log">
        @foreach (var message in clickedEvents)
        {
            <MudText>@message</MudText>
        }
        @if(clickedEvents.Count > 0) {
            <div class="d-flex">
                <MudSpacer/>
                <MudButton Class="mt-3" ButtonType="ButtonType.Button" Variant="Variant.Filled" OnClick="@(() => clickedEvents.Clear())">Clear events</MudButton>
            </div>
        }
    </MudExpansionPanel>
</MudExpansionPanels>
@code {
    private int selectedRowNumber = -1;
    private MudTable<Element> mudTable;
    private List<string> clickedEvents = new();
    private IEnumerable<Element> Elements = new List<Element>()
    {
        new Element() { Number = 1, Sign = "H", Name = "Hydrogen", Position = 0, Molar = 1.00794 },
        new Element() { Number = 2, Sign = "He", Name = "Helium", Position = 17, Molar = 4.002602 },
        new Element() { Number = 3, Sign = "Li", Name = "Lithium", Position = 0, Molar = 6.941 }
    };

    private void RowClickEvent(TableRowClickEventArgs<Element> tableRowClickEventArgs)
    {
        clickedEvents.Add("Row has been clicked");
    }

    private string SelectedRowClassFunc(Element element, int rowNumber)
    {
        if (selectedRowNumber == rowNumber)
        {
            selectedRowNumber = -1;
            clickedEvents.Add("Selected Row: None");
            return string.Empty;
        }
        else if (mudTable.SelectedItem != null && mudTable.SelectedItem.Equals(element))
        {
            selectedRowNumber = rowNumber;
            clickedEvents.Add($"Selected Row: {rowNumber}");
            return "selected";
        }
        else
        {
            return string.Empty;
        }
    }
}

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.

Periodic Elements
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
Rows per page:
10
1-10 of 88

Selected1:

Selected2:

@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>(FilterFunc1)" @bind-SelectedItem="selectedItem1">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudSpacer />
        <MudTextField @bind-Value="searchString1" 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>
    <MudSpacer />
    <div style="min-width:200px;">
        <MudText Inline="true" Class="align-self-center">Selected1: @selectedItem1?.Name</MudText>
        <MudText Inline="true" Class="align-self-center">Selected2: @selectedItem2?.Name</MudText>
    </div>
</div>
@code {
    private bool dense = false;
    private bool hover = true;
    private bool striped = false;
    private bool bordered = false;
    private string searchString1 = "";
    private string searchString2 = "";
    private Element selectedItem1 = null;
    private Element selectedItem2 = 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 FilterFunc1(Element element) => FilterFunc(element, searchString1);
    private bool FilterFunc2(Element element) => FilterFunc(element, searchString2);

    private bool FilterFunc(Element element, string searchString)
    {
        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;
    }
}

TabPager Customization

By setting HideRowsPerPage property or the HidePageNumber property or the HidePagination property to true, the corresponding information is hidden in the MudTabPager. The pager's position can be defined with the HorizontalAlignment property.

Periodic Elements
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
Rows per page:
10
Left 1-10 of 88
Rows per page:
10
Start 1-10 of 88
Rows per page:
10
Center 1-10 of 88
Rows per page:
10
Right 1-10 of 88
Rows per page:
10
End 1-10 of 88
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
    </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 InfoFormat="@($"Left {infoFormat}")" HorizontalAlignment="HorizontalAlignment.Left" HidePageNumber="@hidePageNumber" HidePagination="@hidePagination" HideRowsPerPage="@hideRowsPerPage" />
        <MudTablePager InfoFormat="@($"Start {infoFormat}")" HorizontalAlignment="HorizontalAlignment.Start" HidePageNumber="@hidePageNumber" HidePagination="@hidePagination" HideRowsPerPage="@hideRowsPerPage" />
        <MudTablePager InfoFormat="@($"Center {infoFormat}")" HorizontalAlignment="HorizontalAlignment.Center" HidePageNumber="@hidePageNumber" HidePagination="@hidePagination" HideRowsPerPage="@hideRowsPerPage" />
        <MudTablePager InfoFormat="@($"Right {infoFormat}")" HorizontalAlignment="HorizontalAlignment.Right" HidePageNumber="@hidePageNumber" HidePagination="@hidePagination" HideRowsPerPage="@hideRowsPerPage" />
        <MudTablePager InfoFormat="@($"End {infoFormat}")" HorizontalAlignment="HorizontalAlignment.End" HidePageNumber="@hidePageNumber" HidePagination="@hidePagination" HideRowsPerPage="@hideRowsPerPage" />
    </PagerContent>
</MudTable>

<div class="d-flex flex-wrap mt-4">
    <MudSwitch @bind-Checked="@hideRowsPerPage" Color="Color.Tertiary">Hide/Show Rows per Page</MudSwitch>
    <MudSwitch @bind-Checked="@hidePageNumber" Color="Color.Primary">Hide/Show Page Number</MudSwitch>
    <MudSwitch @bind-Checked="@hidePagination" Color="Color.Secondary">Hide/Show Pagination</MudSwitch>
</div>
@code {
    private bool hidePageNumber;
    private bool hidePagination;
    private bool hideRowsPerPage;
    private string infoFormat = "{first_item}-{last_item} of {all_items}";

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

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

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. Sorting can be allowed and disallowed on the column level with the property Enabled.

Name
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
Rows per page:
1-10 of 88
@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 Enabled="@enabled" 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>

<MudSwitch @bind-Checked="enabled" Color="Color.Info">Enable sorting on the Sign Column</MudSwitch>
@code {
    private bool enabled = true;
    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
Select All
Rows per page:
1-10 of 88

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>
    <FooterContent>
        <MudTd colspan="5">Select All</MudTd>
    </FooterContent>
</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");
    } 
}
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
Nr Sign Name Position Molar mass
Rows per page:
1-10 of 88
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements" FixedHeader="@fixed_header" FixedFooter="@fixed_footer" Height="@(fixed_header || fixed_footer ?"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>
    <FooterContent>
        <MudTd>Nr</MudTd>
        <MudTd>Sign</MudTd>
        <MudTd>Name</MudTd>
        <MudTd>Position</MudTd>
        <MudTd>Molar mass</MudTd>
    </FooterContent>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{50, 100}" />
    </PagerContent>
</MudTable>

<MudSwitch @bind-Checked="@fixed_header">Fixed Header</MudSwitch>
<MudSwitch @bind-Checked="@fixed_footer">Fixed Footer</MudSwitch>
@code {
    bool fixed_header = true;
    bool fixed_footer = false;

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

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

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
Rows per page:
10
1-10 of 88
@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. A click on a row makes the row editable. A Cancel button appears and can be used if CanCancelEdit="true". In this case, the RowEditPreview and RowEditCancel methods must be defined to save and retrieve the initial values of the edited item. RowEditCommit method can be used to handle the commit of the item.


Periodic Elements
Name
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
Rows per page:
10
1-10 of 88

Selected1:

Selected2:

Show inline-edit event log
@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" CanCancelEdit="@canCancelEdit" Filter="new Func<Element,bool>(FilterFunc)" @bind-SelectedItem="selectedItem1" SortLabel="Sort By" 
 CommitEditTooltip="Commit Edit" OnCommitEditClick="@(() => Snackbar.Add("Commit Edit Handler Invoked"))" RowEditPreview="BackupItem" RowEditCancel="ResetItemToOriginalValues" RowEditCommit="ItemHasBeenCommitted">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudSpacer />
        <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">
            <MudNumericField @bind-Value="@context.Position" Required Min="1" />
        </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>
<MudSwitch @bind-Checked="@canCancelEdit" Color="Color.Info">Can Cancel Edit</MudSwitch>
<MudText Inline="true">Selected1: @selectedItem1?.Name</MudText>
<MudText Inline="true">Selected2: @selectedItem2?.Name</MudText>

<MudExpansionPanels Style="flex: 1;">
    <MudExpansionPanel Text="Show inline-edit event log">
        @foreach (var message in editEvents)
        {
            <MudText>@message</MudText>
        }
        @if(editEvents.Count > 0) {
            <div class="d-flex">
                <MudSpacer/>
                <MudButton Class="mt-3" ButtonType="ButtonType.Button" Variant="Variant.Filled" OnClick="ClearEventLog">Clear event log</MudButton>
            </div>
        }
    </MudExpansionPanel>
</MudExpansionPanels>
@code {
    private List<string> editEvents = new();
    private bool dense = false;
    private bool hover = true;
    private bool ronly = false;
    private bool canCancelEdit = false;
    private string searchString = "";
    private Element selectedItem1 = null;
    private Element selectedItem2 = null;
    private Element elementBeforeEdit;
    private HashSet<Element> selectedItems1 = new HashSet<Element>();
    private HashSet<Element> selectedItems2 = new HashSet<Element>();

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

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

    private void ClearEventLog()
    {
        editEvents.Clear();
    }

    private void AddEditionEvent(string message)
    {
        editEvents.Add(message);
        StateHasChanged();
    }

    private void BackupItem(object element)
    {
        elementBeforeEdit = new()
        {            
            Sign = ((Element)element).Sign,
            Name = ((Element)element).Name,
            Molar = ((Element)element).Molar,
            Position = ((Element)element).Position
        };
        AddEditionEvent($"RowEditPreview event: made a backup of Element {((Element)element).Name}");
    }

    private void ItemHasBeenCommitted(object element)
    {
        AddEditionEvent($"RowEditCommit event: Changes to Element {((Element)element).Name} committed");
    }

    private void ResetItemToOriginalValues(object element)
    {
        ((Element)element).Sign = elementBeforeEdit.Sign;
        ((Element)element).Name = elementBeforeEdit.Name;
        ((Element)element).Molar = elementBeforeEdit.Molar;
        ((Element)element).Position = elementBeforeEdit.Position;
        AddEditionEvent($"RowEditCancel event: Editing of Element {((Element)element).Name} cancelled");
    }

    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.

Periodic Elements
Nr Sign Name Position Molar mass

No matching records found

Rows per page:
0-0 of 0
@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>
        <MudSpacer />
        <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>
    <NoRecordsContent>
        <MudText>No matching records found</MudText>
    </NoRecordsContent>
    <LoadingContent>
        <MudText>Loading...</MudText>
    </LoadingContent>
    <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");
        await Task.Delay(300);
        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();
    }
}
Periodic Elements Info
Basic Extended
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
Nr Sign Name Position Molar mass
Selected: 0
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<style type="text/css">
    .mud-table-head .header-centered th {
        text-align: center;
        font-size: 1.2em;
    }

   .mud-table-foot .bold-text .mud-table-cell {
       font-weight: 500;
   }
</style>

<MudTable Items="@Elements.Take(10)" MultiSelection="true" @bind-SelectedItems="selectedItems" Hover="true" Breakpoint="Breakpoint.Sm" Striped="true" Bordered="true"
          CustomHeader="true" CustomFooter="true" HeaderClass="table-head-bordered" FooterClass="table-foot-bordered">
    <HeaderContent>
        <MudTHeadRow IgnoreCheckbox="true" Class="header-centered">
            <MudTh colspan="6">Periodic Elements Info</MudTh>
        </MudTHeadRow>
        <MudTHeadRow Class="header-centered">
            <MudTh colspan="2">Basic</MudTh>
            <MudTh colspan="3">Extended</MudTh>
        </MudTHeadRow>
        <MudTHeadRow IsCheckable="true">
            <MudTh>Nr</MudTh> 
            <MudTh>Sign</MudTh>
            <MudTh>Name</MudTh>
            <MudTh>Position</MudTh>
            <MudTh>Molar mass</MudTh>
        </MudTHeadRow>
    </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>
    <FooterContent>
        <MudTFootRow Class="bold-text">
            <MudTd>Nr</MudTd>
            <MudTd>Sign</MudTd>
            <MudTd>Name</MudTd>
            <MudTd>Position</MudTd>
            <MudTd>Molar mass</MudTd>
        </MudTFootRow>
        <MudTFootRow IsCheckable="true">
            <MudTd colspan="5">Selected: @selectedItems.Count</MudTd>
        </MudTFootRow>
    </FooterContent>
</MudTable>
<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
@code {
    private bool _hidePosition;
    private IEnumerable<Element> Elements = new List<Element>();
    private HashSet<Element> selectedItems = new HashSet<Element>();

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

Horizontal Scrolling

If too many columns are displayed, setting HorizontalScrollbar="true" will allow the user to scroll the content horizontally.

Column1 Column2 Column3 Column4 Column5 Column6 Column7 Column8 Column9 Column10 Column11 Column12 Column13 Column14 Column15
Value_0 Value_0 Value_0 Value_0 Value_0 Value_0 Value_0 Value_0 Value_0 Value_0 Value_0 Value_0 Value_0 Value_0 Value_0
Value_1 Value_1 Value_1 Value_1 Value_1 Value_1 Value_1 Value_1 Value_1 Value_1 Value_1 Value_1 Value_1 Value_1 Value_1
Value_2 Value_2 Value_2 Value_2 Value_2 Value_2 Value_2 Value_2 Value_2 Value_2 Value_2 Value_2 Value_2 Value_2 Value_2
Value_3 Value_3 Value_3 Value_3 Value_3 Value_3 Value_3 Value_3 Value_3 Value_3 Value_3 Value_3 Value_3 Value_3 Value_3
Value_4 Value_4 Value_4 Value_4 Value_4 Value_4 Value_4 Value_4 Value_4 Value_4 Value_4 Value_4 Value_4 Value_4 Value_4
Value_5 Value_5 Value_5 Value_5 Value_5 Value_5 Value_5 Value_5 Value_5 Value_5 Value_5 Value_5 Value_5 Value_5 Value_5
Value_6 Value_6 Value_6 Value_6 Value_6 Value_6 Value_6 Value_6 Value_6 Value_6 Value_6 Value_6 Value_6 Value_6 Value_6
Value_7 Value_7 Value_7 Value_7 Value_7 Value_7 Value_7 Value_7 Value_7 Value_7 Value_7 Value_7 Value_7 Value_7 Value_7
Value_8 Value_8 Value_8 Value_8 Value_8 Value_8 Value_8 Value_8 Value_8 Value_8 Value_8 Value_8 Value_8 Value_8 Value_8
Value_9 Value_9 Value_9 Value_9 Value_9 Value_9 Value_9 Value_9 Value_9 Value_9 Value_9 Value_9 Value_9 Value_9 Value_9
Value_10 Value_10 Value_10 Value_10 Value_10 Value_10 Value_10 Value_10 Value_10 Value_10 Value_10 Value_10 Value_10 Value_10 Value_10
Value_11 Value_11 Value_11 Value_11 Value_11 Value_11 Value_11 Value_11 Value_11 Value_11 Value_11 Value_11 Value_11 Value_11 Value_11
Value_12 Value_12 Value_12 Value_12 Value_12 Value_12 Value_12 Value_12 Value_12 Value_12 Value_12 Value_12 Value_12 Value_12 Value_12
Value_13 Value_13 Value_13 Value_13 Value_13 Value_13 Value_13 Value_13 Value_13 Value_13 Value_13 Value_13 Value_13 Value_13 Value_13
Value_14 Value_14 Value_14 Value_14 Value_14 Value_14 Value_14 Value_14 Value_14 Value_14 Value_14 Value_14 Value_14 Value_14 Value_14
Value_15 Value_15 Value_15 Value_15 Value_15 Value_15 Value_15 Value_15 Value_15 Value_15 Value_15 Value_15 Value_15 Value_15 Value_15
Value_16 Value_16 Value_16 Value_16 Value_16 Value_16 Value_16 Value_16 Value_16 Value_16 Value_16 Value_16 Value_16 Value_16 Value_16
Value_17 Value_17 Value_17 Value_17 Value_17 Value_17 Value_17 Value_17 Value_17 Value_17 Value_17 Value_17 Value_17 Value_17 Value_17
Value_18 Value_18 Value_18 Value_18 Value_18 Value_18 Value_18 Value_18 Value_18 Value_18 Value_18 Value_18 Value_18 Value_18 Value_18
Value_19 Value_19 Value_19 Value_19 Value_19 Value_19 Value_19 Value_19 Value_19 Value_19 Value_19 Value_19 Value_19 Value_19 Value_19
<MudTable Items="_items" Height="350px" Breakpoint="Breakpoint.Sm" HorizontalScrollbar="true">
    <HeaderContent>
        <MudTh>Column1</MudTh>
        <MudTh>Column2</MudTh>
        <MudTh>Column3</MudTh>
        <MudTh>Column4</MudTh>
        <MudTh>Column5</MudTh>
        <MudTh>Column6</MudTh>
        <MudTh>Column7</MudTh>
        <MudTh>Column8</MudTh>
        <MudTh>Column9</MudTh>
        <MudTh>Column10</MudTh>
        <MudTh>Column11</MudTh>
        <MudTh>Column12</MudTh>
        <MudTh>Column13</MudTh>
        <MudTh>Column14</MudTh>
        <MudTh>Column15</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Column1">@context.Column1</MudTd>
        <MudTd DataLabel="Column2">@context.Column2</MudTd>
        <MudTd DataLabel="Column3">@context.Column3</MudTd>
        <MudTd DataLabel="Column4">@context.Column4</MudTd>
        <MudTd DataLabel="Column5">@context.Column5</MudTd>
        <MudTd DataLabel="Column6">@context.Column6</MudTd>
        <MudTd DataLabel="Column7">@context.Column7</MudTd>
        <MudTd DataLabel="Column8">@context.Column8</MudTd>
        <MudTd DataLabel="Column9">@context.Column9</MudTd>
        <MudTd DataLabel="Column10">@context.Column10</MudTd>
        <MudTd DataLabel="Column11">@context.Column11</MudTd>
        <MudTd DataLabel="Column12">@context.Column12</MudTd>
        <MudTd DataLabel="Column13">@context.Column13</MudTd>
        <MudTd DataLabel="Column14">@context.Column14</MudTd>
        <MudTd DataLabel="Column15">@context.Column15</MudTd>
    </RowTemplate>
</MudTable>
@code {
    public class TestItem{
        public string Column1 {get;set;}
        public string Column2 {get;set;}
        public string Column3 {get;set;}
        public string Column4 {get;set;}
        public string Column5 {get;set;}
        public string Column6 {get;set;}
        public string Column7 {get;set;}
        public string Column8 {get;set;}
        public string Column9 {get;set;}
        public string Column10 {get;set;}
        public string Column11 {get;set;}
        public string Column12 {get;set;}
        public string Column13 {get;set;}
        public string Column14 {get;set;}
        public string Column15 {get;set;}
    }
    
    
    private List<TestItem> _items;

    protected override void OnInitialized() {
        _items = new List<TestItem>();
        for (int i = 0; i < 20; i++) {
            _items.Add(new TestItem {
                Column1 = $"Value_{i}",
                Column2 = $"Value_{i}",
                Column3 = $"Value_{i}",
                Column4 = $"Value_{i}",
                Column5 = $"Value_{i}",
                Column6 = $"Value_{i}",
                Column7 = $"Value_{i}",
                Column8 = $"Value_{i}",
                Column9 = $"Value_{i}",
                Column10 = $"Value_{i}",
                Column11 = $"Value_{i}",
                Column12 = $"Value_{i}",
                Column13 = $"Value_{i}",
                Column14 = $"Value_{i}",
                Column15 = $"Value_{i}"
            });
        }
    }
}

Table Virtualization

You can virtualize the results of a table to increase rendering speed.

Column1 Column2 Column3 Column4 Column5
<MudTable Items="_items" Height="350px" Breakpoint="Breakpoint.Sm" Virtualize="true" FixedHeader="true">
    <HeaderContent>
        <MudTh>Column1</MudTh>
        <MudTh>Column2</MudTh>
        <MudTh>Column3</MudTh>
        <MudTh>Column4</MudTh>
        <MudTh>Column5</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Column1">@context.Column1</MudTd>
        <MudTd DataLabel="Column2">@context.Column2</MudTd>
        <MudTd DataLabel="Column3">@context.Column3</MudTd>
        <MudTd DataLabel="Column4">@context.Column4</MudTd>
        <MudTd DataLabel="Column5">@context.Column5</MudTd>
    </RowTemplate>
</MudTable>
@code {
    public class TestItem
    {
        public string Column1 { get; set; }
        public string Column2 { get; set; }
        public string Column3 { get; set; }
        public string Column4 { get; set; }
        public string Column5 { get; set; }
    }


    private List<TestItem> _items;

    protected override void OnInitialized()
    {
        _items = new List<TestItem>();
        for (int i = 0; i < 20000; i++)
        {
            _items.Add(new TestItem
            {
                Column1 = $"Value_{i}",
                Column2 = $"Value_{i}",
                Column3 = $"Value_{i}",
                Column4 = $"Value_{i}",
                Column5 = $"Value_{i}",
            });
        }
    }

}

Grouping (Basic)

Displays items in a grouped way, with Header and Footer by every group, allowing summaries on both.
NOTE: Grouping and Virtualization should not work together.

Nr Sign Name Position Molar mass
Group: Other
1 H Hydrogen 0 1.00794"
Total Mass: 1.00794
Group: Noble Gas (p)
2 He Helium 17 4.002602"
10 Ne Neon 17 20.1797"
18 Ar Argon 17 39.948"
36 Kr Krypton 17 83.798"
54 Xe Xenon 17 131.293"
86 Rn Radon 17 222"
118 Og Oganesson 17 294"
Total Mass: 795.221302
Group: Alkaline Earth Metal (s)
3 Li Lithium 0 6.941"
11 Na Sodium 0 22.989769"
19 K Potassium 0 39.0983"
37 Rb Rubidium 0 85.4678"
55 Cs Caesium 0 132.90546"
87 Fr Francium 0 223"
Total Mass: 510.402329
Group: Alkaline Metal (s)
4 Be Beryllium 1 9.012182"
12 Mg Magnesium 1 24.305"
20 Ca Calcium 1 40.078"
38 Sr Strontium 1 87.62"
56 Ba Barium 1 137.327"
88 Ra Radium 1 226"
Total Mass: 524.342182
Group: Metalloid Boron (p)
5 B Boron 12 10.811"
Total Mass: 10.811
Group: Nonmetal Carbon (p)
6 C Carbon 13 12.0107"
Total Mass: 12.0107
Group: Nonmetal Pnictogen (p)
7 N Nitrogen 14 14.0067"
15 P Phosphorus 14 30.973763"
Total Mass: 44.980463
Group: Nonmetal Chalcogen (p)
8 O Oxygen 15 15.9994"
16 S Sulfur 15 32.065"
34 Se Selenium 15 78.96"
Total Mass: 127.02439999999999
Group: Halogen (p)
9 F Fluorine 16 18.998404"
17 Cl Chlorine 16 35.453"
35 Br Bromine 16 79.904"
53 I Iodine 16 126.90447"
85 At Astatine 16 210"
117 Ts Tennessine 16 294"
Total Mass: 765.259874
Group: Poor Boron (p)
13 Al Aluminium 12 26.981539"
31 Ga Gallium 12 69.723"
49 In Indium 12 114.818"
81 Tl Thallium 12 204.3833"
113 Nh Nihonium 12 284"
Total Mass: 699.905839
Group: Metalloid Carbon (p)
14 Si Silicon 13 28.0855"
32 Ge Germanium 13 72.63"
Total Mass: 100.71549999999999
Group: Transition Metal (d)
21 Sc Scandium 2 44.955914"
22 Ti Titanium 3 47.867"
23 V Vanadium 4 50.9415"
24 Cr Chromium 5 51.9961"
25 Mn Manganese 6 54.938046"
26 Fe Iron 7 55.845"
27 Co Cobalt 8 58.933193"
28 Ni Nickel 9 58.6934"
29 Cu Copper 10 63.546"
30 Zn Zinc 11 65.38"
39 Y Yttrium 2 88.90585"
40 Zr Zirconium 3 91.224"
41 Nb Niobium 4 92.90638"
42 Mo Molybdenum 5 95.96"
43 Tc Technetium 6 98"
44 Ru Ruthenium 7 101.07"
45 Rh Rhodium 8 102.9055"
46 Pd Palladium 9 106.42"
47 Ag Silver 10 107.8682"
48 Cd Cadmium 11 112.411"
72 Hf Hafnium 3 178.49"
73 Ta Tantalum 4 180.94788"
74 W Tungsten 5 183.84"
75 Re Rhenium 6 186.207"
76 Os Osmium 7 190.23"
77 Ir Iridium 8 192.217"
78 Pt Platinum 9 195.084"
79 Au Gold 10 196.96657"
80 Hg Mercury 11 200.59"
104 Rf Rutherfordium 3 267"
105 Db Dubnium 4 268"
106 Sg Seaborgium 5 271"
107 Bh Bohrium 6 272"
108 Hs Hassium 7 270"
109 Mt Meitnerium 8 276"
110 Ds Darmstadtium 9 281"
111 Rg Roentgenium 10 280"
112 Cn Copernicium 11 285"
Total Mass: 5725.339533
Group: Metalloid Pnictogen (p)
33 As Arsenic 14 74.9216"
51 Sb Antimony 14 121.76"
Total Mass: 196.6816
Group: Poor Carbon (p)
50 Sn Tin 13 118.71"
82 Pb Lead 13 207.2"
114 Fl Flerovium 13 289"
Total Mass: 614.91
Group: Metalloid Chalcogen (p)
52 Te Tellurium 15 127.6"
84 Po Polonium 15 209"
Total Mass: 336.6
Group: Poor Pnictogen (p)
83 Bi Bismuth 14 208.9804"
115 Mc Moscovium 14 288"
Total Mass: 496.98040000000003
Group: Poor Chalcogen (p)
116 Lv Livermorium 15 293"
Total Mass: 293
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<style>
    .mud-table-cell-custom-group {
        font-weight: 500;
    }

    .mud-table-cell-custom-group-footer {
        padding-bottom: 50px;
        text-align: right;
    }
</style>

<MudTable Hover="true" Breakpoint="Breakpoint.Sm" Height="500px" FixedHeader="true"
          Items="@Elements"
          GroupBy="@_groupDefinition"
          GroupHeaderStyle="background-color:var(--mud-palette-background-grey)"
          GroupFooterClass="mb-4"
          Dense="_dense"
          MultiSelection="_multiSelect">
    <ColGroup>
        @if (_multiSelect)
        {
            <col style="width: 60px;" />
        }
        @if (_groupDefinition.Expandable)
        {
            <col style="width: 60px;" />
        }
        <col />
        <col />
        <col />
        <col />
        <col />
    </ColGroup>
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <GroupHeaderTemplate>
        <MudTh Class="mud-table-cell-custom-group" colspan="5">@($"{context.GroupName}: {context.Key}")</MudTh>
    </GroupHeaderTemplate>
    <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 Style="text-align: right" DataLabel="Molar mass">@context.Molar"</MudTd>
    </RowTemplate>
    <GroupFooterTemplate>
        <MudTh Class="mud-table-cell-custom-group mud-table-cell-custom-group-footer" colspan="5">Total Mass: @context.Items.Sum((e) => e.Molar)</MudTh>
    </GroupFooterTemplate>
</MudTable>

<MudSwitch @bind-Checked="_dense" Color="Color.Primary">Dense</MudSwitch>
<MudSwitch @bind-Checked="_multiSelect" Color="Color.Primary">MultiSelect</MudSwitch>
<MudSwitch @bind-Checked="_groupDefinition.Indentation" Color="Color.Primary">Indentation</MudSwitch>
<MudSwitch @bind-Checked="_groupDefinition.Expandable" Color="Color.Primary">Expandable</MudSwitch>
@code { 
    private bool _dense = false;
    private bool _multiSelect = true;

    private TableGroupDefinition<Element> _groupDefinition = new()
    {
        GroupName = "Group",
        Indentation = false,
        Expandable = false,
        Selector = (e) => e.Group
    };

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

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

Grouping (Basic) - Initially collapsed

Displays items in a grouped way, but the groups are all collapsed as default.

Nr Sign Name Position Molar mass
Group: Other
Group: Noble Gas (p)
Group: Alkaline Earth Metal (s)
Group: Alkaline Metal (s)
Group: Metalloid Boron (p)
Group: Nonmetal Carbon (p)
Group: Nonmetal Pnictogen (p)
Group: Nonmetal Chalcogen (p)
Group: Halogen (p)
Group: Poor Boron (p)
Group: Metalloid Carbon (p)
Group: Transition Metal (d)
Group: Metalloid Pnictogen (p)
Group: Poor Carbon (p)
Group: Metalloid Chalcogen (p)
Group: Poor Pnictogen (p)
Group: Poor Chalcogen (p)
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<style>
    .mud-table-cell-custom-group {
        font-weight: 500;
    }

    .mud-table-cell-custom-group-footer {
        padding-bottom: 50px;
        text-align: right;
    }
</style>

<MudTable Hover="true" Breakpoint="Breakpoint.Sm" Height="500px" FixedHeader="true"
          Items="@Elements"
          GroupBy="@_groupDefinition"
          GroupHeaderStyle="background-color:var(--mud-palette-background-grey)"
          GroupFooterClass="mb-4"
          Dense="true">
    <ColGroup>
        <col style="width: 60px;" />
        <col />
        <col />
        <col />
        <col />
        <col />
    </ColGroup>
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <GroupHeaderTemplate>
        <MudTh Class="mud-table-cell-custom-group" colspan="5">@($"{context.GroupName}: {context.Key}")</MudTh>
    </GroupHeaderTemplate>
    <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 Style="text-align: right" DataLabel="Molar mass">@context.Molar"</MudTd>
    </RowTemplate>
    <GroupFooterTemplate>
        <MudTh Class="mud-table-cell-custom-group mud-table-cell-custom-group-footer" colspan="5">Total Mass: @context.Items.Sum((e) => e.Molar)</MudTh>
    </GroupFooterTemplate>
</MudTable>
@code { 
    private TableGroupDefinition<Element> _groupDefinition = new()
    {
        GroupName = "Group",
        Indentation = false,
        Expandable = true,
        IsInitiallyExpanded = false,
        Selector = (e) => e.Group
    };

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

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

Grouping (Multi Levels)

Displays items recursively grouped.

Nr Sign Name Group Position Molar mass
Group: Other
Position: 0
1 H Hydrogen Other 0 1.00794
Total Mass: 1.00794
Total Mass: 1.00794
Group: Noble Gas (p)
Position: 17
2 He Helium Noble Gas (p) 17 4.002602
10 Ne Neon Noble Gas (p) 17 20.1797
18 Ar Argon Noble Gas (p) 17 39.948
36 Kr Krypton Noble Gas (p) 17 83.798
54 Xe Xenon Noble Gas (p) 17 131.293
86 Rn Radon Noble Gas (p) 17 222
118 Og Oganesson Noble Gas (p) 17 294
Total Mass: 795.221302
Total Mass: 795.221302
Group: Alkaline Earth Metal (s)
Position: 0
3 Li Lithium Alkaline Earth Metal (s) 0 6.941
11 Na Sodium Alkaline Earth Metal (s) 0 22.989769
19 K Potassium Alkaline Earth Metal (s) 0 39.0983
37 Rb Rubidium Alkaline Earth Metal (s) 0 85.4678
55 Cs Caesium Alkaline Earth Metal (s) 0 132.90546
87 Fr Francium Alkaline Earth Metal (s) 0 223
Total Mass: 510.402329
Total Mass: 510.402329
Group: Alkaline Metal (s)
Position: 1
4 Be Beryllium Alkaline Metal (s) 1 9.012182
12 Mg Magnesium Alkaline Metal (s) 1 24.305
20 Ca Calcium Alkaline Metal (s) 1 40.078
38 Sr Strontium Alkaline Metal (s) 1 87.62
56 Ba Barium Alkaline Metal (s) 1 137.327
88 Ra Radium Alkaline Metal (s) 1 226
Total Mass: 524.342182
Total Mass: 524.342182
Group: Metalloid Boron (p)
Position: 12
5 B Boron Metalloid Boron (p) 12 10.811
Total Mass: 10.811
Total Mass: 10.811
Group: Nonmetal Carbon (p)
Position: 13
6 C Carbon Nonmetal Carbon (p) 13 12.0107
Total Mass: 12.0107
Total Mass: 12.0107
Group: Nonmetal Pnictogen (p)
Position: 14
7 N Nitrogen Nonmetal Pnictogen (p) 14 14.0067
15 P Phosphorus Nonmetal Pnictogen (p) 14 30.973763
Total Mass: 44.980463
Total Mass: 44.980463
Group: Nonmetal Chalcogen (p)
Position: 15
8 O Oxygen Nonmetal Chalcogen (p) 15 15.9994
16 S Sulfur Nonmetal Chalcogen (p) 15 32.065
34 Se Selenium Nonmetal Chalcogen (p) 15 78.96
Total Mass: 127.02439999999999
Total Mass: 127.02439999999999
Group: Halogen (p)
Position: 16
9 F Fluorine Halogen (p) 16 18.998404
17 Cl Chlorine Halogen (p) 16 35.453
35 Br Bromine Halogen (p) 16 79.904
53 I Iodine Halogen (p) 16 126.90447
85 At Astatine Halogen (p) 16 210
117 Ts Tennessine Halogen (p) 16 294
Total Mass: 765.259874
Total Mass: 765.259874
Group: Poor Boron (p)
Position: 12
13 Al Aluminium Poor Boron (p) 12 26.981539
31 Ga Gallium Poor Boron (p) 12 69.723
49 In Indium Poor Boron (p) 12 114.818
81 Tl Thallium Poor Boron (p) 12 204.3833
113 Nh Nihonium Poor Boron (p) 12 284
Total Mass: 699.905839
Total Mass: 699.905839
Group: Metalloid Carbon (p)
Position: 13
14 Si Silicon Metalloid Carbon (p) 13 28.0855
32 Ge Germanium Metalloid Carbon (p) 13 72.63
Total Mass: 100.71549999999999
Total Mass: 100.71549999999999
Group: Transition Metal (d)
Position: 2
21 Sc Scandium Transition Metal (d) 2 44.955914
39 Y Yttrium Transition Metal (d) 2 88.90585
Total Mass: 133.861764
Position: 3
22 Ti Titanium Transition Metal (d) 3 47.867
40 Zr Zirconium Transition Metal (d) 3 91.224
72 Hf Hafnium Transition Metal (d) 3 178.49
104 Rf Rutherfordium Transition Metal (d) 3 267
Total Mass: 584.581
Position: 4
23 V Vanadium Transition Metal (d) 4 50.9415
41 Nb Niobium Transition Metal (d) 4 92.90638
73 Ta Tantalum Transition Metal (d) 4 180.94788
105 Db Dubnium Transition Metal (d) 4 268
Total Mass: 592.79576
Position: 5
24 Cr Chromium Transition Metal (d) 5 51.9961
42 Mo Molybdenum Transition Metal (d) 5 95.96
74 W Tungsten Transition Metal (d) 5 183.84
106 Sg Seaborgium Transition Metal (d) 5 271
Total Mass: 602.7961
Position: 6
25 Mn Manganese Transition Metal (d) 6 54.938046
43 Tc Technetium Transition Metal (d) 6 98
75 Re Rhenium Transition Metal (d) 6 186.207
107 Bh Bohrium Transition Metal (d) 6 272
Total Mass: 611.145046
Position: 7
26 Fe Iron Transition Metal (d) 7 55.845
44 Ru Ruthenium Transition Metal (d) 7 101.07
76 Os Osmium Transition Metal (d) 7 190.23
108 Hs Hassium Transition Metal (d) 7 270
Total Mass: 617.145
Position: 8
27 Co Cobalt Transition Metal (d) 8 58.933193
45 Rh Rhodium Transition Metal (d) 8 102.9055
77 Ir Iridium Transition Metal (d) 8 192.217
109 Mt Meitnerium Transition Metal (d) 8 276
Total Mass: 630.055693
Position: 9
28 Ni Nickel Transition Metal (d) 9 58.6934
46 Pd Palladium Transition Metal (d) 9 106.42
78 Pt Platinum Transition Metal (d) 9 195.084
110 Ds Darmstadtium Transition Metal (d) 9 281
Total Mass: 641.1974
Position: 10
29 Cu Copper Transition Metal (d) 10 63.546
47 Ag Silver Transition Metal (d) 10 107.8682
79 Au Gold Transition Metal (d) 10 196.96657
111 Rg Roentgenium Transition Metal (d) 10 280
Total Mass: 648.38077
Position: 11
30 Zn Zinc Transition Metal (d) 11 65.38
48 Cd Cadmium Transition Metal (d) 11 112.411
80 Hg Mercury Transition Metal (d) 11 200.59
112 Cn Copernicium Transition Metal (d) 11 285
Total Mass: 663.381
Total Mass: 5725.339533
Group: Metalloid Pnictogen (p)
Position: 14
33 As Arsenic Metalloid Pnictogen (p) 14 74.9216
51 Sb Antimony Metalloid Pnictogen (p) 14 121.76
Total Mass: 196.6816
Total Mass: 196.6816
Group: Poor Carbon (p)
Position: 13
50 Sn Tin Poor Carbon (p) 13 118.71
82 Pb Lead Poor Carbon (p) 13 207.2
114 Fl Flerovium Poor Carbon (p) 13 289
Total Mass: 614.91
Total Mass: 614.91
Group: Metalloid Chalcogen (p)
Position: 15
52 Te Tellurium Metalloid Chalcogen (p) 15 127.6
84 Po Polonium Metalloid Chalcogen (p) 15 209
Total Mass: 336.6
Total Mass: 336.6
Group: Poor Pnictogen (p)
Position: 14
83 Bi Bismuth Poor Pnictogen (p) 14 208.9804
115 Mc Moscovium Poor Pnictogen (p) 14 288
Total Mass: 496.98040000000003
Total Mass: 496.98040000000003
Group: Poor Chalcogen (p)
Position: 15
116 Lv Livermorium Poor Chalcogen (p) 15 293
Total Mass: 293
Total Mass: 293
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<style>
    .mud-table-cell-custom-group {
        font-weight: 500;
    }

    .mud-table-cell-custom-group-footer {
        padding-bottom: 50px;
        text-align: right;
    }
</style>

<MudTable Hover="true" Breakpoint="Breakpoint.Sm" Height="500px" FixedHeader="true"
          Items="@Elements"
          GroupBy="@_groupDefinition"
          GroupHeaderStyle="background-color:var(--mud-palette-background-grey)"
          GroupFooterClass="mb-4"
          Dense="_dense"
          MultiSelection="_multiSelect">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Group</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <GroupHeaderTemplate>
        <MudTh Class="mud-table-cell-custom-group" colspan="6">@($"{context.GroupName}: {context.Key}")</MudTh>
    </GroupHeaderTemplate>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Group">@context.Group</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd Style="text-align:right" DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <GroupFooterTemplate>
        <MudTh Class="mud-table-cell-custom-group mud-table-cell-custom-group-footer" colspan="6">Total Mass: @context.Items.Sum((e) => e.Molar)</MudTh>
    </GroupFooterTemplate>
</MudTable>
<MudSwitch @bind-Checked="_dense" Color="Color.Primary">Dense</MudSwitch>
<MudSwitch @bind-Checked="_multiSelect" Color="Color.Primary">MultiSelect</MudSwitch>
<MudSwitch @bind-Checked="_groupDefinition.Indentation" Color="Color.Primary">Indentation</MudSwitch>
<MudSwitch @bind-Checked="_groupDefinition.Expandable" Color="Color.Primary">Expandable (Root Level)</MudSwitch>
<MudSwitch @bind-Checked="_groupDefinition.InnerGroup.Expandable" Color="Color.Primary">Expandable (Second Level)</MudSwitch>
@code {
    private bool _dense = false;
    private bool _multiSelect = true;

    private TableGroupDefinition<Element> _groupDefinition = new TableGroupDefinition<Element>()
    {
        GroupName = "Group",
        Indentation = false,
        Expandable = false,
        Selector = (e) => e.Group,
        InnerGroup = new TableGroupDefinition<Element>()
        {
            GroupName = "Position",
            Expandable = false,
            Selector = (e) => e.Position
        }

    };


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

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

}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙