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-Value="_hidePosition" Color="Color.Primary">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Value="_loading" Color="Color.Primary">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. In addition to that the RowClass can be used to apply a general row style independent of the selection state. In this example we show a pointer curser.

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 T="Element" Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" @ref="mudTable"
          RowClass="cursor-pointer" RowClassFunc="@SelectedRowClassFunc" OnRowClick="RowClickEvent">
    <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;
        }
    }
}
Hover Events

OnRowMouseEnter is triggered when the row starts being hovered (onpointerenter event). OnRowMouseLeave is triggered when the row stops being hovered (onpointerleave event).

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

Currently hovered:

Last hovered: 

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

<MudTable T="Element" Items="@elements.Take(3)" Hover="true" OnRowMouseEnter="RowMouseEnterEvent" OnRowMouseLeave="RowMouseLeaveEvent" 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">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudText>Currently hovered: @(currentlyHoveredElement)</MudText>
<MudText>Last hovered: @(lastHoveredElement)</MudText>

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

    private string currentlyHoveredElement;
    private string lastHoveredElement;

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

    private void RowMouseEnterEvent(TableRowHoverEventArgs<Element> eventArgs)
    {
        currentlyHoveredElement = eventArgs.Item.Name;
    }

    private void RowMouseLeaveEvent(TableRowHoverEventArgs<Element> eventArgs)
    {
        currentlyHoveredElement = "";
        lastHoveredElement = eventArgs.Item.Name;
    }
}
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

Selected1: 

@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-Value="hover" Color="Color.Primary">Hover</MudSwitch>
    <MudSwitch @bind-Value="dense" Color="Color.Secondary">Dense</MudSwitch>
    <MudSwitch @bind-Value="striped" Color="Color.Tertiary">Striped</MudSwitch>
    <MudSwitch @bind-Value="bordered" Color="Color.Warning">Bordered</MudSwitch>
    <MudSpacer />
    <div style="min-width:200px;">
        <MudText Class="align-self-center d-inline">Selected1: @selectedItem1?.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 Element selectedItem1 = 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 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;
    }
}
TablePager Customization

The TablePager has many properties to customize it. The property HorizontalAlignment can be used to define the position. The properties RowsPerPageString, InfoFormat and AllItemsText can be used to customize the displayed text. The properties HideRowsPerPage, HidePageNumber and HidePagination can be used to hide the corresponding information.

See TablePager API for more informations.

RowsPerPage parameter of MudTable is independent of PageSizeOptions parameter of PagerContent. Therefore, the RowsPerPage value does not have to be one of the values ​​in the PageSizeOptions list. If the table pager is shown you should make sure the value of RowsPerPage is also available in the PageSizeOptions list, otherwise the users can not go back to this RowsPerPage value once they have chosen another one.
Specifying int.MaxValue in the PageSizeOptions will render as "All" in the Page Size dropdown. Use it when you want users to be able to show all items at once, but be careful, as this can lead to poor performance.

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">
    <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 PageSizeOptions="new int[] { 10, 25, 50, 100, int.MaxValue }"
                           RowsPerPageString="@rowsPerPageString"
                           InfoFormat="@infoFormat"
                           AllItemsText="@allItemsText"
                           HorizontalAlignment="@horizontalAlignment"
                           HideRowsPerPage="@hideRowsPerPage"
                           HidePageNumber="@hidePageNumber"
                           HidePagination="@hidePagination" />
    </PagerContent>
</MudTable>

<div class="d-flex flex-wrap mt-4">
    <MudSelect T="HorizontalAlignment" Label="HorizontalAlignment" @bind-Value="horizontalAlignment">
        <MudSelectItem Value="HorizontalAlignment.Center" />
        <MudSelectItem Value="HorizontalAlignment.Left" />
        <MudSelectItem Value="HorizontalAlignment.Right" />
        <MudSelectItem Value="HorizontalAlignment.Start" />
        <MudSelectItem Value="HorizontalAlignment.End" />
    </MudSelect>
</div>
<div class="d-flex flex-wrap mt-4">
    <MudTextField Label="RowsPerPageString" @bind-Value="rowsPerPageString" Immediate/>
     <MudTextField Class="ml-4" Label="AllItemsText" @bind-Value="allItemsText" Immediate />
     <MudTextField Class="ml-4" Label="InfoFormat" @bind-Value="infoFormat" Immediate />
</div>
<div class="d-flex flex-wrap mt-4">
     <MudSwitch @bind-Value="hideRowsPerPage" Color="Color.Tertiary">HideRowsPerPage</MudSwitch>
     <MudSwitch @bind-Value="hidePageNumber" Color="Color.Primary">HidePageNumber</MudSwitch>
     <MudSwitch @bind-Value="hidePagination" Color="Color.Secondary">HidePagination</MudSwitch>
</div>

@code {
    private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Right;
    private bool hidePageNumber;
    private bool hidePagination;
    private bool hideRowsPerPage;
    private string rowsPerPageString = "Rows per page:";
    private string infoFormat = "{first_item}-{last_item} of {all_items}";
    private string allItemsText = "All";

    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. You can also specify whether default ordering direction should be ascending or descending by specifying the <InitialDirection> parameter of <MudTableSortLabel>.
Click on a header to sort the table by that column, then click to cycle through sorting directions. By default, sorting directions are ascending, descending and unsorted; if you want to cycle through ascending and descending only, you need to specify the <AllowUnsorted> parameter of the <MudTable>. 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
@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[] { 10, 25, 50, 100 }" />
    </PagerContent>
</MudTable>

<MudSwitch @bind-Value="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");
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙