Rows in React Data Grid

The Syncfusion® React Data Grid component displays each row as a single record from a data source, facilitating data viewing, interaction, and modification. The Data Grid component supports row customization through styling, conditional formatting, alternating colors, adjustable row heights, and hover effects. Row data can be accessed, and rendering events are available for further configuration.

Conditional row styling

Data Grid component enhances readability by applying conditional row styling through the rowClass property. This feature allows rows to be visually distinguished based on data, such as applying custom background colors to rows where the "Status" column is "Pending", "Expired", or "Cancelled". Clicking the renew button updates these rows to "Active", removing the custom styling and reverting to the default appearance to reflect the updated status.

Alternating row colors

The enableAltRow property is enabled by default and automatically adds the .sf-altrow CSS class to alternating grid rows. However, since no background color is applied by default, custom styles can be defined for the .sf-grid .sf-altrow class to visually highlight alternating rows.

Custom row height

The rowHeight property defines a fixed height for all rows in a grid. For example, setting the row height to "60px" enhances readability for varied content sizes. The height can be dynamically adjusted to values like "20px", "40px", or "60px" by updating React state through a button click, providing a flexible layout.

Row hover effects

The Data Grid component highlights rows on mouse hover by default using the enableHover property. To customize the background color of highlighted rows, style the .sf-grid .sf-grid-content-row:hover .sf-cell CSS selector.

Disable row hover effects

To disable row hover highlighting, set the enableHover property to false in the grid.

Accessing row data dynamically

The Data Grid component provides a set of built-in methods for programmatically accessing row elements and their associated data. Each method returns specific row-related information.