[data grid] Sticky expanded row limited to virtualScroller height

[ambernina]

Summary

Example: sandbox example

Steps to reproduce behavior:

1. click on the plus to expand a row
2. scroll down to notice the sticky behavior
3. expand/collapse each row, scroll down, and observe how rows further down in the list remain sticky for less time/height than higher rows

Current behavior:
When making an expanded row sticky, the row only remains sticky till it reaches the parent containers (virtualScroller) height, which is typically automatically generated and remains fixed. This results in each row down the list having less stickiness when expanded, till eventually the last row doesn't stick at all when expanded.

Examples

Docs: https://mui.com/x/react-data-grid/master-detail/

Motivation

Desired behavior:
Each row should be able to stick to the top of the table for it's entire expanded detail panels height.

Context:
When I was working on this issue, I realized that this behavior makes sense because stickiness only remains until it reaches the height of the parent container, as is the expected behavior with CSS. However, I was unable to change the height of the parent container causing the issue (virtualScroller) because once it's generated it remains fixed, and no amount of trying to override it beyond it's generated height would work. I would love to give you a snippet of the live example I'm working on, but the data is confidential, so I had to make do with recreating the behavior in a sandbox mostly with code from the docs. We do have pro plan, as well as premium, but I'm not sure how to get the Order ID or Support key.

Partial fix:
In my case, I could get the row to remain sticky for longer if I added height: inherit to the virtualScrollerRenderBox, but I later found that simply disabling virtualization accomplishes the same thing as well. However the row still didn't remain sticky for the entire detail panels content.

Feature request:
Would love it if rows could be sticky for the entire expanded detail panels height. Seems like having that be the default behavior would make sense, especially for those of us using large data sets with detail panels that are hundreds or even thousands of pixels long when expanded.

Search keywords: sticky, expanded, virtualScroller, virtualization, disableVirtualization, detailsPanel, expanded row behavior

[michelengelen]

This is the expected behavior of the sticky feature of CSS, so in order to support this we would have to manually recreate what is being asked here. I am almost certain that this is outside of the scope for us. WDYT @mui/xgrid ?

[romgrk]

It's a good feature and we should implement it (along with smart-sticky rows for row-grouping and tree-data), though I don't think we have enough bandwidth to work on it now. We might already have a related issue on that topic.

[KenanYusuf]

We have a couple of issues open on this topic:

• [data grid] Allow rows to be sticky #14257
• [data grid] Option to make grouped row summaries sticky as you scroll #10671

[michelengelen]

All right ... lets add it to the board and apply the "waiting for upvotes" label for now. 👍🏼