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

DataGridPremium having weird issues with pinnedColumns #14756

Closed ddouangkesone closed 2 weeks ago

ddouangkesone commented 2 weeks ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/youthful-shadow-q6rcw2

Steps:

  1. Wrap DataGridPremium in a div
  2. Wrap the div in another div with display: 'flexbox'
  3. Set a pinned column to the right.
  4. Start to resize the pinned column

Current behavior

The DOM width will start to mutate to the table. (Notice the bottom scrollbar growing / shrinking as you manipulate the pinned column)

Expected behavior

The column should articulate without effecting the DOM width

Context

We recently set a pinned column in our project and now the pages with this column have the behavior present on them.

Your environment

@emotion/react: ^11.11.1 => 11.13.3
@emotion/styled: ^11.11.0 => 11.13.0
@mui/base:  5.0.0-beta.40
@mui/core-downloads-tracker:  5.16.7
@mui/icons-material: ^5.14.3 => 5.16.7
@mui/material: ^5.14.3 => 5.16.7
@mui/private-theming:  5.16.6
@mui/styled-engine:  5.16.6
@mui/system:  5.16.7
@mui/types:  7.2.16
@mui/utils:  5.16.6
@mui/x-charts: ^7.16.0 => 7.16.0
@mui/x-charts-vendor:  7.16.0
@mui/x-data-grid:  7.16.0
@mui/x-data-grid-premium: ^7.3.0 => 7.16.0
@mui/x-data-grid-pro: ^5.17.4 => 5.17.26
@mui/x-date-pickers:  6.20.2
@mui/x-date-pickers-pro: ^6.11.1 => 6.20.2
@mui/x-internals:  7.16.0
@mui/x-license:  7.16.0
@mui/x-license-pro: ^5.17.0 => 5.17.12
@mui/x-tree-view: ^7.6.2 => 7.16.0
@types/react:  18.3.5
react: ^18.2.0 => 18.3.1
react-dom: ^18.2.0 => 18.3.1
styled-components:  5.3.11
typescript:  4.9.5

Search keywords: DataGridPremium pinnedColumns

Search keywords:

MBilalShafi commented 2 weeks ago

Looks like another variant of #12852. @romgrk Should we get back to #12979 or merge it in its current state if it helps? It's constantly being surfaced from time to time.

cherniavskii commented 2 weeks ago

This is a regression, it used to work in v6: https://codesandbox.io/p/sandbox/elastic-fermat-xz8x8f

romgrk commented 2 weeks ago

Why do you need to have a wrapping div in-between? Setting dimensions on the container of the grid would fix the issue.

The docs on layout highlight that having dimensions on the container is required.

romgrk commented 2 weeks ago

@cherniavskii Your sandbox link doesn't work, probably private.

ddouangkesone commented 2 weeks ago

Why do you need to have a wrapping div in-between? Setting dimensions on the container of the grid would fix the issue.

The docs on layout highlight that having dimensions on the container is required.

Adding a style={{width:'100%'}} on the div fixes the issue.

I pulled the issue out into its most simplest form, which is why it is just in a div on the sandbox. Its nested deeper in the actual code base.

Curious what you guys decide to do with this one. Do you hope everyone gets the layout correct? Do you repackage the component with the layout already in it with a width 100? Do you leave it as is? All fun questions.

Thanks guys!

romgrk commented 2 weeks ago

If the issue is fixed, I'll close it. We already require the grid container to have set dimensions, and I don't see a need to support more cases.

github-actions[bot] commented 2 weeks ago

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.

[!NOTE] We value your feedback @ddouangkesone! How was your experience with our support team? We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!