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

package/models/params/gridScrollParams.d.ts

@@ -1,9 +1,11 @@
-export interface GridRenderContext {
-    firstRowIndex: number;
-    lastRowIndex: number;
+export interface GridColumnsRenderContext {
     firstColumnIndex: number;
     lastColumnIndex: number;
 }
+export interface GridRenderContext extends GridColumnsRenderContext {
+    firstRowIndex: number;
+    lastRowIndex: number;
+}
 export interface GridScrollParams {
     left: number;
     top: number;

package/models/props/DataGridProps.d.ts

@@ -24,6 +24,7 @@ import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColu
 import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 import { GridColumnGroupingModel } from '../gridColumnGrouping';
 import { GridPaginationModel } from '../gridPaginationProps';
+import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
 export interface GridExperimentalFeatures {
     /**
      * Emits a warning if the cell receives focus without also syncing the focus state.
@@ -46,7 +47,7 @@ export interface DataGridProcessedProps<R extends GridValidRowModel = any> exten
  * The props of the `DataGrid` component after the pre-processing phase that the user should not be able to override.
  * Those are usually used in feature-hook for which the pro-plan has more advanced features (eg: multi-sorting, multi-filtering, ...).
  */
-export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableColumnReorder' | 'disableColumnResize' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature';
+export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableColumnReorder' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature';
 /**
  * The `DataGrid` options with a default value that must be merged with the value given through props.
  */
@@ -342,6 +343,16 @@ export interface DataGridPropsWithDefaultValues {
      * @default 166
      */
     rowPositionsDebounceMs: number;
+    /**
+     * If `true`, columns are autosized after the datagrid is mounted.
+     * @default false
+     */
+    autosizeOnMount: boolean;
+    /**
+     * If `true`, column autosizing on header separator double-click is disabled.
+     * @default false
+     */
+    disableAutosize: boolean;
 }
 /**
  * The `DataGrid` props with no default value.
@@ -559,6 +570,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onPaginationModelChange?: (model: GridPaginationModel, details: GridCallbackDetails) => void;
+    /**
+     * Callback fired when the row count has changed.
+     * @param {number} count Updated row count.
+     */
+    onRowCountChange?: (count: number) => void;
     /**
      * Callback fired when the preferences panel is closed.
      * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
@@ -714,4 +730,22 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {string} data The data copied to the clipboard.
      */
     onClipboardCopy?: GridEventListener<'clipboardCopy'>;
+    /**
+     * The options for autosize when user-initiated.
+     */
+    autosizeOptions?: GridAutosizeOptions;
+    /**
+     * Callback fired while a column is being resized.
+     * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
+     * @param {MuiEvent<React.MouseEvent>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onColumnResize?: GridEventListener<'columnResize'>;
+    /**
+     * Callback fired when the width of a column is changed.
+     * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
+     * @param {MuiEvent<React.MouseEvent>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onColumnWidthChange?: GridEventListener<'columnWidthChange'>;
 }

package/modern/DataGrid/DataGrid.js

@@ -67,6 +67,21 @@ DataGridRaw.propTypes = {
    * @default false
    */
   autoPageSize: PropTypes.bool,
+  /**
+   * If `true`, columns are autosized after the datagrid is mounted.
+   * @default false
+   */
+  autosizeOnMount: PropTypes.bool,
+  /**
+   * The options for autosize when user-initiated.
+   */
+  autosizeOptions: PropTypes.shape({
+    columns: PropTypes.arrayOf(PropTypes.string),
+    expand: PropTypes.bool,
+    includeHeaders: PropTypes.bool,
+    includeOutliers: PropTypes.bool,
+    outliersFactor: PropTypes.number
+  }),
   /**
    * Controls the modes of the cells.
    */
@@ -115,6 +130,11 @@ DataGridRaw.propTypes = {
    * @default "standard"
    */
   density: PropTypes.oneOf(['comfortable', 'compact', 'standard']),
+  /**
+   * If `true`, column autosizing on header separator double-click is disabled.
+   * @default false
+   */
+  disableAutosize: PropTypes.bool,
   /**
    * If `true`, column filters are disabled.
    * @default false
@@ -125,6 +145,11 @@ DataGridRaw.propTypes = {
    * @default false
    */
   disableColumnMenu: PropTypes.bool,
+  /**
+   * If `true`, resizing columns is disabled.
+   * @default false
+   */
+  disableColumnResize: PropTypes.bool,
   /**
    * If `true`, hiding/showing columns is disabled.
    * @default false
@@ -422,12 +447,26 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnOrderChange: PropTypes.func,
+  /**
+   * Callback fired while a column is being resized.
+   * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnResize: PropTypes.func,
   /**
    * Callback fired when the column visibility model changes.
    * @param {GridColumnVisibilityModel} model The new model.
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnVisibilityModelChange: PropTypes.func,
+  /**
+   * Callback fired when the width of a column is changed.
+   * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnWidthChange: PropTypes.func,
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -488,6 +527,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowClick: PropTypes.func,
+  /**
+   * Callback fired when the row count has changed.
+   * @param {number} count Updated row count.
+   */
+  onRowCountChange: PropTypes.func,
   /**
    * Callback fired when a double click event comes from a row container element.
    * @param {GridRowParams} params With all properties from [[RowParams]].

package/modern/DataGrid/useDataGridComponent.js

@@ -26,6 +26,7 @@ import { useGridStatePersistence } from '../hooks/features/statePersistence/useG
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
 import { useGridVirtualization, virtualizationStateInitializer } from '../hooks/features/virtualization';
+import { columnResizeStateInitializer, useGridColumnResize } from '../hooks/features/columnResize/useGridColumnResize';
 export const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 
@@ -48,6 +49,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
   useGridInitializeState(filterStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
+  useGridInitializeState(columnResizeStateInitializer, apiRef, props);
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
@@ -66,6 +68,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridFilter(apiRef, props);
   useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);
+  useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);

package/modern/DataGrid/useDataGridProps.js

@@ -13,7 +13,6 @@ const DATA_GRID_FORCED_PROPS = {
   pagination: true,
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
-  disableColumnResize: true,
   keepColumnPositionIfDraggedOutside: false,
   signature: 'DataGrid'
 };
@@ -70,7 +69,9 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   keepColumnPositionIfDraggedOutside: false,
   ignoreValueFormatterDuringExport: false,
   clipboardCopyCellDelimiter: '\t',
-  rowPositionsDebounceMs: 166
+  rowPositionsDebounceMs: 166,
+  autosizeOnMount: false,
+  disableAutosize: false
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {

package/modern/components/GridColumnHeaders.js

@@ -1,18 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { refType } from '@mui/utils';
 import { fastMemo } from '../utils/fastMemo';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
-import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
 const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
-      innerRef,
       visibleColumns,
       sortColumnLookup,
       filterColumnLookup,
@@ -28,12 +24,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
-    isDragging,
     getInnerProps,
-    getColumnHeaders,
-    getColumnGroupHeaders
+    getColumnHeadersRow,
+    getColumnGroupHeadersRows
   } = useGridColumnHeaders({
-    innerRef,
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
@@ -47,14 +41,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/_jsx(GridBaseColumnHeaders, _extends({
+  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
     ref: ref
-  }, other, {
-    children: /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
-      isDragging: isDragging
-    }, getInnerProps(), {
-      children: [getColumnGroupHeaders(), getColumnHeaders()]
-    }))
+  }, other, getInnerProps(), {
+    children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
@@ -88,7 +78,6 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   filterColumnLookup: PropTypes.object.isRequired,
   hasOtherElementInTabSequence: PropTypes.bool.isRequired,
   headerGroupingMaxDepth: PropTypes.number.isRequired,
-  innerRef: refType,
   sortColumnLookup: PropTypes.object.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;

package/modern/components/GridHeaders.js

@@ -26,15 +26,12 @@ function GridHeaders() {
   const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  const columnHeadersRef = React.useRef(null);
   const columnsContainerRef = React.useRef(null);
   apiRef.current.register('private', {
-    columnHeadersContainerElementRef: columnsContainerRef,
-    columnHeadersElementRef: columnHeadersRef
+    columnHeadersContainerRef: columnsContainerRef
   });
   return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, {
     ref: columnsContainerRef,
-    innerRef: columnHeadersRef,
     visibleColumns: visibleColumns,
     filterColumnLookup: filterColumnLookup,
     sortColumnLookup: sortColumnLookup,

package/modern/components/GridPagination.js

@@ -5,8 +5,7 @@ import { styled } from '@mui/material/styles';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridFilteredTopLevelRowCountSelector } from '../hooks/features/filter';
-import { gridPaginationModelSelector } from '../hooks/features/pagination/gridPaginationSelector';
+import { gridPaginationModelSelector, gridPaginationRowCountSelector } from '../hooks/features/pagination/gridPaginationSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridPaginationRoot = styled(TablePagination)(({
   theme
@@ -31,8 +30,7 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
-  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
-  const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
+  const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);
   const lastPage = React.useMemo(() => {
     const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
     return Math.max(0, calculatedValue);

package/modern/components/GridRow.js

@@ -21,8 +21,9 @@ import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSele
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
-import { PinnedPosition } from './cell/GridCell';
+import { PinnedPosition, gridPinnedColumnPositionLookup } from './cell/GridCell';
 import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
+import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -215,7 +216,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const rowStyle = _extends({}, styleProp, {
       maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
       // max-height doesn't support "auto"
-      minHeight
+      minHeight,
+      '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
     if (sizes?.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
@@ -250,21 +252,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
-    let pinnedOffset;
-    // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
-    // eslint-disable-next-line default-case
-    switch (pinnedPosition) {
-      case PinnedPosition.LEFT:
-        pinnedOffset = columnPositions[indexRelativeToAllColumns];
-        break;
-      case PinnedPosition.RIGHT:
-        pinnedOffset = dimensions.columnsTotalWidth - columnPositions[indexRelativeToAllColumns] - column.computedWidth + scrollbarWidth;
-        break;
-      case PinnedPosition.NONE:
-      case PinnedPosition.VIRTUAL:
-        pinnedOffset = 0;
-        break;
-    }
+    const pinnedOffset = getPinnedCellOffset(gridPinnedColumnPositionLookup[pinnedPosition], column.computedWidth, indexRelativeToAllColumns, columnPositions, dimensions);
     if (rowNode?.type === 'skeletonRow') {
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         width: width,
@@ -287,20 +275,17 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       column: column,
       width: width,
       rowId: rowId,
-      height: rowHeight,
       align: column.align || 'left',
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
       editCellState: editCellState,
-      isNotVisible: cellIsNotVisible
-    }, slotProps?.cell, {
+      isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
-      sectionLength: sectionLength,
-      gridHasScrollX: dimensions.hasScrollX
-    }), column.field);
+      sectionLength: sectionLength
+    }, slotProps?.cell), column.field);
   };
 
   /* Start of rendering */
@@ -359,9 +344,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
       role: "presentation",
-      style: {
-        flex: '1'
-      }
+      className: gridClasses.filler
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
       pinnedRight: pinnedColumns.right.length > 0
     })]

package/modern/components/GridScrollArea.js

@@ -0,0 +1,150 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { styled } from '@mui/system';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass, gridClasses } from '../constants';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { gridDimensionsSelector } from '../hooks/features/dimensions/gridDimensionsSelectors';
+import { gridDensityFactorSelector } from '../hooks/features/density/densitySelector';
+import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
+import { useTimeout } from '../hooks/utils/useTimeout';
+import { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';
+import { fastMemo } from '../utils/fastMemo';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CLIFF = 1;
+const SLOP = 1.5;
+const useUtilityClasses = ownerState => {
+  const {
+    scrollDirection,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['scrollArea', `scrollArea--${scrollDirection}`]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridScrollAreaRawRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ScrollArea',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
+  }, {
+    [`&.${gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
+  }, styles.scrollArea]
+})(() => ({
+  position: 'absolute',
+  top: 0,
+  zIndex: 101,
+  width: 20,
+  bottom: 0,
+  [`&.${gridClasses['scrollArea--left']}`]: {
+    left: 0
+  },
+  [`&.${gridClasses['scrollArea--right']}`]: {
+    right: 0
+  }
+}));
+function GridScrollAreaRaw(props) {
+  const {
+    scrollDirection
+  } = props;
+  const rootRef = React.useRef(null);
+  const apiRef = useGridApiContext();
+  const timeout = useTimeout();
+  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const scrollPosition = React.useRef({
+    left: 0,
+    top: 0
+  });
+  const getCanScrollMore = () => {
+    if (scrollDirection === 'left') {
+      // Only render if the user has not reached yet the start of the list
+      return scrollPosition.current.left > 0;
+    }
+    if (scrollDirection === 'right') {
+      // Only render if the user has not reached yet the end of the list
+      const maxScrollLeft = columnsTotalWidth - dimensions.viewportInnerSize.width;
+      return scrollPosition.current.left < maxScrollLeft;
+    }
+    return false;
+  };
+  const [dragging, setDragging] = React.useState(false);
+  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, rootProps, {
+    scrollDirection
+  });
+  const classes = useUtilityClasses(ownerState);
+  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
+  const style = {
+    height: headerHeight,
+    top: totalHeaderHeight - headerHeight
+  };
+  if (scrollDirection === 'left') {
+    style.left = dimensions.leftPinnedWidth;
+  } else if (scrollDirection === 'right') {
+    style.right = dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  }
+  const handleScrolling = newScrollPosition => {
+    scrollPosition.current = newScrollPosition;
+    setCanScrollMore(getCanScrollMore);
+  };
+  const handleDragOver = useEventCallback(event => {
+    let offset;
+
+    // Prevents showing the forbidden cursor
+    event.preventDefault();
+    if (scrollDirection === 'left') {
+      offset = event.clientX - rootRef.current.getBoundingClientRect().right;
+    } else if (scrollDirection === 'right') {
+      offset = Math.max(1, event.clientX - rootRef.current.getBoundingClientRect().left);
+    } else {
+      throw new Error('MUI X: Wrong drag direction');
+    }
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+
+    // Avoid freeze and inertia.
+    timeout.start(0, () => {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left + offset,
+        top: scrollPosition.current.top
+      });
+    });
+  });
+  const handleColumnHeaderDragStart = useEventCallback(() => {
+    setDragging(true);
+  });
+  const handleColumnHeaderDragEnd = useEventCallback(() => {
+    setDragging(false);
+  });
+  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
+  if (!dragging || !canScrollMore) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
+    ref: rootRef,
+    className: clsx(classes.root),
+    ownerState: ownerState,
+    onDragOver: handleDragOver,
+    style: style
+  });
+}
+process.env.NODE_ENV !== "production" ? GridScrollAreaRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  scrollDirection: PropTypes.oneOf(['left', 'right']).isRequired
+} : void 0;
+const GridScrollArea = fastMemo(GridScrollAreaRaw);
+export { GridScrollArea };

package/modern/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -15,6 +15,8 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
 import { MissingRowIdError } from '../../hooks/features/rows/useGridParamsApi';
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
+import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
 import { jsx as _jsx } from "react/jsx-runtime";
 export let PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
@@ -23,6 +25,12 @@ export let PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["VIRTUAL"] = 3] = "VIRTUAL";
   return PinnedPosition;
 }({});
+export const gridPinnedColumnPositionLookup = {
+  [PinnedPosition.LEFT]: GridPinnedColumnPosition.LEFT,
+  [PinnedPosition.RIGHT]: GridPinnedColumnPosition.RIGHT,
+  [PinnedPosition.NONE]: undefined,
+  [PinnedPosition.VIRTUAL]: undefined
+};
 const EMPTY_CELL_PARAMS = {
   id: -1,
   field: '__unset__',
@@ -74,7 +82,6 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       editCellState,
       align,
       colIndex,
-      height,
       width,
       className,
       style: styleProp,
@@ -154,9 +161,9 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const focusElementRef = React.useRef(null);
   // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
   const isSelectionMode = rootProps.cellSelection ?? false;
-  const isSectionLastCell = sectionIndex === sectionLength - 1;
-  const showLeftBorder = pinnedPosition === PinnedPosition.RIGHT && sectionIndex === 0;
-  const showRightBorder = rootProps.showCellVerticalBorder && (pinnedPosition !== PinnedPosition.LEFT ? !isSectionLastCell : true) || pinnedPosition === PinnedPosition.LEFT && isSectionLastCell;
+  const position = gridPinnedColumnPositionLookup[pinnedPosition];
+  const showLeftBorder = shouldCellShowLeftBorder(position, sectionIndex);
+  const showRightBorder = shouldCellShowRightBorder(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = {
     align,
     showLeftBorder,
@@ -203,8 +210,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     }
     const cellStyle = _extends({
-      '--width': `${width}px`,
-      '--height': typeof height === 'number' ? `${height}px` : height
+      '--width': `${width}px`
     }, styleProp);
     if (pinnedPosition === PinnedPosition.LEFT) {
       cellStyle.left = pinnedOffset;
@@ -213,7 +219,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       cellStyle.right = pinnedOffset;
     }
     return cellStyle;
-  }, [width, height, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -323,8 +329,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: PropTypes.bool,
     value: PropTypes.any
   }),
-  gridHasScrollX: PropTypes.bool.isRequired,
-  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   isNotVisible: PropTypes.bool.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,

package/modern/components/columnHeaders/GridBaseColumnHeaders.js

@@ -23,6 +23,7 @@ const GridColumnHeadersRoot = styled('div', {
   overridesResolver: (props, styles) => styles.columnHeaders
 })({
   display: 'flex',
+  flexDirection: 'column',
   borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
   borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });