Text Wrapping in React Data Grid
Syncfusion® React Data Grid component text wrapping feature ensures that content exceeding the column width remains fully visible without being truncated, enhancing readability for lengthy text in both headers and data cells. To enable text wrapping feature, set textWrapSettings.enabled to true. The textWrapSettings.wrapMode property defines the text wrapping behavior within the grid and provides the following options:
| Mode | Description |
|---|---|
Both | Wraps both column headers and cell content for maximum readability. |
Header | Wraps only column headers, keeping cell content compact. |
Content | Wraps only data cells, keeping headers concise. |
For example, setting textWrapSettings.wrapMode to Both enables wrapping in both header and data cells.
Note: When using columns with templates containing wrapped text content, set
autoHeight: trueon those columns to automatically adjust row heights based on the wrapped content within the template. This ensures template content displays completely without being truncated. See Row data with templates for template examples. Refer to Row height configuration impact on virtualization for performance considerations with large datasets.