How to have multi line cell in React data grid

Question

Currently using react-data-grid and it only shows a single line text, however I am trying to display multi line text.

sandbox: https://codesandbox.io/s/5vy2q8owj4?from-embed

Answer 1

You can override the data-grid cell content class to your file.

Render:

<div class="react-grid-multiline-content">
  <ReactDataGrid columns={columns} rowGetter={i => rows[i]} rowsCount={rows.length}/>
</div>

Style:

.react-grid-multiline-content .react-grid-Cell__value {
  white-space: normal !important;
}