search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.14k stars 1.29k forks source link

[question] After updating data grid to version 7, cells do not handle overflow and render ellipsis by default #12682

Closed jasonhutton-sd closed 6 months ago

jasonhutton-sd commented 6 months ago

The problem in depth

After updating to version 7 of the data grid, the data in cells no longer handles overflow and draws an ellipsis when text exceeds cells width. Instead the text overflows into the next cell.

Your environment

System: OS: macOS 14.4.1 Binaries: Node: 20.4.0 - /usr/local/bin/node npm: 9.7.2 - /usr/local/bin/npm pnpm: Not Found Browsers: Chrome: 123.0.6312.106 Edge: 123.0.2420.65 Safari: 17.4.1 npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/icons-material: ^5.15.15 => 5.15.15 @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 @mui/material: ^5.15.15 => 5.15.15 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-charts: ^7.1.0 => 7.1.0 @mui/x-data-grid: 7.1.0 @mui/x-data-grid-premium: ^7.1.0 => 7.1.0 @mui/x-data-grid-pro: 7.1.0 @mui/x-date-pickers: 7.1.0 @mui/x-date-pickers-pro: ^7.1.0 => 7.1.0 @mui/x-license: ^7.0.0 => 7.0.0 @mui/x-tree-view: ^7.1.0 => 7.1.0 @types/react: ^18.2.20 => 18.2.47 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: 6.1.8 typescript: ^4.7.4 => 4.9.5

Using Chrome version: Version 123.0.6312.106 (Official Build) (x86_64)

Search keywords: Data grid overflow ellipsis Order ID: 71694

romgrk commented 6 months ago

Have you already read the migration guide?

jasonhutton-sd commented 6 months ago

I have read the guide. I did not see something for this unless I overlooked.

I did notice that if I don't use getRowHeight={() => 'auto'} the issue goes away. I need that thought as I have cell that expands when clicked.

romgrk commented 6 months ago

This part would be the relevant one:

The cell element isn't display: flex by default. You can add display: 'flex' on the column definition to restore the behavior. This also means cells aren't vertically centered by default anymore, so if you have dynamic row height, you might want to set the display: 'flex' for all non-dynamic columns.

Let me know if you have more questions. If you have a bug also include a reproducible example.

jasonhutton-sd commented 6 months ago

I believe this to be a bug unless I am missing something. Below should show the issue.

https://stackblitz.com/edit/mui-mui-x-b6rxhy?file=src%2Fdemo.tsx

romgrk commented 6 months ago

To get both behaviors, you'd need to add back the cell wrapper that we removed: https://stackblitz.com/edit/mui-mui-x-7bo5dj?file=src%2Fdemo.tsx

The wrapper was removed for performance reasons, other grids also don't add one. The dynamic row height plus text ellipsis is the only case where we couldn't preserve the behavior while removing the wrapper. Let me know if that answers your questions.

romgrk commented 6 months ago

But I think the overflow in your example is a bug though, I'll open a PR for it.

jasonhutton-sd commented 6 months ago

That seems to be the fix. Thanks for the help.

github-actions[bot] commented 6 months ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@jasonhutton-sd: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.