Follow rows
Highlight the row under the pointer and receive change events.
Options
Changes below update the Grid and code immediately.
Slowly move the pointer across orders and inspect the background of the hovered row.
View code
Sample data included in the code · 6 rows
Usage guide
#Make wide tables easier to read by highlighting the row under the pointer.
Try it yourself
- Move between rows
Slowly move the pointer across orders and inspect the background of the hovered row.
- Compare with selection
Select a row by checkbox, then hover over another row. Selection and hover are different states.
- Connect app reactions
Subscribe to rowHoverChanged in stateful mode to connect the hovered row to another information panel.
Follow the hovered row more easily while reading. Use its ID to connect other app UI.
This example uses stateful mode. The website event table omits Hover events to avoid filling the log with frequent pointer movements.
Useful terms
- css-only
- A mode displaying only visual effects based on pointer position.
- stateful
- A mode also exposing the hovered row through state and events.
API reference
#Other properties1
| Attribute / Property | Type / Default | Description |
|---|---|---|
| rowHover | 'css-only' | 'stateful' | 'off'Default: 'css-only' | Row hover behaviour: CSS-only, stateful eventing, or disabled. |
Events1
| Events | Detail type | Description |
|---|---|---|
GridRowHoverChangedDetail | Fires when the hovered row changes in stateful hover mode. |
Methods2
| Method / Arguments | Return type | Description |
|---|---|---|
| rowId: string | number | null | Promise<void> | Set or clear the hovered row id. |
Promise<string | number | null> | Read the currently hovered row id. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.