Clip Mode in React Data Grid
The clip mode feature in the Syncfusion® React Data Grid component controls how cell text is displayed when it exceeds the available width. It manages overflow by truncating the text, adding an ellipsis, or adding an ellipsis with a tooltip.
| Clip Mode | Description |
|---|---|
Clip | Truncates overflowed content with no visual indicator. |
Ellipsis | Hides extra content and appends (...) to indicate more text is present. |
EllipsisWithTooltip | Adds (...) and displays the full text in a tooltip on hover. |
Applying clip mode to the entire Data Grid component
The clip mode feature applies to the entire Data Grid component by setting the clipMode property in the grid configuration. This ensures consistent handling of text overflow across all data and header cells.
Applying the clip mode only to a specific column
The clipMode property can be set on individual columns to control how text overflow is handled for each column. This allows precise customization, enabling selected columns to truncate text, display ellipses, or display ellipses with tooltips.