Row Templates in React Data Grid
The row template feature in the Syncfusion® React Data Grid component enables customization of row appearance and layout. This feature supports displaying custom content, such as images, buttons, or other controls within rows. To activate the row template feature, configure the rowTemplate property with a custom HTML template defining the layout for each row.
Render Syncfusion® React Chart in row template
The Data Grid component supports embedding custom controls, such as the Syncfusion® React Chart component, within grid rows to enhance interactivity and provide graphical data representations. The rowTemplate property enables this by accepting a custom HTML template that defines the layout for each row, facilitating rich data visualization.
Showcasing data with rich row layouts
The Data Grid component supports extensive UI customization capabilities to accommodate diverse requirements. Beyond simple text-based cell content, it enables the creation of visually rich row layouts featuring elements such as images, descriptive fields, and context-specific data like names, roles, or locations all seamlessly integrated within a unified row structure.
Limitations
The Data Grid component relies on the field property mapped to the data source for actions like sorting, filtering, etc. When using the row template feature to customize row layouts, each column must be accurately mapped to a corresponding field in the data source.
When the field name is undefined or an incorrect field name is used in the column configuration, grid actions such as sorting and filtering do not work as expected.
Depending on your layout design, the following features may be limited or unsupported when using row templates:
- Selection
- Editing
- Filtering
- Sorting
- Pagination