MudBlazor - Blazor Component Library

API

<MudSimpleTable>

Simple

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

ID	Name	Email	Gender	IP Address
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

<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.

ID	Name	Email	Gender	IP Address
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

<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-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>
</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",
    };
}