Data Grid

A high-performance data grid with support for sorting, filtering, pagination, and custom column templates.

Use this example to explore default behavior, customization points, and accessibility-friendly patterns in a real Blazor page.

Standard Grid

MgDataGrid

The data grid provides a robust way to display and interact with tabular data. It includes features like frozen columns, custom formatting, and row actions.

Groupable Grid

Grouping Enabled

Enable grouping to allow users to organize data by dragging column headers into the group panel. This is particularly useful for analyzing large datasets and identifying patterns.

API Reference

MgDataGrid

Property	Type	Default	Description
Items	IEnumerable<TItem>	null	The collection of data objects to display.
PageSize	int	20	Number of rows to display per page.
ShowFooter	bool	false	Whether to display the pager/footer.
IsGroupable	bool	true	Enables the grouping panel where columns can be dropped.
NoItemsMessage	string	"There are no items to display!"	Message to show when the grid is empty.
HeaderClasses	string	""	Additional CSS classes for the header row.

MgGridColumn

Property	Type	Default	Description
Property	Expression<Func<TItem, object>>	-	The property to bind to this column.
Title	string	""	The header text for the column.
Width	string	null	Column width in pixels or percentage.
Sortable	bool	false	Whether sorting is enabled for this column.
Filterable	bool	true	Whether filtering is enabled for this column.
Groupable	bool	true	Whether grouping is allowed for this column.
Frozen	bool	false	Stick the column to the side during horizontal scrolling. Defaults to left.
FrozenPosition	MgFrozenPosition	Left	Specifies whether the column is frozen to the Left or Right.
DataType	MgDataType	String	Specifies the data type for proper formatting (Currency, Date, etc.).
Format	string	null	Format string for dates and numbers.
Template	RenderFragment<TItem>	null	Custom template for cell content.