Pinned column transition to the non-pinned column.

[Legys]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Pinned columns allow us instantly see important information. But there're cases when we don't need to see columns pinned. For example, if we pinned the side column, i.e. from the left or from the right of the DataGrid. What if we unpin columns automatically when the place for the column that has been pinned is fully visible?
Let's say you have columns [a, b, c, d, e, f]. Columns "a" and "f" are pinned. Users see a horizontal scrollbar. Once you scroll to the farthest right point of the table, unpin column "f". Do the same if we scroll to the right.

Examples 🌈

I did the closest thing to what I have described but would like to have a native option that works exactly how I described.
I had to override shadow to completely remove it. When at the middle of the scroll it looks like that:

But then when you scroll right, it kind of looks like staying unpinned as the shadow is not displayed.

Motivation 🔦

The lack of this feature has affected us because we have limited space to display data in columns, even though the DataGrid occupies most of the screen (around 80-85% of the viewport width). When users pin three columns [a, b], and [f], they mistakenly believe there is more information and feel frustrated when they have to scroll unnecessarily. Implementing this feature would provide a clear and balanced user experience, allowing users to see pinned information when needed while maintaining a familiar table look.

Order ID 💳 (optional)

353fd166333c88df3b68ed5a6e922891Tz02ODU0NyxFPTE3MTgyNzY1NDU4ODksUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI=

[m4theushw]

Is #7152 (comment) what you're looking for?

[Legys]

@m4theushw Interesting, I will have another look. The best way here is to attach styles via DOM, not through useState and styled-components as it would make excess rerenders for the entire DataGrid.
Actually, I've been trying to accomplish the same, but instead of const dimensions = apiRef.current.getRootDimensions(); there was a second argument in scrollPositionChange event which was null when you scroll the far right side of the horizontal scroll. I thought it was unstable or had a bug, so I skipped it, but this snippet looks promising, thank you!

[Legys]

Did I get it right that we don't have an in-built feature because it contradicts material guidelines?

[m4theushw]

Did I get it right that we don't have an in-built feature because it contradicts material guidelines?

Yes, we also don't usually add options to change the appearance of the elements. This is done via CSS.

[Legys]

@m4theushw thank you, I think we can close the ticket then.

[cherniavskii]

We can add this demo to our docs

[Legys]

@cherniavskii I guess "Recipe" section is a good candidate for the demo.