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.