syidaxgrid
Home Pricing Settings

GRID FEATURE

Follow rows

Row hover highlights the row under the pointer to help users read wide tables. It differs from row selection and does not automatically select a row for business operations.

Markdown source Features

How it works and when to use it

Use css-only for visual styling, stateful for row enter/leave events, or off for no highlighting. Avoid the cost of state updates when you do not need events.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Lightweight visual highlighting

Choose a basic reading aid.

javascript
grid.rowHover = 'css-only';

Verify the result: Only the row under the pointer changes appearance, without relying on app-level row hover event handling.

Example 2. Connect row enter events

Use this when a supporting area in your app describes the row under the pointer.

javascript
grid.rowHover = 'stateful';
grid.addEventListener('rowHoverChanged', event => console.log(event.detail));

Verify the result: Use the row information in the event. Build supporting descriptions from existing data instead of making a server request for every row.

Example 3. Disable highlighting

In colorful analytical tables, remove hover highlighting while retaining selection and focus.

javascript
grid.rowHover = 'off';

Verify the result: This reduces confusion when pointer movement would otherwise keep changing the appearance of row status colors or conditional formatting.

Combining features and troubleshooting

Do not interpret hover as a click or selection event. Read bulk-operation targets from the actual selection API.

Touch screens have no persistent hover state. Essential information and controls must also be accessible through clicks and focus.

Related reading