Blazor DataGrid Example - Row Hover Effects
This example shows the DataGrid component with the row hover feature enabled. To see the hover effect, move the mouse over the DataGrid rows.
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 |
The Blazor DataGrid row hover feature allows us to identify the current row by highlighting it when the mouse is hovered over it. Set the EnableHover property to true to enable this.
In this demo, you can see the hover effect by moving the mouse over DataGrid rows.