[docs] Add sticky column header demo

[cherniavskii]

Closes #5189
Closes #7588

Preview: https://deploy-preview-8297--material-ui-x.netlify.app/x/react-data-grid/column-header/#sticky-column-header

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-8297--material-ui-x.netlify.app/

Updated pages

• docs/data/data-grid/column-header/column-header.md

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	698.9	1,147.7	698.9	928.9	161.798
Sort 100k rows	ms	851.2	1,237.6	1,130	1,072.54	126.47
Select 100k rows	ms	222.9	322.8	300	288.8	35.039
Deselect 100k rows	ms	211.1	306.9	277.3	270.18	35.176

Generated by 🚫 dangerJS against 1bb0440

[MBilalShafi]

Optional Improvement: Not perfect (2px top border + a small cut around edges) but this may possibly improve the look and feel a bit during the scroll of the sticky header 🤔

diff --git a/docs/data/data-grid/column-header/StickyColumnHeader.tsx b/docs/data/data-grid/column-header/StickyColumnHeader.tsx
index 1d10e0a12..c666ef5e7 100644
--- a/docs/data/data-grid/column-header/StickyColumnHeader.tsx
+++ b/docs/data/data-grid/column-header/StickyColumnHeader.tsx
@@ -1,9 +1,20 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { alpha, darken, lighten, Theme } from '@mui/material/styles';
 import { DataGrid, gridClasses } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
+function getBorderColor(theme: Theme) {
+  if (theme.vars) {
+    return theme.vars.palette.TableCell.border;
+  }
+  if (theme.palette.mode === 'light') {
+    return lighten(alpha(theme.palette.divider, 1), 0.88);
+  }
+  return darken(alpha(theme.palette.divider, 1), 0.68);
+}
+
 export default function StickyColumnHeader() {
   const { data: commodityData } = useDemoData({
     dataSet: 'Commodity',
@@ -35,6 +46,7 @@ export default function StickyColumnHeader() {
           },
           [`.${gridClasses.columnHeaders}`]: {
             position: 'sticky',
+            borderTop: `1px solid ${getBorderColor(theme)}`,
             top: 0,
             backgroundColor: theme.palette.background.paper,
             zIndex: 1,
@@ -57,6 +69,7 @@ export default function StickyColumnHeader() {
           },
           [`.${gridClasses.columnHeaders}`]: {
             position: 'sticky',
+            borderTop: `1px solid ${getBorderColor(theme)}`,
             top: 0,
             backgroundColor: theme.palette.background.paper,
             zIndex: 1,

[m4theushw]

It doesn't look good on Windows:

First I have to scroll vertically to be able to scroll horizontally.

What do you think of removing height: 350, overflow: 'auto' and let the content expand freely? The drawback is that the column headers will be hidden under the docs' toolbar, but we can use top: 65 and put a message explaining that top: 0 should be used outside the MUI website.

It feels more natural without the terrible looking scrollbars.

[Joren-vanGoethem]

when would this be merged? would be an amazing feature

[MBilalShafi]

Thanks @Joren-vanGoethem for the feedback, we will try to push this forward as soon as we can, though this is not a new feature and just a demo build on top of the existing Grid.
You could use the code even now if you want, here's the demo file you can copy/reuse from: https://github.com/mui/mui-x/blob/1bb0440e6418303b2946167f4ad137d4daf59474/docs/data/data-grid/column-header/StickyColumnHeader.tsx
Thanks

[cheesestringer]

This is an awesome demo! Found a small issue with pinned columns where the column content appears on top of the header.

pinned.mp4

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

[cheesestringer]

I'm blind, you can set zIndex: 2 on the headers to fix pinned columns.

[pymenow]

@MBilalShafi thanks for the StickyHeaders demo - This is no longer available in v7.3 release - https://github.com/mui/mui-x/tree/master/docs/data/data-grid/column-header

[MBilalShafi]

@pymenow This has not been merged at all, and lately, we did a lot of improvements around column headers which now use position: sticky by default.
I think this recipe needs an update as per the new headers before we can ship it.
CC @mui/xgrid

[pymenow]

@MBilalShafi thanks for the update. The fundamental issue is headers are not sticky when we use auto height.
When there is a fixed height the headers are by default sticky . How can we resolve this ?

[MBilalShafi]

The fundamental issue is headers are not sticky when we use auto height

That's an interesting point.
To me, it seems the required behavior, since the autoHeight expands the container to the height that all the rows take, due to which there's no scroll on the rows container itself, but the whole page gets scrolled.

May I understand more about the use-case where having the header row sticky + using the autoHeight prop could be helpful?

@romgrk Please feel free to add something that I may have missed.

[pymenow]

True -> To me, it seems the required behavior, since the autoHeight expands the container to the height that all the rows take, due to which there's no scroll on the rows container itself, but the whole page gets scrolled.

use-case where having the header row sticky + using the autoHeight prop : When you set a fixed height and go to last page where there are only 1-2 rows , then auto height is needed as against 1st page where you may have enough rows to fit the selected height .
In general , when a user changes the number of rows per page . having the layout flex so the whole page can be scrolled , I feel is a better user experience and having headers sticky in such a use case would be very benificial.

[cherniavskii]

I don't think this sticky column header thing is possible in Data Grid v7.
In v6, the first scrollable ancestor of the column header element was outside of the Data Grid.
In v7, the first scrollable ancestor of the column header element is the virtual scroller since the header is not rendered outside of it anymore.
position: sticky only works with the first scrollable ancestor. To achieve a behavior similar to what was demonstrated in this PR, we need to disable scrolling in the virtual scroller 🙃
Here's a demo – note that the horizontal scroll is broken: https://stackblitz.com/edit/react-fa4n5o?file=Demo.tsx