Mudblazor
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Table

A sortable, filterable table with multiselection and pagination.

See Table API for parameter documentation.

Default Table

The default table displays your data in simple rows and is responsive, it breaks into mobile layout on 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.

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
Show code example
Copy Code
View the source on GitHub
@using MudBlazor.Docs.Data

<MudTable Items="@PeriodicTable.GetElements().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">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

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

25

50

100

1-10 of 88

Selected:

Show code example
Copy Code
View the source on GitHub
@using MudBlazor.Docs.Data

<MudTable Items="@Elements" Dense="@dense" Hover="@hover" 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.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>
<MudSwitch @bind-Checked="@hover" Color="Color.Primary">Hover</MudSwitch>
<MudSwitch @bind-Checked="@dense" Color="Color.Secondary">Dense</MudSwitch>
<MudText Inline="true">Selected: @selectedItem?.Name</MudText>
@code {
    private bool dense = false;
    private bool hover = true;
    private string searchString = "";
    private Element selectedItem = null;
    private IEnumerable<Element> Elements = null;
    private HashSet<Element> selectedItems = new HashSet<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await PeriodicTable.GetElementsAsync();
    }

    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.

Nr

Sign

Name

Position

Mass

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:

50

100

1-10 of 88

Hide code example
Copy Code
View the source on GitHub
@using MudBlazor.Docs.Data

<MudTable Items="@PeriodicTable.GetElements()" 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>

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

Rows per page:

50

100

1-10 of 88

Selected items:

Hide code example
Copy Code
View the source on GitHub
@using MudBlazor.Docs.Data

<MudTable Items="@PeriodicTable.GetElements()" 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>();
}

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

Rows per page:

50

100

1-10 of 88

Show code example
Copy Code
View the source on GitHub
@using MudBlazor.Docs.Data

<MudTable Items="@PeriodicTable.GetElements()" 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;
}

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

Rows per page:

10

25

50

100

1-10 of 88

Show code example
Copy Code
View the source on GitHub
@using MudBlazor.Docs.Data

<MudTable Items="@PeriodicTable.GetElements()">
    <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 {
}

Inline Edit Mode

Provides input elements for Selected Row.

Periodic Elements

Nr

Sign

Name

Position

Mass

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

25

50

100

1-10 of 88

Selected:

Show code example
Copy Code
View the source on GitHub
@using MudBlazor.Docs.Data
@inject ISnackbar Snackbar

<MudTable Items="@PeriodicTable.GetElements()" Dense="@dense" Hover="@hover" Filter="new Func<Element,bool>(FilterFunc)" @bind-SelectedItem="selectedItem" SortLabel="Sort By" CommitEditTooltip="Commit Edit" OnCommitEditClick="@(() => Snackbar.Add("Commit Edit Handler Invoked"))" CommitEditCommand="@samplecmd" >
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudToolBarSpacer />
        <MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.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>@context.Number</MudTd>
        <MudTd>
            <MudTextField @bind-Value="@context.Sign" />
        </MudTd>
        <MudTd>
            <MudTextField @bind-Value="@context.Name" />
        </MudTd>
        <MudTd>
            <MudTextField @bind-Value="@context.Position" />
        </MudTd>
        <MudTd>
            <MudTextField @bind-Value="@context.Molar" />
        </MudTd>
    </RowEditingTemplate>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable>
<MudSwitch @bind-Checked="@hover" Color="Color.Primary">Hover</MudSwitch>
<MudSwitch @bind-Checked="@dense" Color="Color.Secondary">Dense</MudSwitch>
<MudText Inline="true">Selected: @selectedItem?.Name</MudText>
@code {
    private bool dense = false;
    private bool hover = true;
    private string searchString = "";
    private Element selectedItem = null;
    private HashSet<Element> selectedItems = new HashSet<Element>();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        samplecmd = new Utilities.SampleCommand(SampleCommand_Executed);
    }

    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;
    }

    private Utilities.SampleCommand samplecmd;

    private void SampleCommand_Executed(object parameter)
    {
        Snackbar.Add($"Commit Edit Command Executed for parameter '{parameter.ToString()}'"); 
    }

}

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.

Periodic Elements

Nr

Sign

Name

Position

Molar mass

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

25

50

100

1-10 of 88

Show code example
Copy Code
View the source on GitHub
@using MudBlazor.Docs.Data
@using MudBlazor.Docs.Extensions; 

<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.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 PeriodicTable.GetElementsAsync();
        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();
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙