[DataGrid] Sticky headers

packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx

@@ -12,9 +12,11 @@ import {
   GridOverlays,
 } from '@mui/x-data-grid';
 import {
+  GridHeaders,
   GridVirtualScroller,
   GridVirtualScrollerContent,
   GridVirtualScrollerRenderZone,
+  DataGridVirtualScrollerProps,
   useGridVirtualScroller,
   calculatePinnedRowsHeight,
 } from '@mui/x-data-grid/internals';
@@ -191,15 +193,13 @@ const VirtualScrollerPinnedRowsRenderZone = styled('div')({
   position: 'absolute',
 });
 
-interface DataGridProVirtualScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
-  disableVirtualization?: boolean;
-}
+type DataGridProVirtualScrollerProps = DataGridVirtualScrollerProps;
 
 const DataGridProVirtualScroller = React.forwardRef<
   HTMLDivElement,
   DataGridProVirtualScrollerProps
 >(function DataGridProVirtualScroller(props, ref) {
-  const { className, disableVirtualization, ...other } = props;
+  const { className, disableVirtualization, ColumnHeadersProps, ...other } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
@@ -387,6 +387,7 @@ const DataGridProVirtualScroller = React.forwardRef<
 
   return (
     <GridVirtualScroller {...getRootProps(other)}>
+      <GridHeaders contentProps={contentProps} ColumnHeadersProps={ColumnHeadersProps} />
       <GridOverlays />
       {topPinnedRowsData.length > 0 ? (
         <VirtualScrollerPinnedRows

packages/grid/x-data-grid/src/components/DataGridVirtualScroller.tsx

@@ -4,24 +4,30 @@ import { GridVirtualScrollerContent } from './virtualization/GridVirtualScroller
 import { GridVirtualScrollerRenderZone } from './virtualization/GridVirtualScrollerRenderZone';
 import { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
 import { GridOverlays } from './base/GridOverlays';
+import { GridHeaders } from './GridHeaders';
 
-interface DataGridVirtualScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
-  disableVirtualization?: boolean;
+export interface DataGridVirtualScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
+  ref: React.Ref<HTMLDivElement>;
+  disableVirtualization: boolean;
+  ColumnHeadersProps?: Record<string, any>;
 }
 
 const DataGridVirtualScroller = React.forwardRef<HTMLDivElement, DataGridVirtualScrollerProps>(
   function DataGridVirtualScroller(props, ref) {
-    const { className, disableVirtualization, ...other } = props;
+    const { className, disableVirtualization, ColumnHeadersProps, ...other } = props;
 
     const { getRootProps, getContentProps, getRenderZoneProps, getRows } = useGridVirtualScroller({
       ref,
       disableVirtualization,
     });
 
+    const contentProps = getContentProps();
+
     return (
       <GridVirtualScroller className={className} {...getRootProps(other)}>
+        <GridHeaders contentProps={contentProps} ColumnHeadersProps={ColumnHeadersProps} />
         <GridOverlays />
-        <GridVirtualScrollerContent {...getContentProps()}>
+        <GridVirtualScrollerContent {...contentProps}>
           <GridVirtualScrollerRenderZone {...getRenderZoneProps()}>
             {getRows()}
           </GridVirtualScrollerRenderZone>

packages/grid/x-data-grid/src/components/GridHeaders.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import {
+  gridColumnPositionsSelector,
+  gridColumnVisibilityModelSelector,
+  gridVisibleColumnDefinitionsSelector,
+} from '../hooks/features/columns/gridColumnsSelector';
+import { gridFilterActiveItemsLookupSelector } from '../hooks/features/filter/gridFilterSelector';
+import { gridSortColumnLookupSelector } from '../hooks/features/sorting/gridSortingSelector';
+import {
+  gridTabIndexColumnHeaderSelector,
+  gridTabIndexCellSelector,
+  gridFocusColumnHeaderSelector,
+  unstable_gridTabIndexColumnGroupHeaderSelector,
+  unstable_gridFocusColumnGroupHeaderSelector,
+} from '../hooks/features/focus/gridFocusStateSelector';
+import { gridDensityFactorSelector } from '../hooks/features/density/densitySelector';
+import {
+  gridColumnGroupsHeaderMaxDepthSelector,
+  gridColumnGroupsHeaderStructureSelector,
+} from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { gridColumnMenuSelector } from '../hooks/features/columnMenu/columnMenuSelector';
+import type { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+
+type Props = {
+  contentProps: ReturnType<ReturnType<typeof useGridVirtualScroller>['getContentProps']>;
+  ColumnHeadersProps?: Record<string, any>;
+};
+
+export function GridHeaders(props: Props) {
+  const { contentProps, ColumnHeadersProps } = props;
+
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const columnGroupHeaderTabIndexState = useGridSelector(
+    apiRef,
+    unstable_gridTabIndexColumnGroupHeaderSelector,
+  );
+
+  const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  const columnGroupHeaderFocus = useGridSelector(
+    apiRef,
+    unstable_gridFocusColumnGroupHeaderSelector,
+  );
+
+  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+
+  const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  const columnGroupsHeaderStructure = useGridSelector(
+    apiRef,
+    gridColumnGroupsHeaderStructureSelector,
+  );
+
+  const hasOtherElementInTabSequence = !(
+    columnGroupHeaderTabIndexState === null &&
+    columnHeaderTabIndexState === null &&
+    cellTabIndexState === null
+  );
+
+  const columnHeadersRef = React.useRef<HTMLDivElement>(null);
+  const columnsContainerRef = React.useRef<HTMLDivElement>(null);
+
+  apiRef.current.register('private', {
+    columnHeadersContainerElementRef: columnsContainerRef,
+    columnHeadersElementRef: columnHeadersRef,
+  });
+
+  React.useEffect(() => {
+    if (columnsContainerRef.current) {
+      columnsContainerRef.current.style.width = `${contentProps.style.width}px`;
+    }
+  }, [contentProps.style.width]);
+
+  return (
+    <rootProps.slots.columnHeaders
+      ref={columnsContainerRef}
+      innerRef={columnHeadersRef}
+      visibleColumns={visibleColumns}
+      filterColumnLookup={filterColumnLookup}
+      sortColumnLookup={sortColumnLookup}
+      columnPositions={columnPositions}
+      columnHeaderTabIndexState={columnHeaderTabIndexState}
+      columnGroupHeaderTabIndexState={columnGroupHeaderTabIndexState}
+      columnHeaderFocus={columnHeaderFocus}
+      columnGroupHeaderFocus={columnGroupHeaderFocus}
+      densityFactor={densityFactor}
+      headerGroupingMaxDepth={headerGroupingMaxDepth}
+      columnMenuState={columnMenuState}
+      columnVisibility={columnVisibility}
+      columnGroupsHeaderStructure={columnGroupsHeaderStructure}
+      hasOtherElementInTabSequence={hasOtherElementInTabSequence}
+      // style={{ width: contentProps.style.width }}
+      {...ColumnHeadersProps}
+    />
+  );
+}

packages/grid/x-data-grid/src/components/base/GridBody.tsx

@@ -2,39 +2,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import {
-  gridColumnPositionsSelector,
-  gridColumnVisibilityModelSelector,
-  gridVisibleColumnDefinitionsSelector,
-} from '../../hooks/features/columns/gridColumnsSelector';
-import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector';
-import { gridSortColumnLookupSelector } from '../../hooks/features/sorting/gridSortingSelector';
-import {
-  gridTabIndexColumnHeaderSelector,
-  gridTabIndexCellSelector,
-  gridFocusColumnHeaderSelector,
-  unstable_gridTabIndexColumnGroupHeaderSelector,
-  unstable_gridFocusColumnGroupHeaderSelector,
-} from '../../hooks/features/focus/gridFocusStateSelector';
-import { gridDensityFactorSelector } from '../../hooks/features/density/densitySelector';
-import {
-  gridColumnGroupsHeaderMaxDepthSelector,
-  gridColumnGroupsHeaderStructureSelector,
-} from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
-import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMenuSelector';
+import { DataGridVirtualScrollerProps } from '../DataGridVirtualScroller';
 
 interface GridBodyProps {
   children?: React.ReactNode;
   ColumnHeadersProps?: Record<string, any>;
-  VirtualScrollerComponent: React.JSXElementConstructor<
-    React.HTMLAttributes<HTMLDivElement> & {
-      ref: React.Ref<HTMLDivElement>;
-      disableVirtualization: boolean;
-    }
-  >;
+  VirtualScrollerComponent: React.JSXElementConstructor<DataGridVirtualScrollerProps>;
 }
 
 function GridBody(props: GridBodyProps) {
@@ -43,39 +18,6 @@ function GridBody(props: GridBodyProps) {
   const rootProps = useGridRootProps();
   const rootRef = React.useRef<HTMLDivElement>(null);
 
-  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
-  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
-  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
-  const columnGroupHeaderTabIndexState = useGridSelector(
-    apiRef,
-    unstable_gridTabIndexColumnGroupHeaderSelector,
-  );
-
-  const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
-  const columnGroupHeaderFocus = useGridSelector(
-    apiRef,
-    unstable_gridFocusColumnGroupHeaderSelector,
-  );
-
-  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
-
-  const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
-  const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
-  const columnGroupsHeaderStructure = useGridSelector(
-    apiRef,
-    gridColumnGroupsHeaderStructureSelector,
-  );
-
-  const hasOtherElementInTabSequence = !(
-    columnGroupHeaderTabIndexState === null &&
-    columnHeaderTabIndexState === null &&
-    cellTabIndexState === null
-  );
-
   const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(
     rootProps.disableVirtualization,
   );
@@ -132,13 +74,9 @@ function GridBody(props: GridBodyProps) {
   apiRef.current.unstable_disableVirtualization = disableVirtualization;
   apiRef.current.unstable_enableVirtualization = enableVirtualization;
 
-  const columnHeadersRef = React.useRef<HTMLDivElement>(null);
-  const columnsContainerRef = React.useRef<HTMLDivElement>(null);
   const virtualScrollerRef = React.useRef<HTMLDivElement>(null);
 
   apiRef.current.register('private', {
-    columnHeadersContainerElementRef: columnsContainerRef,
-    columnHeadersElementRef: columnHeadersRef,
     virtualScrollerRef,
     mainElementRef: rootRef,
   });
@@ -147,25 +85,6 @@ function GridBody(props: GridBodyProps) {
 
   return (
     <GridMainContainer ref={rootRef}>
-      <rootProps.slots.columnHeaders
-        ref={columnsContainerRef}
-        innerRef={columnHeadersRef}
-        visibleColumns={visibleColumns}
-        filterColumnLookup={filterColumnLookup}
-        sortColumnLookup={sortColumnLookup}
-        columnPositions={columnPositions}
-        columnHeaderTabIndexState={columnHeaderTabIndexState}
-        columnGroupHeaderTabIndexState={columnGroupHeaderTabIndexState}
-        columnHeaderFocus={columnHeaderFocus}
-        columnGroupHeaderFocus={columnGroupHeaderFocus}
-        densityFactor={densityFactor}
-        headerGroupingMaxDepth={headerGroupingMaxDepth}
-        columnMenuState={columnMenuState}
-        columnVisibility={columnVisibility}
-        columnGroupsHeaderStructure={columnGroupsHeaderStructure}
-        hasOtherElementInTabSequence={hasOtherElementInTabSequence}
-        {...ColumnHeadersProps}
-      />
       {hasDimensions && (
         <VirtualScrollerComponent
           // The content is only rendered after dimensions are computed because
@@ -175,6 +94,7 @@ function GridBody(props: GridBodyProps) {
           // the `onFetchRows` prop won't be called during mount.
           ref={virtualScrollerRef}
           disableVirtualization={isVirtualizationDisabled}
+          ColumnHeadersProps={ColumnHeadersProps}
         />
       )}
 

packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx

@@ -23,8 +23,9 @@ const GridColumnHeadersRoot = styled('div', {
   slot: 'ColumnHeaders',
   overridesResolver: (props, styles) => styles.columnHeaders,
 })<{ ownerState: OwnerState }>({
-  position: 'relative',
-  overflow: 'hidden',
+  position: 'sticky',
+  top: 0,
+  zIndex: 2,
   display: 'flex',
   alignItems: 'center',
   boxSizing: 'border-box',