Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


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

Sponsor

Open Collective

MudTable<T>

API documentation.

Check out the Examples for this component.

Properties

Name Type Default Description
RowTemplate RenderFragment<T> null Defines how a table row looks like. Use MudTd to define the table cells and their content.
ChildRowContent RenderFragment<T> null Row Child content of the component.
RowEditingTemplate RenderFragment<T> null Defines how a table row looks like in edit mode (for selected row). Use MudTd to define the table cells and their content.
Items IEnumerable<T> null The data to display in the table. MudTable will render one row per item
Filter Func<T, Boolean> null A function that returns whether or not an item should be displayed in the table. You can use this to implement your own search function.
OnRowClick EventCallback<TableRowClickEventArgs<T>> Button click event.
RowClassFunc Func<T, Int32, String> null Returns the class that will get joined with RowClass. Takes the current item and row index.
RowStyleFunc Func<T, Int32, String> null Returns the style that will get joined with RowStyle. Takes the current item and row index.
SelectedItem T null Returns the item which was last clicked on in single selection mode (that is, if MultiSelection is false)
SelectedItemChanged EventCallback<T> Callback is called when a row has been clicked and returns the selected item.
SelectedItems HashSet<T> If MultiSelection is true, this returns the currently selected items. You can bind this property and the initial content of the HashSet you bind it to will cause these rows to be selected initially.
SelectedItemsChanged EventCallback<HashSet<T>> Callback is called whenever items are selected or deselected in multi selection mode.
ServerData Func<TableState, Task<TableData<T>>> null Supply an async function which (re)loads filtered, paginated and sorted data from server. Table will await this func and update based on the returned TableData. Used only with ServerData
Elevation Int32 1 The higher the number, the heavier the drop-shadow. 0 for no shadow.
Square Boolean False Set true to disable rounded corners
Outlined Boolean False If true, table will be outlined.
Bordered Boolean False If true, table's cells will have left/right borders.
Dense Boolean False Set true for rows with a narrow height
Hover Boolean False Set true to see rows hover on mouse-over.
Striped Boolean False If true, striped table rows will be used.
Breakpoint Breakpoint Breakpoint.Xs At what breakpoint the table should switch to mobile layout. Takes None, Xs, Sm, Md, Lg and Xl the default behavior is breaking on Xs.
FixedHeader Boolean False When true, the header will stay in place when the table is scrolled. Note: set Height to make the table scrollable.
Height String null Setting a height will allow to scroll the table. If not set, it will try to grow in height. You can set this to any CSS value that the attribute 'height' accepts, i.e. 500px.
SortLabel String null If table is in smalldevice mode and uses any kind of sorting the text applied here will be the sort selects label.
RowsPerPage Int32 10 If the table has more items than this number, it will break the rows into pages of said size. Note: requires a MudTablePager in PagerContent.
CurrentPage Int32 0 The page index of the currently displayed page (Zero based). Usually called by MudTablePager. Note: requires a MudTablePager in PagerContent.
MultiSelection Boolean False Set to true to enable selection of multiple rows with check boxes.
ToolBarContent RenderFragment null Optional. Add any kind of toolbar to this render fragment.
HeaderContent RenderFragment null Add MudTh cells here to define the table header. If is set, add one or more MudTHeadRow instead.
CustomHeader Boolean False Specify if the header has multiple rows. In that case, you need to provide the MudTHeadRow tags.
HeaderClass String null Add a class to the thead tag
FooterContent RenderFragment null Add MudTd cells here to define the table footer. If is set, add one or more MudTFootRow instead.
CustomFooter Boolean False Specify if the footer has multiple rows. In that case, you need to provide the MudTFootRow tags.
FooterClass String null Add a class to the tfoot tag
ColGroup RenderFragment null Specifies a group of one or more columns in a table for formatting. Ex: table colgroup col span="2" style="background-color:red" col style="background-color:yellow" colgroup header body table
PagerContent RenderFragment null Add MudTablePager here to enable breaking the rows in to multiple pages.
ReadOnly Boolean False Locks Inline Edit mode, if true.
OnCommitEditClick EventCallback<MouseEventArgs> Button click event.
CommitEditCommand ICommand null Command executed when the user clicks on the CommitEdit Button.
CommitEditCommandParameter Object null Command parameter for the CommitEdit Button. By default, will be the row level item model, if you won't set anything else.
CommitEditTooltip String null Tooltip for the CommitEdit Button.
TotalItems Int32 0 Number of items. Used only with ServerData="true"
RowClass String null CSS class for the table rows. Note, many CSS settings are overridden by MudTd though
RowStyle String null CSS styles for the table rows. Note, many CSS settings are overridden by MudTd though
Class String null User class names, separated by space
Style String null User styles, applied on top of the component's own classes and styles
Tag Object null Use Tag to attach any user data object to the component for your convenience.
UserAttributes Dictionary<String, Object> UserAttributes carries all attributes you add to the component that don't match any of its parameters. They will be splatted onto the underlying HTML tag.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙