Blazor DataGrid Example - Row Hover Effects
Product ID | Product Name | Unit Price | Units in Stock | Discontinued |
|---|
| 1 | Chai | $18.00 | 39 | |
| 2 | Chang | $19.00 | 17 | |
| 3 | Aniseed Syrup | $10.00 | 13 | |
| 4 | Chef Anton's Cajun Seasoning | $22.00 | 53 | |
| 5 | Chef Anton's Gumbo Mix | $21.35 | 0 | |
| 6 | Grandma's Boysenberry Spread | $25.00 | 120 | |
| 7 | Uncle Bob's Organic Dried Pears | $30.00 | 15 | |
| 8 | Northwoods Cranberry Sauce | $40.00 | 6 | |
| 9 | Mishi Kobe Niku | $97.00 | 29 | |
| 10 | Ikura | $31.00 | 31 | |
| 11 | Queso Cabrales | $21.00 | 22 | |
| 12 | Queso Manchego La Pastora | $38.00 | 86 |
This sample demonstrates the DataGrid row hover feature for visual row identification.
The Blazor DataGrid row hover feature highlights the current row when the mouse is hovered over it, improving visual feedback and user experience. To enable this feature, set the EnableHover property to true.
In this demo, move your mouse over any DataGrid row to see the hover effect applied. The highlighted row makes it easy to identify which row you're currently interacting with, particularly useful in grids with many columns or rows.
This feature is enabled by default in many DataGrid implementations and provides a subtle but effective visual cue for user interactions.