[data grid] Cannot view un pinned columns if width of pinned columns exceeds rendered width

[tkilminster-umusic]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

If you render the data grid with only left pinned columns, and the width of the pinned columns exceeds the width of the grids display area, scrolling to view the unpinned columns causes the remaining pinned columns to be bought into view misaligned to the column headers and covering the unpinned columns.

Expected behavior 🤔

Appreciate this may not have been considered when implementing this feature. The current behaviour could be considered to be buggy as it breaks the grid; however there isn't an obvious "correct" behaviour.

Below is simply a suggestion, appreciate this only works in the scenario outlined above (columns pinned to left only).

"Scrolling right brings the additional pinned columns into view until a predefined amount of space if available for unpinned columns, then freeze the pinned columns in place and scroll through the unpinned."

Steps to reproduce 🕹

code sandbox:
https://codesandbox.io/s/22-03-10-mui-datagridpro-v5-pinned-wider-than-viewport-1jlpmb

Steps:

1. Define a data grid with (via props):
   1. 3 wide columns
   2. grid width less than 2 columns combined
   3. 2 pinned columns to the left
2. Scroll to the right

Context 🔦

What are you trying to accomplish?
Allow them to choose more columns to be pinned (to the left) than can fit in the horizontal rendering zone and still view unpinned columns.
Facilitates storing a users pinned columns and recalling on subsequent visits (hence using props).

How has this issue affected you?
Have limited the maximum number of pinned columns in our implementation to reduce the likelihood of this happening to one of our users.
Advising users who encounter this issue to "zoom out" until all their pinned columns are visible.

Your environment 🌎

`npx @mui/envinfo`

System: OS: Windows 10 10.0.19042 Binaries: Node: 16.13.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 98.0.4758.102 Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.56) npmPackages: @emotion/react: ^11.5.0 => 11.5.0 @emotion/styled: ^11.3.0 => 11.3.0 @mui/base: 5.0.0-alpha.65 @mui/icons-material: ^5.1.0 => 5.1.0 @mui/lab: ^5.0.0-alpha.65 => 5.0.0-alpha.65 @mui/material: 5.4.2 => 5.4.2 @mui/private-theming: 5.3.0 @mui/styled-engine: 5.3.0 @mui/system: 5.3.0 @mui/types: 7.1.2 @mui/utils: 5.4.2 @mui/x-data-grid-pro: 5.5.1 => 5.5.1 @mui/x-license-pro: 5.5.1 @types/react: ^17.0.0 => 17.0.14 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^4.1.2 => 4.3.5

Order ID 💳 (optional)

SO2037954

[flaviendelangle]

It is indeed something we are aware off and that we did not "fix" yet.

Maybe @m4theushw will have more details about the potential solutions.

[m4theushw]

We saw this problem when this feature was being developed: #2946 (comment) and #2946 (comment)

It happens because we use position: sticky and the default behavior, when there's no enough width, is to "disable" the sticky effect. For now, it's a requirement that the grid should be large enough to accommodate all pinned columns.

From https://mui.com/components/data-grid/columns/#column-pinning
You may encounter issues if the sum of the widths of the pinned columns is larger than the width of the grid. Make sure that the grid can accommodate properly, at least, these columns.

---

"Scrolling right brings the additional pinned columns into view until a predefined amount of space if available for unpinned columns, then freeze the pinned columns in place and scroll through the unpinned."

This is one possible solution. When lacks space we stack the pinned columns and reveal them as soon as space becomes available. Or we minimize the columns requiring the user to maximize them to view.

[tkilminster-umusic]

Awesome, thanks for the detailed explanation. I'd not seen that warning when looking through the documentation previously, guess I should have looked a bit harder!

Out of interest is there any expectation on when a "fix", regardless of what that might entail might become available? There's no urgency, it's merely so I can set an expectation with the business here, even if that expectation is "it won't happen anytime soon".

[m4theushw]

It will be fixed at some moment but we can't ensure you a deadline. It's better to consider "it won't happen in the short term". It depends also if other users report that the requirement stated in the docs is complicated to fulfill.

[tkilminster-umusic]

Makes sense, I'll close the issue as you clearly have it in hand.

Thanks for your help 👍

[m4theushw]

I'll keep it open so we can track the upvotes.

[DaveKeehl]

I'm not sure if I'm facing the same underlying problem, but I'm experiencing the opposite situation with the pinned header being wider than the pinned cells.

Weirdly enough, updating the width property (after the page has loaded and rendered on screen) of the pinned column definition triggers the datagrid to correctly recompute the header width.

[mehmethalis]

I'm having the same problem so I will following the flow.

[romgrk]

May be fixed by #10059