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

package/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/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/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/components/GridColumnHeaders.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { UseGridColumnHeadersProps } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-export interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, Omit<UseGridColumnHeadersProps, 'innerRef'> {
+export interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
     ref?: React.Ref<HTMLDivElement>;
-    innerRef?: React.Ref<HTMLDivElement>;
 }
 declare const MemoizedGridColumnHeaders: React.ForwardRefExoticComponent<Omit<GridColumnHeadersProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { MemoizedGridColumnHeaders as GridColumnHeaders };

package/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/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/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,11 +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(() => {
-    var _ref, _rootProps$rowCount;
-    return (_ref = (_rootProps$rowCount = rootProps.rowCount) != null ? _rootProps$rowCount : visibleTopLevelRowCount) != null ? _ref : 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/components/GridPinnedRows.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import type { VirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
-export interface GridPinnedRowsProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface GridPinnedRowsProps {
     position: 'top' | 'bottom';
     virtualScroller: VirtualScroller;
 }

package/components/GridRow.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridRowId, GridRowModel } from '../models/gridRows';
-import type { GridPinnedColumns } from '../hooks/features/columns';
+import { GridPinnedColumns } from '../hooks/features/columns';
 import type { GridStateColDef } from '../models/colDef/gridColDef';
 import type { GridRenderContext } from '../models/params/gridScrollParams';
 import type { GridDimensions } from '../hooks/features/dimensions';

package/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 => {
@@ -216,7 +217,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 != null && sizes.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
@@ -253,21 +255,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }
     const width = (_cellColSpanInfo$cell = cellColSpanInfo == null ? void 0 : cellColSpanInfo.cellProps.width) != null ? _cellColSpanInfo$cell : column.computedWidth;
     const colSpan = (_cellColSpanInfo$cell2 = cellColSpanInfo == null ? void 0 : cellColSpanInfo.cellProps.colSpan) != null ? _cellColSpanInfo$cell2 : 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 == null ? void 0 : rowNode.type) === 'skeletonRow') {
       var _column$align;
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
@@ -291,20 +279,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 == null ? void 0 : slotProps.cell, {
+      isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
-      sectionLength: sectionLength,
-      gridHasScrollX: dimensions.hasScrollX
-    }), column.field);
+      sectionLength: sectionLength
+    }, slotProps == null ? void 0 : slotProps.cell), column.field);
   };
 
   /* Start of rendering */
@@ -363,9 +348,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/components/GridScrollArea.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface ScrollAreaProps {
+    scrollDirection: 'left' | 'right';
+}
+declare function GridScrollAreaRaw(props: ScrollAreaProps): React.JSX.Element | null;
+declare namespace GridScrollAreaRaw {
+    var propTypes: any;
+}
+declare const GridScrollArea: typeof GridScrollAreaRaw;
+export { GridScrollArea };

package/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/components/cell/GridCell.d.ts

@@ -1,19 +1,25 @@
 import * as React from 'react';
 import { GridRowId, GridEditCellProps } from '../../models';
 import { GridColDef, GridAlignment } from '../../models/colDef/gridColDef';
+import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
 export declare enum PinnedPosition {
     NONE = 0,
     LEFT = 1,
     RIGHT = 2,
     VIRTUAL = 3
 }
+export declare const gridPinnedColumnPositionLookup: {
+    1: GridPinnedColumnPosition;
+    2: GridPinnedColumnPosition;
+    0: undefined;
+    3: undefined;
+};
 export type GridCellProps = {
     align: GridAlignment;
     className?: string;
     colIndex: number;
     column: GridColDef;
     rowId: GridRowId;
-    height: number | 'auto';
     width: number;
     colSpan?: number;
     disableDragEvents?: boolean;
@@ -23,7 +29,6 @@ export type GridCellProps = {
     pinnedPosition: PinnedPosition;
     sectionIndex: number;
     sectionLength: number;
-    gridHasScrollX: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onMouseDown?: React.MouseEventHandler<HTMLDivElement>;

package/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__',
@@ -75,7 +83,6 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       editCellState,
       align,
       colIndex,
-      height,
       width,
       className,
       style: styleProp,
@@ -155,9 +162,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$cellSelect = rootProps.cellSelection) != null ? _rootProps$cellSelect : 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,
@@ -204,8 +211,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;
@@ -214,7 +220,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;
@@ -324,8 +330,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/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)'
 });

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 };