MudBlazor - Blazor Component Library

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

Hide position when Breakpoint=Xs

Show Loading

@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">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Value="_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. 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 (onmouseenter event). OnRowMouseLeave is triggered when the row stops being hovered (onmouseleave 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

Hover

Dense

Striped

Bordered

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 Inline="true" Class="align-self-center">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;
    }
}

Table

API

Default Table

Click Event and display for selected Row

Hover Events

Table with pagination and filtering

Periodic Elements