Simple
Inside the component you can use all the regular table elements such as <thead>
, <tbody>
, <tr>
, <th>
or <td>
.
ID | Name | 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> <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 | 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 |
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.
ID | Name | 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 |
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 |