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

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>
    <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 Hover="true" Dense="@dense">
    <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="@dense">Dense</MudSwitch>
@code {
    bool dense=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",
    };
}

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 🗙