how to wrap text in cell of DataGrid

[NavizDev]

I'm trying to wrap text in a cell of the data grid. Is there a way to wrap text in a table column? I using <DataGrid />:

.MuiDataGrid-root .MuiDataGrid-cell {
  color: tomato; /* work */
  white-space: 'normal' !important; /* don't work */
  word-wrap: 'break-word' !important; /* don't work */
}

[oliviertassinari]

Do you expect the height of the row to adapt to the number of wrapped lines?

[NavizDev]

@oliviertassinari yes.

[alessandrocapra]

Same here, I am considering going back to Table because of this. I google for quite some time and it seems the feature has not been released yet, but if there's any workaround please share :)

[dtassone]

Having dynamic row height is on the pipeline but it might take some time before it gets to production.
In the meantime, I have created a demo with a cell expand renderer which allows seeing the full content of the cell when going over it.

Check out https://codesandbox.io/s/expandcelldemo-enbw7

[oliviertassinari]

Should we close as a duplicate of #417 and post the Popper workaround there?

[jfosterdavis]

Can anybody help with an ES6 popper?

[oliviertassinari]

Duplicate of #417

[chriszertamayo]

@dtassone not in tsx please but in js?

[tielushko]

@chriszertamayo
https://codesandbox.io/s/bjupl?file=/demo.js

[shoaib1985]

@NavizDev Please try the following in your CSS:

.MuiDataGrid-root .MuiDataGrid-cell {
  color: tomato;
  white-space: normal !important;
  word-wrap: break-word !important;
}

this should be working.

[sadiki-o]

here is a working solution using Tooltip:

/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { Tooltip } from '@mui/material';
import { GridRenderCellParams } from '@mui/x-data-grid';
import { useEffect, useRef, useState } from 'react';

const RenderExpandableCell = (props: GridRenderCellParams) => {
  const [isOverflowed, setIsOverflow] = useState(false);
  const { value } = props;

  const textElementRef = useRef<HTMLSpanElement | null>(null);

  const checkOverflow = () => {
    // Using getBoundingClientRect, instead of scrollWidth and clientWidth, to get width with fractional accuracy
    const clientWidth = textElementRef.current!.getBoundingClientRect().width;

    textElementRef.current!.style.overflow = 'visible';
    const contentWidth = textElementRef.current!.getBoundingClientRect().width;
    textElementRef.current!.style.overflow = 'hidden';

    setIsOverflow(contentWidth > clientWidth);
  };

  useEffect(() => {
    checkOverflow();
    window.addEventListener('resize', checkOverflow);
    return () => {
      window.removeEventListener('resize', checkOverflow);
    };
  }, []);

  return (
    <Tooltip title={value} disableHoverListener={!isOverflowed}>
      <span
        ref={textElementRef}
        style={{
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {value}
      </span>
    </Tooltip>
  );
};

export default RenderExpandableCell;

https://codesandbox.io/s/expandcelldemo-forked-6dzrqh?file=/src/App.tsx

[alsiddsarkar]

This works:

getRowHeight={(params) => "auto"}

[jnewman-phare]

This works:

getRowHeight={(params) => "auto"}

This is the best and most simple solution, thanks!

[jvallesmasttro]

Is there a way to do the same with datagrid headers?

[csatish]

Is there a way to do the same with datagrid headers?
In the DataGrid props :

sx={{ '& .MuiDataGrid-columnHeaderTitleContainer': { whiteSpace: 'normal' }, }}

[rahulchougule]

This works:
getRowHeight={(params) => "auto"}

This is the best and most simple solution, thanks!

My text in data grid cell was truncated, on mobile device. I added padding to make UI good along with this solution.

getRowHeight={() => 'auto'}
sx={{
'.MuiDataGrid-cell': {
fontSize: '16px',
padding:'10px'
}
}}