MudBlazor - Blazor Component Library

Pages

Data Grid

Properties

Misc
Name	Type	Default	Description
`ApplyDropClassesOnDragStarted`	bool	False	When false the drop classes are only applied when dragging a column over another column When true the drop classes are applied to all column headers and does not require dragging a column over another column.
`Bordered`	bool	False	If true, table's cells will have left/right borders.
`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.
`CanCancelEdit`	bool	True	Define if Cancel button is present or not for inline editing.
`ChildRowContent`	RenderFragment<CellContext<T>>	null	Row Child content of the component.
`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
`ColumnResizeMode`	ResizeMode	ResizeMode.None	Defines if columns of the grid can be resized.
`Columns`	RenderFragment	null	The Columns that make up the data grid. Add Column components to this RenderFragment.
`ColumnsPanelReordering`	bool	False	If true, the columns in the DataGrid can be reordered via the columns panel.
`Culture`	CultureInfo	null	The culture used to represent numeric columns and his filtering input fields. Each column can override this DataGrid Culture.
`CurrentPage`	int	0	The page index of the currently displayed page (Zero based). Usually called by MudTablePager. Note: requires a MudTablePager in PagerContent.
`Dense`	bool	False	Set true for rows with a narrow height
`DragDropColumnReordering`	bool	False	If true, the columns in the DataGrid can be reordered via drag and drop. This is overridable by each column.
`DragIndicatorIcon`	string		Custom drag indicator icon in the header which shows up on mouse over.
`DragIndicatorSize`	Size	Size.Small	Size of the DragIndicatorIcon.
`DropAllowedClass`	string	"drop-allowed"	Css class that is applied to column headers while dragging to indicate that the dragged column can be dropped on a column.
`DropNotAllowedClass`	string	"drop-not-allowed"	Css class that is applied to column headers while dragging to indicate that the dragged column can not be dropped on a column.
`EditDialogOptions`	DialogOptions	null	Fine tune the edit dialog.
`EditMode`	DataGridEditMode?	null	When the grid is not read only, you can specify what type of editing mode to use.
`EditTrigger`	DataGridEditTrigger?	DataGridEditTrigger.Manual	Allows you to specify the action that will trigger an edit when the EditMode is Form.
`Elevation`	int	1	The higher the number, the heavier the drop-shadow. 0 for no shadow.
`Filterable`	bool	False	Controls whether data in the DataGrid can be filtered. This is overridable by each column.
`FilterCaseSensitivity`	DataGridFilterCaseSensitivity	DataGridFilterCaseSensitivity.Default
`FilterDefinitions`	List<IFilterDefinition<T>>		The list of FilterDefinitions that have been added to the data grid. FilterDefinitions are managed by the data grid automatically when using the built in filter UI. You can also programmatically manage these definitions through this collection.
`FilterMode`	DataGridFilterMode	DataGridFilterMode.Simple
`FilterTemplate`	RenderFragment<MudDataGrid<T>>	null
`FixedFooter`	bool	False	When true, the footer will be visible is not scrolled to the bottom. Note: set Height to make the table scrollable.
`FixedHeader`	bool	False	When true, the header will stay in place when the table is scrolled. Note: set Height to make the table scrollable.
`FooterClass`	string	null	Add a class to the tfoot tag
`Groupable`	bool	False	Determines whether grouping of columns is allowed in the data grid.
`GroupClass`	string	null	CSS class for the groups.
`GroupClassFunc`	Func<GroupDefinition<T>, string>	null	Returns the class that will get joined with GroupClass.
`GroupExpanded`	bool	False	If set, a grouped column will be expanded by default.
`GroupStyle`	string	null	CSS styles for the groups.
`GroupStyleFunc`	Func<GroupDefinition<T>, string>	null	Returns the class that will get joined with GroupStyle.
`Header`	RenderFragment	null	Allows adding a custom header beyond that specified in the Column component. Add HeaderCell components to add a custom header.
`HeaderClass`	string	null	Add a class to the thead tag
`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.
`Hideable`	bool	False	Controls whether columns in the DataGrid can be hidden. This is overridable by each column.
`HorizontalScrollbar`	bool	False	Defines if the table has a horizontal scrollbar.
`Hover`	bool	False	Set true to see rows hover on mouse-over.
`Items`	IEnumerable<T>	null	The data to display in the table. MudTable will render one row per item
`ItemSize`	float	50	Gets the size of each item in pixels. Defaults to 50px.
`Loading`	bool	False	Show a loading animation, if true.
`LoadingContent`	RenderFragment	null	Defines the table body content the table has no rows and is loading
`LoadingProgressColor`	Color	Color.Info	The color of the loading progress if used. It supports the theme colors.
`MultiSelection`	bool	False	Set to true to enable selection of multiple rows.
`NoRecordsContent`	RenderFragment	null	Defines the table body content when there are no matching records found
`Outlined`	bool	False	If true, table will be outlined.
`OverscanCount`	int	3	Gets or sets a value that determines how many additional items will be rendered before and after the visible region. This help to reduce the frequency of rendering during scrolling. However, higher values mean that more elements will be present in the page. Only used for virtualization.
`PagerContent`	RenderFragment	null	Add MudTablePager here to enable breaking the rows in to multiple pages.
`QuickFilter`	Func<T, bool>	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.
`ReadOnly`	bool	True	Locks Inline Edit mode, if true.
`RowClass`	string	null	CSS class for the table rows. Note, many CSS settings are overridden by MudTd though
`RowClassFunc`	Func<T, int, string>	null	Returns the class that will get joined with RowClass. Takes the current item and row index.
`RowsPerPage`	int	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.
`RowStyle`	string	null	CSS styles for the table rows. Note, many CSS settings are overridden by MudTd though
`RowStyleFunc`	Func<T, int, string>	null	Returns the class that will get joined with RowClass. 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)
`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.
`SelectOnRowClick`	bool	True	When true, row-click also toggles the checkbox state
`ServerData`	Func<GridState<T>, Task<GridData<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
`ShowColumnOptions`	bool	True	Controls whether to hide or show the column options. This is overridable by each column.
`ShowFilterIcons`	bool	True
`ShowMenuIcon`	bool	False	When true, displays the built-in menu icon in the header of the data grid.
`SortDefinitions`	Dictionary<string, SortDefinition<T>>		The list of SortDefinitions that have been added to the data grid. SortDefinitions are managed by the data grid automatically when using the built in filter UI. You can also programmatically manage these definitions through this collection.
`SortMode`	SortMode	SortMode.Multiple	Controls whether data in the DataGrid can be sorted. This is overridable by each column.
`Square`	bool	False	Set true to disable rounded corners
`Striped`	bool	False	If true, striped table rows will be used.
`ToolBarContent`	RenderFragment	null	Optional. Add any kind of toolbar to this render fragment.
`Virtualize`	bool	False	If true, the results are displayed in a Virtualize component, allowing a boost in rendering speed.
Common
`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.

EventCallbacks

Name	Type	Description
`CanceledEditingItem`	EventCallback<T>	Callback is called when the process of editing an item has been canceled. Returns the item which was previously in edit mode.
`CommittedItemChanges`	EventCallback<T>	Callback is called when the changes to an item are committed. Returns the item whose changes were committed.
`FormFieldChanged`	EventCallback<FormFieldChangedEventArgs>	Callback is called when a field changes in the dialog MudForm. Only works in EditMode.Form
`RowClick`	EventCallback<DataGridRowClickEventArgs<T>>	Callback is called whenever a row is clicked.
`RowContextMenuClick`	EventCallback<DataGridRowClickEventArgs<T>>	Callback is called whenever a row is right clicked.
`RowsPerPageChanged`	EventCallback<int>	Rows Per Page two-way bindable parameter
`SelectedItemChanged`	EventCallback<T>	Callback is called when a row has been clicked and returns the selected item.
`SelectedItemsChanged`	EventCallback<HashSet<T>>	Callback is called whenever items are selected or deselected in multi selection mode.
`StartedEditingItem`	EventCallback<T>	Callback is called when an item has begun to be edited. Returns the item being edited.

Methods

Name	Parameters	Return	Description
`AddFilter()`			Called by the DataGrid when the "Add Filter" button is pressed.
`Task AddFilterAsync(IFilterDefinition<T> definition)`	IFilterDefinition<T> definition	Task
`Task CancelEditingItemAsync()`		Task	Cancel editing an item.
`Task ClearFiltersAsync()`		Task
`CollapseAllGroups()`
`ExpandAllGroups()`
`Task ExtendSortAsync(string field, SortDirection direction, Func<T,object> sortFunc, IComparer<object> comparer)`	string field SortDirection direction Func<T, object> sortFunc IComparer<object> comparer	Task
`int GetFilteredItemsCount()`		int	Gets the total count of filtered items in the data grid.
`GroupItems(bool noStateChange)`	bool noStateChange
`HideColumnsPanel()`			Hides the columns panel
`NavigateTo(Page page)`	Page page		Navigates to a specific page when the data grid has an attached data pager.
`OpenFilters()`			Opens the filter panel.
`Task ReloadServerData()`		Task	Call this to reload the server-filtered, -sorted and -paginated items
`Task RemoveSortAsync(string field)`	string field	Task
`SetDefaultFilterDefinition<TFilterDefinition>()`			Specifies the default <see cref="T:MudBlazor.IFilterDefinition`1" /> to be used by <see cref="M:MudBlazor.MudDataGrid`1.AddFilter" /> and <see cref="P:MudBlazor.Column`1.FilterContext" />.
`SetDefaultFilterDefinition(Func<IFilterDefinition<T>> factory)`	Func<IFilterDefinition<T>> factory : The factory function to create the default filter definition.		Specifies the default <see cref="T:MudBlazor.IFilterDefinition`1" /> to be used by <see cref="M:MudBlazor.MudDataGrid`1.AddFilter" /> and <see cref="P:MudBlazor.Column`1.FilterContext" />.
`Task SetEditingItemAsync(T item)`	T item	Task	Set an item to be edited.
`Task SetRowsPerPageAsync(int size)`	int size : The page size.	Task	Sets the rows displayed per page when the data grid has an attached data pager.
`Task SetRowsPerPageAsync(int size, bool resetPage)`	int size : The page size. bool resetPage : If <see langword="true" />, resets <see cref="P:MudBlazor.MudDataGrid`1.CurrentPage" /> to 0.	Task	Sets the rows displayed per page when the data grid has an attached data pager.
`Task SetSelectedItemAsync(T item)`	T item	Task	Set the currently selected item in the data grid.
`Task SetSortAsync(string field, SortDirection direction, Func<T,object> sortFunc, IComparer<object> comparer)`	string field : The field. SortDirection direction : The direction. Func<T, object> sortFunc : The sort function. IComparer<object> comparer : The comparer to allow custom compare	Task	Sets the sort on the data grid.
`ShowColumnsPanel()`			Shows a columns panel that lets you show/hide, filter, group, sort and re-arrange columns.
`ToggleFiltersMenu()`			Opens or closes the filter panel.

MudDataGrid<T> API

Pages

Properties

Misc

Common

EventCallbacks

Methods