Typical usage

Here is an example of a data grid that uses in-memory data and enables features including pagination, sorting, filtering, column options, row highlighting and column resizing.

All columns, except 'Bronze', have a Tooltip parameter value of true.
When using this for a TemplateColumn (like 'Rank' here), you need to also supply a value for the TooltipText parameter. No value given equals no tooltip shown.
When using this for a PropertyColumn, a value for the TooltipText is not required. By default, the value given for Property will be re-used for the tooltip. If you do supply a value for TooltipText its outcome will be used instead.

TooltipText is a lambda function that takes the current item as input and returns the text to show in the tooltip (and aria-label). Look at the Razor tab to see how this is done and how it can be customized.

The Country filter option can be used to quickly filter the list of countries shown. Pressing the ESC key just closes the option popup without changing the filtering currently being used. Pressing enter finishes the filter action by the current input to filter on and closes the option popup.

Example

To test set ResizeType on the DataGrid to either DataGridResizeType.Discrete or DataGridResizeType.Exact

Remove the parameter completely to get the original behavior

Use ResizeColumnOnAllRows="false" to limit column resizing to header cells only (default is true for all rows)

Rank
Name of the country
Gold
Silver
Bronze
Total
Flag of usUnited States of America404442126
Flag of cnPeople's Republic of China40272491
Flag of jpJapan20121345
Flag of auAustralia18191653
Flag of frFrance16262264
Flag of nlNetherlands1571234
Flag of gbGreat Britain14222965
Flag of krSouth Korea1391032
Flag of itItaly12131540
Flag of deGermany1213833
91 items
Restore all resultsClear all results
Download: 
An error has occurred. This application may no longer respond until reloaded. Reload 🗙