DataGridPremium having weird issues with pinnedColumns

[ddouangkesone]

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]

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]

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

[romgrk]

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]

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

[ddouangkesone]

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]

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]

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!