Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Simple Table

See Simple Table API for parameter documentation.

Simple

Inside the component you can use all the regular table elements such as <thead>, <tbody>, <tr>, <th> or <td>.

IDNameEmailGenderIP Address
1Krishnakpartner0@usatoday.comMale28.25.250.202
2Webbwstitle1@ning.comMale237.168.134.114
3Nathanilnneal2@cyberchimps.comMale92.6.0.175
4Adaraalockwood3@patch.comFemale182.174.217.152
5Ceciliuscchaplin4@shinystat.comMale195.124.144.18
6Cicelycemerine9@soup.ioFemale138.94.191.43
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSimpleTable Style="overflow-x: auto;">
    <thead>
        <tr>
            @foreach (var h in headings)
            {
                <th>@h</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var row in rows)
        {
            <tr>
                @foreach (var x in row.Split())
                {
                    <td>@x</td>
                }
            </tr>
        }
    </tbody>
</MudSimpleTable>
@code {
    string[] headings = { "ID", "Name", "Email", "Gender", "IP Address" };
    string[] rows = {
        @"1 Krishna kpartner0@usatoday.com Male 28.25.250.202",
        @"2 Webb wstitle1@ning.com Male 237.168.134.114",
        @"3 Nathanil nneal2@cyberchimps.com Male 92.6.0.175",
        @"4 Adara alockwood3@patch.com Female 182.174.217.152",
        @"5 Cecilius cchaplin4@shinystat.com Male 195.124.144.18",
        @"6 Cicely cemerine9@soup.io Female 138.94.191.43",
    };
}

Hover & Dense

Simple Table also supports hover and dense options.

IDNameEmailGenderIP Address
1Krishnakpartner0@usatoday.comMale28.25.250.202
2Webbwstitle1@ning.comMale237.168.134.114
3Nathanilnneal2@cyberchimps.comMale92.6.0.175
4Adaraalockwood3@patch.comFemale182.174.217.152
5Ceciliuscchaplin4@shinystat.comMale195.124.144.18
6Cicelycemerine9@soup.ioFemale138.94.191.43
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSimpleTable Dense="@dense" Hover="@hover" Bordered="@bordered" Striped="@striped" Style="overflow-x: auto;">
    <thead>
        <tr>
            @foreach (var h in headings)
            {
                <th>@h</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var row in rows)
        {
            <tr>
                @foreach (var x in row.Split())
                {
                    <td>@x</td>
                }
            </tr>
        }
    </tbody>
</MudSimpleTable>
<MudToolBar>
    <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>
</MudToolBar>
@code {
    private bool dense = false;
    private bool hover = true;
    private bool striped = false;
    private bool bordered = false;

    string[] headings = { "ID", "Name", "Email", "Gender", "IP Address" };
    string[] rows = {
        @"1 Krishna kpartner0@usatoday.com Male 28.25.250.202",
        @"2 Webb wstitle1@ning.com Male 237.168.134.114",
        @"3 Nathanil nneal2@cyberchimps.com Male 92.6.0.175",
        @"4 Adara alockwood3@patch.com Female 182.174.217.152",
        @"5 Cecilius cchaplin4@shinystat.com Male 195.124.144.18",
        @"6 Cicely cemerine9@soup.io Female 138.94.191.43",
    };
}

Fixed header

Set FixedHeader="true" to make the header sticky when scrolling the table. The table will scroll if you set style to height:300px; for instance.

IDNameEmailGenderIP Address
1Krishnakpartner0@usatoday.comMale28.25.250.202
2Webbwstitle1@ning.comMale237.168.134.114
3Nathanilnneal2@cyberchimps.comMale92.6.0.175
4Adaraalockwood3@patch.comFemale182.174.217.152
5Ceciliuscchaplin4@shinystat.comMale195.124.144.18
6Cicelycemerine9@soup.ioFemale138.94.191.43
7Calebcwebber0@usatoday.comMale28.25.250.202
8Graysongcarlyle@bt.comMale173.174.94.114
9Lorilo@independentweek.comFemale134.16.20.191
10Natashankerensky@ilclan.comFemale217.217.18.15
11Andrewaredburn@shinystat.comMale20.114.244.58
12Katherineksteiner@fedsun.ioFemale122.64.153.22
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSimpleTable Hover="true" Dense="true" FixedHeader="@fixedheader" Style="@(fixedheader?"height:300px;":"")">
    <thead>
        <tr>
            @foreach (var h in headings)
            {
                <th>@h</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var row in rows)
        {
            <tr>
                @foreach (var x in row.Split())
                {
                    <td>@x</td>
                }
            </tr>
        }
    </tbody>
</MudSimpleTable>
<MudSwitch @bind-Checked="@fixedheader">Fixed Header</MudSwitch>
@code {
    bool fixedheader = true;
    string[] headings = { "ID", "Name", "Email", "Gender", "IP Address" };
    string[] rows = {
        @"1 Krishna kpartner0@usatoday.com Male 28.25.250.202",
        @"2 Webb wstitle1@ning.com Male 237.168.134.114",
        @"3 Nathanil nneal2@cyberchimps.com Male 92.6.0.175",
        @"4 Adara alockwood3@patch.com Female 182.174.217.152",
        @"5 Cecilius cchaplin4@shinystat.com Male 195.124.144.18",
        @"6 Cicely cemerine9@soup.io Female 138.94.191.43",
        @"7 Caleb cwebber0@usatoday.com Male 28.25.250.202",
        @"8 Grayson gcarlyle@bt.com Male 173.174.94.114",
        @"9 Lori lo@independentweek.com Female 134.16.20.191",
        @"10 Natasha nkerensky@ilclan.com Female 217.217.18.15",
        @"11 Andrew aredburn@shinystat.com Male 20.114.244.58",
        @"12 Katherine ksteiner@fedsun.io Female 122.64.153.22",
    };
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙