Default Table
The default table displays your data in simple rows and is responsive, it breaks into mobile layout on 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.
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 |
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 |
Selected:
Sorting
To enable sorting add <MudTableSortLabel>
to the header cells and define a function that simply returns the value which should be sorted by when sorting by the specific column.
Click on a header to sort the table by that column then click to cycle through sorting directions.
Nr
Sign
Name
Position
Mass
13 | Al | Aluminium | 12 | 26.981539 |
51 | Sb | Antimony | 14 | 121.76 |
18 | Ar | Argon | 17 | 39.948 |
33 | As | Arsenic | 14 | 74.9216 |
85 | At | Astatine | 16 | 210 |
56 | Ba | Barium | 1 | 137.327 |
4 | Be | Beryllium | 1 | 9.012182 |
83 | Bi | Bismuth | 14 | 208.9804 |
107 | Bh | Bohrium | 6 | 272 |
5 | B | Boron | 12 | 10.811 |
@using MudBlazor.Docs.Data <MudTable Items="@PeriodicTable.GetElements()" Hover="true" SortLabel="Sort By"> <HeaderContent> <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Number)">Nr</MudTableSortLabel></MudTh> <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Sign)">Sign</MudTableSortLabel></MudTh> <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Element, object>(x=>x.Name)">Name</MudTableSortLabel></MudTh> <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Position)">Position</MudTableSortLabel></MudTh> <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Molar)">Mass</MudTableSortLabel></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 PageSizeOptions="new int[]{50, 100}" /> </PagerContent> </MudTable>
Multi-Selection
Setting MultiSelection="true"
will enable selection check boxes for selecting multiple lines.
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 |
Selected items:
@using MudBlazor.Docs.Data <MudTable Items="@PeriodicTable.GetElements()" MultiSelection="true" @bind-SelectedItems="selectedItems" Hover=""> <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 PageSizeOptions="new int[]{50, 100}" /> </PagerContent> </MudTable> <MudText Inline="true">Selected items: @(selectedItems==null ? "" : string.Join(", ", selectedItems.OrderBy(x=>x.Sign).Select(x=>x.Sign)))</MudText>
@code { private bool hover = true; private HashSet<Element> selectedItems = new HashSet<Element>(); }
Fixed header
Set FixedHeader="true"
to make the header sticky when scrolling the table. The table will scroll if you constrain its height using Height="400px"
for instance.
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 |
With Column Group and Text Alignment
Specifies a group of one or more columns in a table for formatting.
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 |
Inline Edit Mode
Provides input elements for Selected Row.
Nr
Sign
Name
Position
Mass
13 | Al | Aluminium | 12 | 26.981539 | |
51 | Sb | Antimony | 14 | 121.76 | |
18 | Ar | Argon | 17 | 39.948 | |
33 | As | Arsenic | 14 | 74.9216 | |
85 | At | Astatine | 16 | 210 | |
56 | Ba | Barium | 1 | 137.327 | |
4 | Be | Beryllium | 1 | 9.012182 | |
83 | Bi | Bismuth | 14 | 208.9804 | |
107 | Bh | Bohrium | 6 | 272 | |
5 | B | Boron | 12 | 10.811 |
Selected:
Server Side Filtering, Sorting and Pagination
Set ServerData
to load data from the backend that is filtered, sorted and paginated. Table will call this async function whenever the user navigates
the pager or changes sorting by clicking on the sort header icons. In this example we also show how to force the table to update when the search textfield blurs, so that the table reloads server-filtered data.
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 |