Set the white-space and text-overflow CSS properties of the KendoReact Grid cells

Environment

Description

By default, the Grid cells have their CSS property white-space unset therefore defaulting to normal, while the text-overflow property is set to ellipsis. You can change the the white-space property to nowrap to keep the data on the same line, and text-overflow to clip to remove the ellipsis.

Solution

You can achieve this by using either the Grid cellRender prop, or the GridCell cell prop, or using CSS.

Using CSS

Setting className property to the Grid and using that class name as a selector to target only that instance.

Using cell

Setting custom cell for a column and adding the styles directly to the TD element

Using cellRender

Using the Grid's cellRender for adding the custom styles to all cells