[data grid] Allow rows to be sticky

[TarasRospodniuk]

The problem in depth

I am using the DataGridPremium component with the Master Detail feature and would like to know if it is possible to make the currently selected row sticky. Additionally, can multiple rows be made sticky when several rows are expanded?

I have attached a video below that demonstrates the current behavior, where the expanded row does not stick to the top of the table.

https://github.com/user-attachments/assets/bcbf87be-f3fd-4d36-9285-74ebadc83f6f

Your environment

`npx @mui/envinfo`

Browser: Chrome
OS: Windows, Mac, Linux

Dependencies:
react: ^18.2.0
react-dom: ^18.2.0
@mui/material": "^5.10.7
@mui/x-data-grid-premium: ^6.20.4

Search keywords: Datagrid, sticky rows Order ID: 95688

[michelengelen]

I am almost 100% sure that this is not possible given how the grid renders the rows due to the virtualization. I did try the easy approach just now with sx

sx={{
  [`& .${gridClasses['row--detailPanelExpanded']}`]: {
    position: 'sticky',
    top: `var(--DataGrid-topContainerHeight)`,
  },
}}

which was working just fine for the first row, but when others were opened it did break.

@romgrk do you think we could provide a workaround?

[TarasRospodniuk]

@michelengelen Thank you for your attention to this issue. I've tried your approach with sx; unfortunately, it didn't help even for the first row, because we've already changed some internal styles of Datagrid to implement other features.

It seems impossible for now, so we'll try to find another workaround.

[romgrk]

I think it's possible to implement it but figuring out how to do it is nearly as much work as implementing the feature itself. The idea would be to dynamically calculate a sticky position for each row based on their position and the position of the next row. I'll mark this as a feature request.

:+1: the top comment to support this, we prioritize feature requests based on that indicator.

[ambernina]

Just got the same issue working for me. The issue actually wasn't the stickiness at all, that was working fine. What it ended up being was just the layer of the detail panel and the row. Adding a negative z-index to .MuiDataGrid-detailPanel in the sx ended up working for me.

It is limited though, by the height of the parent container. It'll only stick till the computed height of the virtualScrollerRenderZone. You can work around that by adding an inherited height to that property, or if you have a smaller data set or limited rows on your page, you can just disable virtualization and that does that same thing.

Even that is still limited though. The sticky row will still only stick till it reaches the height of the virtualScroller container, which means that the lower a row is in your grid the less it'll stick, and the bottom row won't stick at all when expanded.

Planning to open an issue for that ^ if I can.