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.02k stars 1.24k forks source link

Add sticky Column Group Headers while horizontally scrolling #11112

Open m1daz opened 9 months ago

m1daz commented 9 months ago

Summary 💡

While a user scrolls horizontally, the column group header should have an option to make it sticky so that it keeps being shown while the columns it is a parent of are being shown. As far as I've searched and as far as I've looked at the documentation I have not seen this implemented yet.

Examples 🌈

For example,

image

I have a calendar with dates and months as the column group header.

While horizontally scrolling,

image

That header goes away due to it being scrolled past.

Motivation 🔦

I am writing software that requires users to be able to show when their drivers are booked and when they aren't. This would help me give more information to the user without them having to scroll back and forth finding what the current month is shown, etc.

Search keywords: sticky column group headers Order ID: 69007

michelengelen commented 9 months ago

@joserodolfofreitas could we add this to the list of feature requests?

cherniavskii commented 9 months ago

Hi @m1daz Is this what you're looking for https://github.com/mui/mui-x/pull/10059#discussion_r1309175588?

m1daz commented 9 months ago

Hi @m1daz Is this what you're looking for #10059 (comment)?

Actually looks like it! Is this available now or is this just a sketch of what it could look like?

joserodolfofreitas commented 9 months ago

@m1daz, it will soon be available on v7 alpha.

michelengelen commented 9 months ago

Closing this as it is already worked on and planned to be released with v7. Feel free top reopen this when you have additional questions. 👍🏼

cherniavskii commented 9 months ago

Reopening the issue for tracking purposes. We need https://github.com/mui/mui-x/pull/10059 to make sticky column header groups possible, but it's out of the scope of that PR 🙂

cherniavskii commented 2 months ago

A working demo using the Data Grid v7: https://codesandbox.io/p/sandbox/naughty-violet-gfw36y