[DataGrid] add position sticky to DataGrid columns (header) on scroll down

[ShadiBlitz]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

No response

Expected behavior 🤔

I would like to achieve a sticky position for the DataGrid Columns header when scrolling down the page. Basically, all I want is when i scroll down and the table still has content is to see the columns header stuck on the top of the page, so I know what are the headers of each columns are. And for the sticky header to be gone when i scroll down and passed all the table content.

Steps to reproduce 🕹

I have tried the following but did not work :

https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-0hq08f?file=/demo.tsx

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

No response

[alexfauquette]

It seems to be possible as follow, but not recomended

export const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
  "& .MuiDataGrid-main": {
    // remove overflow hidden overwise sticky does not work
    overflow: "unset"
  },
  "& .MuiDataGrid-columnHeaders": {
    position: "sticky"
  },
  "& .MuiDataGrid-virtualScroller": {
    // remove the space left for the header
    marginTop: "0!important"
  }
}));

https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-6izdkg?file=/demo.tsx

[ShadiBlitz]

Thanks for you reply! @alexfauquette
I tried to do the same inside a layout, but keep getting horizontal scroll on the page. I am suspecting it has to do with display: 'flex'.

https://codesandbox.io/s/persistentdrawerleft-demo-material-ui-forked-s1g7sq?file=/demo.tsx

What is causing that ? I tried to fix but had no luck..

[alexfauquette]

I put a fix width to the data grid container and it works find, so it must be a CSS problem. I will not have time to have a deeper look into it.
https://codesandbox.io/s/persistentdrawerleft-demo-material-ui-forked-yekcfm?file=/demo.tsx

For generic question, you may find help on StackOverflow which has a much larger community

[zigang93]

using custom css, it break at v6..

[cherniavskii]

This was also asked in #7588 (comment)
For the v6, see this demo: https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-vj6msf?file=/demo.tsx

I'll add this demo to our column headers docs.

[KenanYusuf]

@cherniavskii think we can close this? Seems like a duplicate of #15466 if I am understanding correctly.

[cherniavskii]

Duplicate of #15466