@mui/x-data-grid 7.0.0-beta.6 → 7.0.0-beta.7

package/modern/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps"];
+const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
@@ -32,7 +32,8 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
       label,
       resizable,
       draggableContainerProps,
-      columnHeaderSeparatorProps
+      columnHeaderSeparatorProps,
+      style
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
@@ -55,18 +56,18 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: handleRef,
     className: clsx(classes.root, headerClassName),
-    style: {
+    style: _extends({}, style, {
       height,
       width,
       minWidth: width,
       maxWidth: width
-    },
+    }),
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,

package/modern/components/containers/GridRootStyles.js

@@ -307,14 +307,6 @@ export const GridRootStyles = styled('div', {
       borderBottomStyle: 'solid',
       boxSizing: 'border-box'
     },
-    [`& .${c['columnHeader--filledGroup']}.${c['columnHeader--showColumnBorder']} .${c.columnHeaderTitleContainer}`]: {
-      borderBottom: `none`
-    },
-    [`& .${c['columnHeader--filledGroup']}.${c['columnHeader--showColumnBorder']}`]: {
-      borderBottomWidth: '1px',
-      borderBottomStyle: 'solid',
-      boxSizing: 'border-box'
-    },
     [`& .${c.sortIcon}, & .${c.filterIcon}`]: {
       fontSize: 'inherit'
     },
@@ -338,6 +330,12 @@ export const GridRootStyles = styled('div', {
     [`& .${c['columnHeader--moving']}`]: {
       backgroundColor: (t.vars || t).palette.action.hover
     },
+    [`& .${c['columnHeader--pinnedLeft']}, & .${c['columnHeader--pinnedRight']}`]: {
+      position: 'sticky',
+      zIndex: 4,
+      // Should be above the column separator
+      background: 'var(--DataGrid-pinnedBackground)'
+    },
     [`& .${c.columnSeparator}`]: {
       visibility: 'hidden',
       position: 'absolute',
@@ -428,9 +426,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c['container--top']}, & .${c['container--bottom']}`]: {
       '[role=row]': {
         background: 'var(--DataGrid-containerBackground)'
-      },
-      [`.${c.pinnedColumnHeaders} [role=row]`]: {
-        background: 'var(--DataGrid-pinnedBackground)'
       }
     },
     /* Cell styles */
@@ -520,20 +515,16 @@ export const GridRootStyles = styled('div', {
     [`.${c.withBorderColor}`]: {
       borderColor
     },
-    [`& .${c['cell--withLeftBorder']}`]: {
+    [`& .${c['cell--withLeftBorder']}, & .${c['columnHeader--withLeftBorder']}`]: {
       borderLeftColor: 'var(--DataGrid-rowBorderColor)',
       borderLeftWidth: '1px',
       borderLeftStyle: 'solid'
     },
-    [`& .${c['cell--withRightBorder']}`]: {
+    [`& .${c['cell--withRightBorder']}, & .${c['columnHeader--withRightBorder']}`]: {
       borderRightColor: 'var(--DataGrid-rowBorderColor)',
       borderRightWidth: '1px',
       borderRightStyle: 'solid'
     },
-    [`& .${c['columnHeader--withRightBorder']}`]: {
-      borderRightWidth: '1px',
-      borderRightStyle: 'solid'
-    },
     [`& .${c['cell--flex']}`]: {
       display: 'flex',
       alignItems: 'center',
@@ -634,12 +625,13 @@ export const GridRootStyles = styled('div', {
         borderTop: '1px solid var(--DataGrid-rowBorderColor)'
       },
       [`&.${c['scrollbarFiller--pinnedRight']}`]: {
-        backgroundColor: 'var(--DataGrid-pinnedBackground)'
-      },
-      [`&.${c['scrollbarFiller--pinnedRight']}:not(.${c['scrollbarFiller--header']})`]: {
+        backgroundColor: 'var(--DataGrid-pinnedBackground)',
         position: 'sticky',
         right: 0
       }
+    },
+    [`& .${c.filler}`]: {
+      flex: 1
     }
   });
   return gridStyle;

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -35,6 +35,8 @@ const ScrollbarVertical = styled(Scrollbar)({
   height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-topContainerHeight) - var(--DataGrid-bottomContainerHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
   overflowY: 'auto',
   overflowX: 'hidden',
+  // Disable focus-visible style, it's a scrollbar.
+  outline: 0,
   '& > div': {
     width: 'var(--size)'
   },
@@ -46,6 +48,8 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   height: 'var(--size)',
   overflowY: 'hidden',
   overflowX: 'auto',
+  // Disable focus-visible style, it's a scrollbar.
+  outline: 0,
   '& > div': {
     height: 'var(--size)'
   },

package/modern/components/virtualization/GridVirtualScroller.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { GridScrollArea } from '../GridScrollArea';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -66,7 +67,11 @@ function GridVirtualScroller(props) {
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
-    children: [/*#__PURE__*/_jsxs(Scroller, _extends({
+    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "right"
+    }), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {
       ownerState: rootProps,

package/modern/components/virtualization/GridVirtualScrollerFiller.js

@@ -38,6 +38,7 @@ function GridVirtualScrollerFiller() {
     viewportOuterSize,
     minimumSize,
     hasScrollX,
+    hasScrollY,
     scrollbarSize,
     leftPinnedWidth,
     rightPinnedWidth
@@ -62,7 +63,7 @@ function GridVirtualScrollerFiller() {
     }), /*#__PURE__*/_jsx(Main, {}), rightPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedRight, {
       className: gridClasses['filler--pinnedRight'],
       style: {
-        width: rightPinnedWidth
+        width: rightPinnedWidth + (hasScrollY ? scrollbarSize : 0)
       }
     })]
   });

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { styled, useTheme } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -13,16 +12,11 @@ import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
+import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
+import { GridColumnHeaderSeparatorSides } from '../../../components/columnHeaders/GridColumnHeaderSeparator';
 import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const SpaceFiller = styled('div')({
-  /* GridRootStyles conflict */
-  '&&&': {
-    padding: 0,
-    width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
-  }
-});
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
@@ -33,7 +27,6 @@ export const GridColumnHeaderRow = styled('div', {
 });
 export const useGridColumnHeaders = props => {
   const {
-    innerRef: innerRefProp,
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
@@ -53,20 +46,30 @@ export const useGridColumnHeaders = props => {
   const theme = useTheme();
   const rootProps = useGridRootProps();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
-  const innerRef = React.useRef(null);
-  const handleInnerRef = useForkRef(innerRefProp, innerRef);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
   React.useEffect(() => {
-    apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
   }, [apiRef]);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
   const handleColumnReorderStop = React.useCallback(() => setDragCol(''), []);
+  const leftRenderContext = React.useMemo(() => {
+    return pinnedColumns.left.length ? {
+      firstColumnIndex: 0,
+      lastColumnIndex: pinnedColumns.left.length
+    } : null;
+  }, [pinnedColumns.left.length]);
+  const rightRenderContext = React.useMemo(() => {
+    return pinnedColumns.right.length ? {
+      firstColumnIndex: visibleColumns.length - pinnedColumns.right.length,
+      lastColumnIndex: visibleColumns.length
+    } : null;
+  }, [pinnedColumns.right.length, visibleColumns.length]);
   useGridApiEventHandler(apiRef, 'columnResizeStart', handleColumnResizeStart);
   useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
   useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
@@ -99,8 +102,9 @@ export const useGridColumnHeaders = props => {
         style: {
           width: leftOffsetWidth
         }
-      }), children, isNotPinned && /*#__PURE__*/_jsx(SpaceFiller, {
-        className: gridClasses.columnHeader
+      }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
+        role: "presentation",
+        className: gridClasses.filler
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         header: true,
         borderTop: borderTop,
@@ -108,6 +112,27 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
+  const getCellOffsetStyle = ({
+    pinnedPosition,
+    columnIndex,
+    computedWidth
+  }) => {
+    let style;
+    if (pinnedPosition === 'left' || pinnedPosition === 'right') {
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
+      if (pinnedPosition === 'left') {
+        style = {
+          left: pinnedOffset
+        };
+      }
+      if (pinnedPosition === 'right') {
+        style = {
+          right: pinnedOffset
+        };
+      }
+    }
+    return style;
+  };
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -121,6 +146,12 @@ export const useGridColumnHeaders = props => {
       const tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field || isFirstColumn && !hasOtherElementInTabSequence ? 0 : -1;
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
+      const pinnedPosition = params?.position;
+      const style = getCellOffsetStyle({
+        pinnedPosition,
+        columnIndex,
+        computedWidth: colDef.computedWidth
+      });
       columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -130,118 +161,174 @@ export const useGridColumnHeaders = props => {
         colIndex: columnIndex,
         isResizing: resizeCol === colDef.field,
         hasFocus: hasFocus,
-        tabIndex: tabIndex
+        tabIndex: tabIndex,
+        pinnedPosition: pinnedPosition,
+        style: style,
+        indexInSection: i,
+        sectionLength: renderedColumns.length
       }, other), colDef.field));
     }
-    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+    return getFillers(params, columns, 0);
+  };
+  const getColumnHeadersRow = () => {
+    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
-      children: getFillers(params, columns, 0)
+      children: [leftRenderContext && getColumnHeaders({
+        position: GridPinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true
+      }), getColumnHeaders({
+        renderContext,
+        minFirstColumn: pinnedColumns.left.length,
+        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+      }), rightRenderContext && getColumnHeaders({
+        position: GridPinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true,
+        separatorSide: GridColumnHeaderSeparatorSides.Left
+      })]
     });
   };
-  const getColumnGroupHeaders = params => {
-    if (headerGroupingMaxDepth === 0) {
-      return null;
-    }
+  const getColumnGroupHeaders = ({
+    depth,
+    params
+  }) => {
     const columnsToRender = getColumnsToRender(params);
     if (columnsToRender.renderedColumns.length === 0) {
       return null;
     }
     const {
+      renderedColumns,
       firstColumnToRender,
       lastColumnToRender
     } = columnsToRender;
-    const columns = [];
-    const headerToRender = [];
-    for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
-      const rowStructure = columnGroupsHeaderStructure[depth];
-      const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-      const firstGroupToRender = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
-      const firstGroupIndex = rowStructure.findIndex(({
-        groupId,
-        columnFields
-      }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
-      const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-      const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
-      const lastGroupIndex = rowStructure.findIndex(({
-        groupId,
-        columnFields
-      }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
-      const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
-        return _extends({}, groupStructure, {
-          columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
-        });
-      }).filter(groupStructure => groupStructure.columnFields.length > 0);
-      const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
-      const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
-      const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
-        const column = apiRef.current.getColumn(field);
-        return acc + (column.computedWidth ?? 0);
-      }, 0);
-      let columnIndex = firstColumnToRender;
-      const elements = visibleColumnGroupHeader.map(({
-        groupId,
-        columnFields
-      }) => {
-        const hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
-        const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
-        const headerInfo = {
-          groupId,
-          width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
-          fields: columnFields,
-          colIndex: columnIndex,
-          hasFocus,
-          tabIndex
-        };
-        columnIndex += columnFields.length;
-        return headerInfo;
-      });
-      headerToRender.push({
-        leftOverflow,
-        elements
+    const rowStructure = columnGroupsHeaderStructure[depth];
+    const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
+    const firstGroupToRender = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
+    const firstGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
+    const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
+    const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
+    const lastGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
+    const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
+      return _extends({}, groupStructure, {
+        columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
       });
-    }
-    headerToRender.forEach((depthInfo, depthIndex) => {
-      const children = depthInfo.elements.map(({
+    }).filter(groupStructure => groupStructure.columnFields.length > 0);
+    const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
+    const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
+    const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
+      const column = apiRef.current.getColumn(field);
+      return acc + (column.computedWidth ?? 0);
+    }, 0);
+    let columnIndex = firstColumnToRender;
+    const children = visibleColumnGroupHeader.map(({
+      groupId,
+      columnFields
+    }, index) => {
+      const hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
+      const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
+      const headerInfo = {
         groupId,
-        width,
-        fields,
-        colIndex,
+        width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
+        fields: columnFields,
+        colIndex: columnIndex,
         hasFocus,
         tabIndex
-      }, groupIndex) => {
-        return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
-          groupId: groupId,
-          width: width,
-          fields: fields,
-          colIndex: colIndex,
-          depth: depthIndex,
-          isLastColumn: colIndex === visibleColumns.length - fields.length,
-          maxDepth: headerToRender.length,
-          height: dimensions.headerHeight,
-          hasFocus: hasFocus,
-          tabIndex: tabIndex
-        }, groupIndex);
+      };
+      const pinnedPosition = params.position;
+      const style = getCellOffsetStyle({
+        pinnedPosition,
+        columnIndex,
+        computedWidth: headerInfo.width
       });
-      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+      columnIndex += columnFields.length;
+      let indexInSection = index;
+      if (pinnedPosition === 'left') {
+        // Group headers can expand to multiple columns, we need to adjust the index
+        indexInSection = columnIndex - 1;
+      }
+      return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
+        groupId: groupId,
+        width: headerInfo.width,
+        fields: headerInfo.fields,
+        colIndex: headerInfo.colIndex,
+        depth: depth,
+        isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
+        maxDepth: headerGroupingMaxDepth,
+        height: dimensions.headerHeight,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        pinnedPosition: pinnedPosition,
+        style: style,
+        indexInSection: indexInSection,
+        sectionLength: renderedColumns.length
+      }, index);
+    });
+    return getFillers(params, children, leftOverflow);
+  };
+  const getColumnGroupHeadersRows = () => {
+    if (headerGroupingMaxDepth === 0) {
+      return null;
+    }
+    const headerRows = [];
+    for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
+      headerRows.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
         role: "row",
-        "aria-rowindex": depthIndex + 1,
+        "aria-rowindex": depth + 1,
         ownerState: rootProps,
-        children: getFillers(params, children, depthInfo.leftOverflow)
-      }, depthIndex));
-    });
-    return columns;
+        children: [leftRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: GridPinnedColumnPosition.LEFT,
+            renderContext: leftRenderContext,
+            minFirstColumn: leftRenderContext.firstColumnIndex,
+            maxLastColumn: leftRenderContext.lastColumnIndex
+          }
+        }), getColumnGroupHeaders({
+          depth,
+          params: {
+            renderContext
+          }
+        }), rightRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: GridPinnedColumnPosition.RIGHT,
+            renderContext: rightRenderContext,
+            minFirstColumn: rightRenderContext.firstColumnIndex,
+            maxLastColumn: rightRenderContext.lastColumnIndex
+          }
+        })]
+      }, depth));
+    }
+    return headerRows;
   };
   return {
     renderContext,
+    leftRenderContext,
+    rightRenderContext,
+    pinnedColumns,
+    visibleColumns,
+    getCellOffsetStyle,
     getFillers,
-    getColumnHeaders,
+    getColumnHeadersRow,
     getColumnsToRender,
-    getColumnGroupHeaders,
+    getColumnGroupHeadersRows,
     isDragging: !!dragCol,
     getInnerProps: () => ({
-      ref: handleInnerRef,
       role: 'rowgroup'
     })
   };

package/modern/hooks/features/columnResize/columnResizeSelector.js

@@ -0,0 +1,3 @@
+import { createSelector } from '../../../utils/createSelector';
+export const gridColumnResizeSelector = state => state.columnResize;
+export const gridResizingColumnFieldSelector = createSelector(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/modern/hooks/features/columnResize/columnResizeState.js

@@ -0,0 +1 @@
+export {};

package/modern/hooks/features/columnResize/gridColumnResizeApi.js

@@ -0,0 +1,10 @@
+export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
+  includeHeaders: true,
+  includeOutliers: false,
+  outliersFactor: 1.5,
+  expand: false
+};
+
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */

package/modern/hooks/features/columnResize/index.js

@@ -0,0 +1,3 @@
+export * from './columnResizeSelector';
+export * from './columnResizeState';
+export * from './gridColumnResizeApi';