Custom comparer

Here a custom comparer is being used to sort counties by the length of their name. The code has examples for both PropertyColumn and TemplateColumn implementations (see the Razor tab).
For this example the code for the comparer is placed in the DataGridCustomComparer.razor.cs file but it could of course be placed in its own file.

For the paginator, this example also shows how to use the SummaryTemplate and PaginationTextTemplate parameters.

This example also shows using an OnRowFocus event callback to detect which row the cursor is over. By setting ShowHover to true, the current row will be highlighted. By default the system will use the designated hover color for this but you can specify an alternative color by setting the --datagrid-hover-color CSS variable. See the Razor tab for how this is done in this example.
To show how the resize handle can be altered, when choosing to use the alternate hover color, the handle color is set to a different value.

Note: once a value has been selected for the Resize type, it cannot by set to null again. You need to refresh the page to start with a null value again.

Example
Discrete Exact Use menu for column actions Use service for rendering menu Resize column on all rows
Rank
Name
Gold
Silver
Bronze
Total
Flag of cnPeople's Republic of China40272491
Flag of usUnited States of America404442126
Flag of xxRefugee Olympic Team0011
Flag of doDominican Republic1023
Flag of czCzech Republic3025
Flag of tpeChinese Taipei2057
Flag of gbGreat Britain14222965
Flag of zaSouth Africa1326
Flag of ciIvory Coast0011
Flag of krSouth Korea1391032
There are 91 rows
Alternative hover color
Download: 
An error has occurred. This application may no longer respond until reloaded. Reload 🗙