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.

Row height configuration

Row height configuration determines how the grid calculates the height of each row. The Data Grid supports three approaches:

• Static row height: Using the rowHeight property for fixed heights applied uniformly to all rows
• Dynamic row height: Using the getRowHeight callback to customize heights based on row data
• Auto row height for column templates: Using the autoHeight property on columns with custom templates to automatically adjust row heights based on wrapped template content

Static 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.

Dynamic row height with getRowHeight

The getRowHeight callback enables customizing row heights based on row data. This callback is triggered during initial rendering and allows you to return different heights for different rows without modifying the data source.

The following real-world example demonstrates an issue tracker where row heights are dynamically adjusted based on issue priority. Critical priority issues receive increased row height (60px) for better visibility, while high priority issues get 50px, and lower priority issues use the default 36px height.

• Performance consideration: The getRowHeight callback is called for all rows during initial rendering. For optimal performance with large datasets, ensure the callback function executes quickly without complex calculations.
• Constraints: During scrolling, you may observe the scroll height increasing as new rows are measured and their heights are calculated. This is expected behavior caused by lazy height calculation, where row heights are measured incrementally as rows enter the viewport rather than calculated upfront.

Auto row height for template content

The autoHeight property on columns is specifically designed for columns with custom templates that contain wrapped text content. When autoHeight: true is set on a column with a template, the grid measures the template content during rendering and automatically adjusts row heights to fit all template content without truncation.

Template-specific use case: Use autoHeight: true only on columns that contain custom cell templates or column templates with text that wraps. The grid measures the rendered template content and adjusts row heights accordingly. This is not for simple data columns with text wrapping. See Row data with templates for template implementation examples. For understanding how autoHeight interacts with DOM virtualization and lazy height calculation during scrolling, refer to Auto row height with lazy height calculation in scrolling documentation. For simple data columns with text wrapping feature guidance, refer to Text wrapping in React Data Grid.

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.

Method Name	Returns
getSelectedRecords	Returns current view port all row objects with associated data
getSelectedRowIndexes	An array of indexes for the currently selected rows.

See also

• Virtualization types and configuration in scrolling documentation

• Row Templates in React Data Grid