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

score 2 · Answer 1 · answered Jan 11 '23 at 14:28

2

 getRowHeight={() => 'auto'}

It will break lines automaticaly in mui DataGrid

answered Jan 11 '23 at 14:28

Abey Saji Kurian

21
3

score 0 · Answer 2 · answered Aug 07 '20 at 04:33

0

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;
}

answered Aug 07 '20 at 04:33

Arunkumar Ramasamy

751
4
8

Thanks for that, I've just updated the sandbox but it still seems to be doing the same thing as it is not showing multi lines. maybe I put the code in incorrectly? Updated: https://codesandbox.io/s/rdg-cell-editing-z5sen?file=/src/index.js – Aug 07 '20 at 04:54
Can you add the more data to your cell content – Arunkumar Ramasamy Aug 07 '20 at 04:58
oh cool, it works, I just had to store it an a array. Its just when I want to edit it on click it won't store the value as a multi line is there a way to get around this? – Aug 07 '20 at 05:17
Yes, you can add/remove the class from the element when You click on edit button using dynamic class. https://reactjs.org/docs/faq-styling.html – Arunkumar Ramasamy Aug 07 '20 at 05:37

score 0 · Answer 3 · answered Jan 14 '22 at 19:53

I was able to solve a similar problem by resetting the cells' line-height CSS property.

Before:

After:

My columns:

  const columns: Column<MyRow>[] = [
    {
      key: "id",
      name: "ID"
    },
    {
      key: "addressSummary",
      name: "Address",
      formatter: (formatterProps) => <AddressBlock {...formatterProps.row} />,
      cellClass: "normalLineHeight" // Need to reset the line height on affected cells
    }
  ];

CSS:

.normalLineHeight {
  line-height: normal;
}

Here is the sample code: https://codesandbox.io/s/react-data-grid-multi-line-content-fix-u6im0

How to have multi line cell in React data grid

3 Answers3