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

package/components/columnHeaders/GridColumnGroupHeader.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
 interface GridColumnGroupHeaderProps {
     groupId: string | null;
     width: number;
@@ -10,6 +11,10 @@ interface GridColumnGroupHeaderProps {
     height: number;
     hasFocus?: boolean;
     tabIndex: 0 | -1;
+    pinnedPosition?: GridPinnedColumnPosition;
+    style?: React.CSSProperties;
+    indexInSection: number;
+    sectionLength: number;
 }
 declare function GridColumnGroupHeader(props: GridColumnGroupHeaderProps): React.JSX.Element;
 export { GridColumnGroupHeader };

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -8,17 +8,20 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { isEventTargetInPortal } from '../../utils/domUtils';
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
     headerAlign,
     isDragging,
-    showColumnBorder,
-    groupId
+    showLeftBorder,
+    showRightBorder,
+    groupId,
+    pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showColumnBorder && 'columnHeader--showColumnBorder', showColumnBorder && 'columnHeader--withRightBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup'],
+    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -37,7 +40,11 @@ function GridColumnGroupHeader(props) {
     colIndex,
     hasFocus,
     tabIndex,
-    isLastColumn
+    isLastColumn,
+    pinnedPosition,
+    style,
+    indexInSection,
+    sectionLength
   } = props;
   const rootProps = useGridRootProps();
   const headerCellRef = React.useRef(null);
@@ -64,10 +71,12 @@ function GridColumnGroupHeader(props) {
   if (groupId && render) {
     headerComponent = render(renderParams);
   }
-  const showColumnBorder = rootProps.showColumnVerticalBorder;
+  const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = _extends({}, props, {
     classes: rootProps.classes,
-    showColumnBorder,
+    showLeftBorder,
+    showRightBorder,
     headerAlign,
     depth,
     isDragging: false
@@ -118,12 +127,13 @@ function GridColumnGroupHeader(props) {
     width: width,
     columnMenuIconButton: null,
     columnTitleIconButtons: null,
-    resizable: false,
+    resizable: true,
     label: label,
     "aria-colspan": fields.length
     // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=
     ,
-    "data-fields": `|-${fields.join('-|-')}-|`
+    "data-fields": `|-${fields.join('-|-')}-|`,
+    style: style
   }, mouseEventsHandlers));
 }
 export { GridColumnGroupHeader };

package/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { GridStateColDef } from '../../models/colDef/gridColDef';
 import { GridSortDirection } from '../../models/gridSortModel';
 import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator';
+import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
 interface GridColumnHeaderItemProps {
     colIndex: number;
     colDef: GridStateColDef;
@@ -16,6 +17,10 @@ interface GridColumnHeaderItemProps {
     tabIndex: 0 | -1;
     disableReorder?: boolean;
     separatorSide?: GridColumnHeaderSeparatorProps['side'];
+    pinnedPosition?: GridPinnedColumnPosition;
+    style?: React.CSSProperties;
+    indexInSection: number;
+    sectionLength: number;
 }
 declare function GridColumnHeaderItem(props: GridColumnHeaderItemProps): React.JSX.Element;
 declare namespace GridColumnHeaderItem {

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -11,6 +11,7 @@ import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { isEventTargetInPortal } from '../../utils/domUtils';
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -20,14 +21,16 @@ const useUtilityClasses = ownerState => {
     isDragging,
     sortDirection,
     showRightBorder,
-    filterItemsCounter
+    showLeftBorder,
+    filterItemsCounter,
+    pinnedPosition
   } = ownerState;
   const isColumnSorted = sortDirection != null;
   const isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0;
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = colDef.type === 'number';
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder'],
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -48,7 +51,11 @@ function GridColumnHeaderItem(props) {
     hasFocus,
     tabIndex,
     disableReorder,
-    separatorSide
+    separatorSide,
+    style,
+    pinnedPosition,
+    indexInSection,
+    sectionLength
   } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -62,9 +69,12 @@ function GridColumnHeaderItem(props) {
   if (colDef.renderHeader) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
   }
+  const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = _extends({}, props, {
     classes: rootProps.classes,
-    showRightBorder: rootProps.showColumnVerticalBorder
+    showRightBorder,
+    showLeftBorder
   });
   const classes = useUtilityClasses(ownerState);
   const publish = React.useCallback(eventName => event => {
@@ -144,7 +154,7 @@ function GridColumnHeaderItem(props) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus == null || elementToFocus.focus();
-      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
   }, [apiRef, hasFocus]);
   const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
@@ -176,7 +186,8 @@ function GridColumnHeaderItem(props) {
     "data-field": colDef.field,
     columnMenu: columnMenu,
     draggableContainerProps: draggableEventHandlers,
-    columnHeaderSeparatorProps: columnHeaderSeparatorProps
+    columnHeaderSeparatorProps: columnHeaderSeparatorProps,
+    style: style
   }, mouseEventsHandlers));
 }
 process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
@@ -191,11 +202,15 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   filterItemsCounter: PropTypes.number,
   hasFocus: PropTypes.bool,
   headerHeight: PropTypes.number.isRequired,
+  indexInSection: PropTypes.number.isRequired,
   isDragging: PropTypes.bool.isRequired,
   isResizing: PropTypes.bool.isRequired,
+  pinnedPosition: PropTypes.oneOf(['left', 'right']),
+  sectionLength: PropTypes.number.isRequired,
   separatorSide: PropTypes.oneOf(['left', 'right']),
   sortDirection: PropTypes.oneOf(['asc', 'desc']),
   sortIndex: PropTypes.number,
+  style: PropTypes.object,
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired
 } : void 0;
 const Memoized = fastMemo(GridColumnHeaderItem);

package/components/columnHeaders/GridGenericColumnHeaderItem.d.ts

@@ -26,6 +26,7 @@ interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'header
     label: string;
     draggableContainerProps?: Partial<React.HTMLProps<HTMLDivElement>>;
     columnHeaderSeparatorProps?: Partial<GridColumnHeaderSeparatorProps>;
+    style?: React.CSSProperties;
 }
 declare const GridGenericColumnHeaderItem: React.ForwardRefExoticComponent<GridGenericColumnHeaderItemProps & React.RefAttributes<unknown>>;
 export { GridGenericColumnHeaderItem };

package/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 == null || 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/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/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/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/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/constants/gridClasses.d.ts

@@ -148,14 +148,12 @@ export interface GridClasses {
      * Styles applied to the column header if the column has a filter applied to it.
      */
     'columnHeader--filtered': string;
+    'columnHeader--pinnedLeft': string;
+    'columnHeader--pinnedRight': string;
     /**
      * Styles applied to the column header element.
      */
     columnHeader: string;
-    /**
-     * Styles applied to the column group header element.
-     */
-    columnGroupHeader: string;
     /**
      * Styles applied to the header checkbox cell element.
      */
@@ -168,10 +166,6 @@ export interface GridClasses {
      * Styles applied to the row's draggable placeholder element inside the special row reorder cell.
      */
     rowReorderCellPlaceholder: string;
-    /**
-     * Styles applied to the column headers wrapper if a column is being dragged.
-     */
-    columnHeaderDropZone: string;
     /**
      * Styles applied to the column header's title element;
      */
@@ -192,22 +186,10 @@ export interface GridClasses {
      * Styles applied to the empty column group header cell.
      */
     'columnHeader--emptyGroup': string;
-    /**
-     * Styles applied to the column group header cell when show column border.
-     */
-    'columnHeader--showColumnBorder': string;
     /**
      * Styles applied to the column headers.
      */
     columnHeaders: string;
-    /**
-     * Styles applied to the column headers's inner element.
-     */
-    columnHeadersInner: string;
-    /**
-     * Styles applied to the column headers's inner element if there is a horizontal scrollbar.
-     */
-    'columnHeadersInner--scrollable': string;
     /**
      * Styles applied to the column header separator if the column is resizable.
      */
@@ -302,14 +284,17 @@ export interface GridClasses {
     editBooleanCell: string;
     /**
      * Styles applied to the filler row.
+     * @ignore - do not document.
      */
     filler: string;
     /**
      * Styles applied to the filler row pinned left section.
+     * @ignore - do not document.
      */
     'filler--pinnedLeft': string;
     /**
      * Styles applied to the filler row pinned right section.
+     * @ignore - do not document.
      */
     'filler--pinnedRight': string;
     /**
@@ -420,18 +405,6 @@ export interface GridClasses {
      * Styles applied to the pinned columns.
      */
     pinnedColumns: string;
-    /**
-     * Styles applied to the pinned column headers.
-     */
-    pinnedColumnHeaders: string;
-    /**
-     * Styles applied to the left pinned column headers.
-     */
-    'pinnedColumnHeaders--left': string;
-    /**
-     * Styles applied to the right pinned column headers.
-     */
-    'pinnedColumnHeaders--right': string;
     /**
      * Styles applied to the root element.
      */
@@ -582,6 +555,7 @@ export interface GridClasses {
      * Styles applied the column header if `showColumnVerticalBorder={true}`.
      */
     'columnHeader--withRightBorder': string;
+    'columnHeader--withLeftBorder': string;
     /**
      * Styles applied to the root of the grouping column of the tree data.
      */

package/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/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GridCellIndexCoordinates, GridScrollParams, GridColDef, GridCellCoordinates, GridCellParams, GridEditMode } from '../../../models';
 import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
 import { GridExportStateParams, GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
-import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
+import { GridHydrateColumnsValue, GridPinnedColumnPosition } from '../../features/columns/gridColumnsInterfaces';
 import { GridRowEntry, GridRowId } from '../../../models/gridRows';
 import { GridHydrateRowsValue } from '../../features/rows/gridRowsInterfaces';
 import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
@@ -75,6 +75,10 @@ export interface GridPipeProcessingLookup {
             editMode: GridEditMode;
         };
     };
+    isColumnPinned: {
+        value: GridPinnedColumnPosition | false;
+        context: string;
+    };
 }
 export type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
     context: any;

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-import { GridRenderContext } from '../../../models/params/gridScrollParams';
+import type { GridColumnsRenderContext } from '../../../models/params/gridScrollParams';
 import { GridStateColDef } from '../../../models/colDef/gridColDef';
 import { GridSortColumnLookup } from '../sorting';
 import { GridFilterActiveItemsLookup } from '../filter';
@@ -9,7 +9,6 @@ import { GridColumnMenuState } from '../columnMenu';
 import { GridPinnedColumnPosition, GridColumnVisibilityModel } from '../columns';
 import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces';
 export interface UseGridColumnHeadersProps {
-    innerRef?: React.Ref<HTMLDivElement>;
     visibleColumns: GridStateColDef[];
     sortColumnLookup: GridSortColumnLookup;
     filterColumnLookup: GridFilterActiveItemsLookup;
@@ -25,7 +24,7 @@ export interface UseGridColumnHeadersProps {
 }
 export interface GetHeadersParams {
     position?: GridPinnedColumnPosition;
-    renderContext?: GridRenderContext;
+    renderContext?: GridColumnsRenderContext;
     minFirstColumn?: number;
     maxLastColumn?: number;
 }
@@ -34,18 +33,35 @@ export declare const GridColumnHeaderRow: import("@emotion/styled").StyledCompon
     ownerState: OwnerState;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
-    renderContext: GridRenderContext;
+    renderContext: GridColumnsRenderContext;
+    leftRenderContext: {
+        firstColumnIndex: number;
+        lastColumnIndex: number;
+    } | null;
+    rightRenderContext: {
+        firstColumnIndex: number;
+        lastColumnIndex: number;
+    } | null;
+    pinnedColumns: {
+        left: GridStateColDef[];
+        right: GridStateColDef[];
+    };
+    visibleColumns: GridStateColDef[];
+    getCellOffsetStyle: ({ pinnedPosition, columnIndex, computedWidth, }: {
+        pinnedPosition?: GridPinnedColumnPosition | undefined;
+        columnIndex: number;
+        computedWidth: number;
+    }) => React.CSSProperties | undefined;
     getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderTop?: boolean) => React.JSX.Element;
-    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => React.JSX.Element;
+    getColumnHeadersRow: () => React.JSX.Element;
     getColumnsToRender: (params?: GetHeadersParams) => {
         renderedColumns: GridStateColDef[];
         firstColumnToRender: number;
         lastColumnToRender: number;
     };
-    getColumnGroupHeaders: (params?: GetHeadersParams) => React.JSX.Element[] | null;
+    getColumnGroupHeadersRows: () => React.JSX.Element[] | null;
     isDragging: boolean;
     getInnerProps: () => {
-        ref: ((instance: HTMLDivElement | null) => void) | null;
         role: string;
     };
 };