Data grid · Components · Blazor learning sandbox

Property and template columns

PropertyColumn reads a property and knows its type, so it can sort, filter and format it. TemplateColumn renders anything; give it a SortBy when it should still sort.

Station0	Time0	Temperature (°C)0	Rain (mm)0	Sky
Ben Alder ridge	06:00	3.4	0.0	Clear
Loch Ossian shore	06:00	6.1	1.2	Showers
Corrour moor	06:00	4.8	0.4	Cloudy
Ben Alder ridge	12:00	9.7	0.0	Clear
Loch Ossian shore	12:00	11.2	3.8	Showers
Corrour moor	12:00	10.5	0.0	Cloudy

Sorting

SortMode chooses between no sorting, one column at a time, or several, ranked in the order you click them. SortBy gives a template column a sort key: Altitude sorts by metres, not by its label.

Name	Region	Altitude	Since	Note
Ben Alder ridge	Highlands	High (1080 m)	1998	Wind mast
Loch Ossian shore	Highlands	Mid (400 m)	2004	Rain gauge
Corrour moor	Highlands	Mid (410 m)	1987	Full station
Saltmarsh point	Coast	Low (3 m)	2012	Tide sensor
Harbour wall	Coast	Low (8 m)	1965	Full station
Cairn summit	Highlands	High (1245 m)	2019	Wind mast

Filter modes and quick filter

Simple opens one filter panel for the grid, ColumnFilterMenu puts a menu on each header, and ColumnFilterRow adds a row of inputs. QuickFilter is your own predicate, usually fed by a search box.

Code0	Species0	Site0	Length (mm)0	Catalogued0
SM-001	Common limpet	Saltmarsh point	38	True
SM-002	Shore crab	Harbour wall	61	True
SM-003	Dog whelk	Saltmarsh point	27	False
SM-004	Blue mussel	Harbour wall	54	True
SM-005	Edible periwinkle	Rock pools	22	False

Grouping and aggregates

Grouping on a column gathers rows under collapsible headers. AggregateDefinition adds a footer per group and for the whole grid: built-in Avg, Sum, Min, Max and Count, or a custom function.

Station0	Day0	High (°C)0	Rain (mm)0	Gust (km/h)0
Ben Alder ridge 3 days
Ben Alder ridge	Mon	8.1	0.0	54
Ben Alder ridge	Tue	6.4	4.2	71
Ben Alder ridge	Wed	7.9	1.0	48
		Mean 7.5 °C	Total 5.2 mm	Peak 71 on Tue
Loch Ossian shore 3 days
Loch Ossian shore	Mon	12.3	0.4	22
Loch Ossian shore	Tue	10.8	6.6	35
Loch Ossian shore	Wed	11.5	2.1	19
		Mean 11.5 °C	Total 9.1 mm	Peak 35 on Tue
Harbour wall 3 days
Harbour wall	Mon	14.2	0.0	30
Harbour wall	Tue	13.1	3.4	44
Harbour wall	Wed	14.8	0.0	26
		Mean 14.0 °C	Total 3.4 mm	Peak 44 on Tue
		Mean 11.0 °C	Total 17.7 mm	Peak 71 on Tue

Child rows

HierarchyColumn adds an expand button; ChildRowContent renders below the row. ButtonDisabledFunc and InitiallyExpandedFunc decide per row, ExpandSingleRow closes the others.

	Station0	Keeper0	Instruments
	Ben Alder ridge	Morag Fraser	2
Instruments at Ben Alder ridge Anemometer, calibrated 3 Feb 2026 Thermometer screen, calibrated 20 Nov 2025
	Loch Ossian shore	Callum Reid	1
	Harbour wall	Aisha Bello	3
	Cairn summit	Morag Fraser	None fitted yet

Cell, inline and form editing

Form and Inline edit a copy of the row and apply it only when you save; CommittedItemChanges can refuse with KeepOpen. Cell mode writes straight to the item as you type.

Form (dialog)

Inline

Cell

Name0	Price (£)0	Daily batch0	Gluten free0
Country sourdough	4.80	60	False
Seeded rye	4.20	24	False
Buckwheat loaf	5.10	12	True

Choose a mode, then edit a loaf.

Selection

SelectColumn adds checkboxes with a select-all header. DisabledFunc keeps some rows out of the selection, and AriaLabelFunc names each checkbox for screen readers.

	Code0	Material0	Site0	Status
Select sample LS-2201	LS-2201	Sediment core	Saltmarsh point	In the cold store
Select sample LS-2202	LS-2202	Seawater, 1 L	Harbour wall	Already shipped
Select sample LS-2203	LS-2203	Peat	Corrour moor	In the cold store
Select sample LS-2204	LS-2204	Lichen	Ben Alder ridge	In the cold store
Select sample LS-2205	LS-2205	Freshwater, 1 L	Loch Ossian shore	Already shipped

No samples in the shipment.

Resize, reorder and hide columns

Drag a header edge to resize and a header to move it; Title stays pinned and Shelf keeps its width. Hideable lists columns in the column menu, and binding Hidden lets your own controls show or hide a column.

Resize one column

Resize the grid

Swap on drop

Insert on drop

Show the notes column

Title0	Author0	Shelf0	Year0	Notes0
Salt and Ledger	Idris Okafor	H-14	2019	Signed copy
The Patient Garden	Sofia Marchetti	N-02	2021	Staff pick
Ferries and Fog	Idris Okafor	T-07	2015	Last copy
Winter at the Observatory	Lena Vogt	F-31	2023	Book club, March

Sticky columns

StickyLeft and StickyRight pin a column while the rest scroll horizontally, so the row name and its actions never leave the screen.

Station0	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
Ben Alder ridge	210 mm	160 mm	175 mm	98 mm	84 mm	90 mm	101 mm	125 mm	170 mm	220 mm	230 mm	240 mm
Loch Ossian shore	180 mm	132 mm	140 mm	80 mm	70 mm	76 mm	88 mm	104 mm	140 mm	190 mm	196 mm	205 mm
Harbour wall	96 mm	70 mm	72 mm	51 mm	49 mm	52 mm	58 mm	70 mm	82 mm	110 mm	118 mm	112 mm

Scroll sideways: the station and report columns stay pinned.

Virtualization

With Virtualize, a fixed Height and a FixedHeader, only the rows in view are rendered. Ten thousand readings scroll as smoothly as ten.

#0	Taken0	Water (°C)0	Wave height (m)0

Server-side data with cancellation

ServerData receives the page, sort and filters with a CancellationToken. The grid cancels the previous request when a new one starts, so stale pages never land.

Borrower0	Title0	Due0	Renewals0
The server found no loans matching “”.

Slow server (1.5 s per request)

Requests: 0. Cancelled before finishing: 0.

Playground

Toggle the grid's appearance and features; the markup lists only the values that differ from the defaults.

Title0	Genre0	Year0
Salt and Ledger	History	2019
The Patient Garden	Nature	2021
Ferries and Fog	Travel	2015
A Short History of Ink	History	2024

Dense

Hover

Striped

Bordered

Outlined

Filterable

Groupable

Hideable

Elevation: 0

Sort mode

Filter mode

Column resize mode

<MudDataGrid
    Items="_books"
    Hover="true"
    Outlined="true"
    Elevation="0">
    <Columns>
        <PropertyColumn Property="book => book.Title" />
        …
    </Columns>
</MudDataGrid>

Property and template columns

Field station readings, 14 May

Sorting

Filter modes and quick filter

Grouping and aggregates

A week at three stations

Child rows

Instruments at Ben Alder ridge