@mui/x-data-grid-pro - npm Package Compare versions

Comparing version 7.0.0-beta.6 to 7.0.0-beta.7

components/GridColumnHeaders.d.ts

 import * as React from 'react';
 import { UseGridColumnHeadersProps } from '@mui/x-data-grid/internals';
-interface DataGridProColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, Omit<UseGridColumnHeadersProps, 'innerRef'> {
-    innerRef?: React.Ref<HTMLDivElement>;
+interface DataGridProColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
 }
 declare const GridColumnHeaders: React.ForwardRefExoticComponent<DataGridProColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
 export { GridColumnHeaders };

components/GridColumnHeaders.js

@@ -8,66 +8,13 @@ "use strict";
 exports.GridColumnHeaders = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
-var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
-var _GridScrollArea = require("./GridScrollArea");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["style", "className", "innerRef", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const _excluded = ["style", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useUtilityClasses = ownerState => {
-  const {
-    leftPinnedColumns,
-    rightPinnedColumns,
-    classes
-  } = ownerState;
-  const slots = {
-    leftPinnedColumns: ['pinnedColumnHeaders', leftPinnedColumns && leftPinnedColumns.length > 0 && `pinnedColumnHeaders--left`],
-    rightPinnedColumns: ['pinnedColumnHeaders', rightPinnedColumns && rightPinnedColumns.length > 0 && `pinnedColumnHeaders--right`, 'withBorderColor']
-  };
-  return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
-};
-const GridColumnHeadersPinnedColumnHeaders = (0, _styles.styled)('div', {
-  name: 'MuiDataGrid',
-  slot: 'PinnedColumnHeaders',
-  overridesResolver: (_, styles) => [{
-    [`&.${_xDataGrid.gridClasses['pinnedColumnHeaders--left']}`]: styles['pinnedColumnHeaders--left']
-  }, {
-    [`&.${_xDataGrid.gridClasses['pinnedColumnHeaders--right']}`]: styles['pinnedColumnHeaders--right']
-  }, styles.pinnedColumnHeaders]
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  position: 'sticky',
-  zIndex: 5,
-  top: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  backgroundColor: 'var(--DataGrid-pinnedBackground)'
-}, ownerState.side === _xDataGrid.GridPinnedColumnPosition.LEFT && {
-  left: 0
-}, ownerState.side === _xDataGrid.GridPinnedColumnPosition.RIGHT && {
-  right: 0
-}, {
-  [`&.${_xDataGrid.gridClasses['pinnedColumnHeaders--left']}`]: {
-    left: 0,
-    '& > [role="row"] > [role="columnheader"]:last-of-type': {
-      borderRight: '1px solid var(--DataGrid-rowBorderColor)'
-    }
-  },
-  [`&.${_xDataGrid.gridClasses['pinnedColumnHeaders--right']}`]: {
-    right: 0,
-    '& > [role="row"] > [role="columnheader"]:first-of-type': {
-      borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
-    }
-  }
-}));
 const Filler = (0, _styles.styled)('div')({
@@ -77,13 +24,5 @@ flex: 1,
 });
-GridColumnHeadersPinnedColumnHeaders.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  ownerState: _propTypes.default.object.isRequired
-};
 const GridColumnHeaders = exports.GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className,
-      innerRef,
       visibleColumns,
@@ -103,14 +42,8 @@ sortColumnLookup,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const visiblePinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridVisiblePinnedColumnDefinitionsSelector);
   const {
-    isDragging,
-    renderContext,
     getInnerProps,
-    getColumnHeaders,
-    getColumnFilters,
-    getColumnGroupHeaders
+    getColumnHeadersRow,
+    getColumnFiltersRow,
+    getColumnGroupHeadersRows
   } = (0, _useGridColumnHeaders.useGridColumnHeaders)({
-    innerRef,
     visibleColumns,
@@ -129,96 +62,7 @@ sortColumnLookup,
   });
-  const ownerState = (0, _extends2.default)({}, rootProps, {
-    leftPinnedColumns: visiblePinnedColumns.left.map(c => c.field),
-    rightPinnedColumns: visiblePinnedColumns.right.map(c => c.field),
-    classes: rootProps.classes
-  });
-  const classes = useUtilityClasses(ownerState);
-  const leftRenderContext = renderContext && visiblePinnedColumns.left.length ? (0, _extends2.default)({}, renderContext, {
-    firstColumnIndex: 0,
-    lastColumnIndex: visiblePinnedColumns.left.length
-  }) : null;
-  const rightRenderContext = renderContext && visiblePinnedColumns.right.length ? (0, _extends2.default)({}, renderContext, {
-    firstColumnIndex: visibleColumns.length - visiblePinnedColumns.right.length,
-    lastColumnIndex: visibleColumns.length
-  }) : null;
-  const innerProps = getInnerProps();
-  const pinnedColumnHeadersProps = {
-    role: innerProps.role
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridBaseColumnHeaders, (0, _extends2.default)({
     ref: ref,
     className: className
-  }, other, {
-    children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
-      className: classes.leftPinnedColumns,
-      ownerState: (0, _extends2.default)({}, ownerState, {
-        side: _xDataGrid.GridPinnedColumnPosition.LEFT,
-        showCellVerticalBorder: rootProps.showCellVerticalBorder
-      })
-    }, pinnedColumnHeadersProps, {
-      children: [getColumnGroupHeaders({
-        position: _xDataGrid.GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      }), getColumnHeaders({
-        position: _xDataGrid.GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      }, {
-        disableReorder: true
-      }), getColumnFilters({
-        position: _xDataGrid.GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      })]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
-      scrollDirection: "left"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
-      isDragging: isDragging
-    }, innerProps, {
-      children: [getColumnGroupHeaders({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      }), getColumnHeaders({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      }), getColumnFilters({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      })]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
-      scrollDirection: "right"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Filler, {}), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
-      ownerState: (0, _extends2.default)({}, ownerState, {
-        side: _xDataGrid.GridPinnedColumnPosition.RIGHT,
-        showCellVerticalBorder: rootProps.showCellVerticalBorder
-      }),
-      className: classes.rightPinnedColumns
-    }, pinnedColumnHeadersProps, {
-      children: [getColumnGroupHeaders({
-        position: _xDataGrid.GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      }), getColumnHeaders({
-        position: _xDataGrid.GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      }, {
-        disableReorder: true,
-        separatorSide: _xDataGrid.GridColumnHeaderSeparatorSides.Left
-      }), getColumnFilters({
-        position: _xDataGrid.GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      })]
-    }))]
+  }, other, getInnerProps(), {
+    children: [getColumnGroupHeadersRows(), getColumnHeadersRow(), getColumnFiltersRow(), /*#__PURE__*/(0, _jsxRuntime.jsx)(Filler, {})]
   }));
@@ -257,5 +101,4 @@ });
   headerGroupingMaxDepth: _propTypes.default.number.isRequired,
-  innerRef: _utils.refType,
   sortColumnLookup: _propTypes.default.object.isRequired,
   visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
 } : void 0;

components/headerFiltering/GridHeaderFilterCell.d.ts

 import * as React from 'react';
-import { GridFilterItem, GridFilterOperator, GridColDef } from '@mui/x-data-grid';
+import { GridFilterItem, GridFilterOperator, GridColDef, GridPinnedColumnPosition } from '@mui/x-data-grid';
 import { GridStateColDef } from '@mui/x-data-grid/internals';
+export interface GridRenderHeaderFilterProps extends GridHeaderFilterCellProps {
+    inputRef: React.RefObject<unknown>;
+}
 export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'headerClassName'> {
@@ -16,4 +19,8 @@ colIndex: number;
     InputComponentProps: GridFilterOperator['InputComponentProps'];
+    pinnedPosition?: GridPinnedColumnPosition;
+    style?: React.CSSProperties;
+    indexInSection: number;
+    sectionLength: number;
 }
 declare const Memoized: React.ForwardRefExoticComponent<GridHeaderFilterCellProps & React.RefAttributes<HTMLDivElement>>;
 export { Memoized as GridHeaderFilterCell };

components/headerFiltering/GridHeaderFilterCell.js

@@ -16,2 +16,3 @@ "use strict";
 var _internals = require("@mui/x-data-grid/internals");
+var _cellBorderUtils = require("@mui/x-data-grid/utils/cellBorderUtils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -21,3 +22,3 @@ var _GridHeaderFilterMenuContainer = require("./GridHeaderFilterMenuContainer");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
+const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -29,6 +30,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
     classes,
-    showColumnVerticalBorder
+    showRightBorder,
+    showLeftBorder,
+    pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showColumnVerticalBorder && 'columnHeader--withRightBorder']
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight']
   };
@@ -53,3 +56,7 @@ return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
       InputComponentProps,
-      showClearIcon = true
+      showClearIcon = true,
+      pinnedPosition,
+      style: styleProp,
+      indexInSection,
+      sectionLength
     } = props,
@@ -94,3 +101,5 @@ other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   if (colDef.renderHeaderFilter) {
-    headerFilterComponent = colDef.renderHeaderFilter(props);
+    headerFilterComponent = colDef.renderHeaderFilter((0, _extends2.default)({}, props, {
+      inputRef
+    }));
   }
@@ -105,3 +114,3 @@ React.useLayoutEffect(() => {
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
@@ -172,4 +181,9 @@ }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
   }), [onMouseDown, onKeyDown, publish]);
+  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = (0, _extends2.default)({}, rootProps, {
-    colDef
+    pinnedPosition,
+    colDef,
+    showLeftBorder,
+    showRightBorder
   });
@@ -186,3 +200,3 @@ const classes = useUtilityClasses(ownerState);
     ref: handleRef,
-    style: {
+    style: (0, _extends2.default)({
       height,
@@ -192,3 +206,3 @@ width,
       maxWidth: width
-    },
+    }, styleProp),
     role: "columnheader",
@@ -260,2 +274,3 @@ "aria-colindex": colIndex + 1,
   height: _propTypes.default.number.isRequired,
+  indexInSection: _propTypes.default.number.isRequired,
   InputComponentProps: _propTypes.default.object,
@@ -268,4 +283,7 @@ item: _propTypes.default.shape({
   }).isRequired,
+  pinnedPosition: _propTypes.default.oneOf(['left', 'right']),
+  sectionLength: _propTypes.default.number.isRequired,
   showClearIcon: _propTypes.default.bool,
   sortIndex: _propTypes.default.number,
+  style: _propTypes.default.object,
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
@@ -272,0 +290,0 @@ width: _propTypes.default.number.isRequired

DataGridPro/DataGridPro.js

@@ -258,3 +258,2 @@ "use strict";
   experimentalFeatures: _propTypes.default.shape({
-    lazyLoading: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
@@ -655,2 +654,7 @@ }),
   /**
+   * Callback fired when the row count has changed.
+   * @param {number} count Updated row count.
+   */
+  onRowCountChange: _propTypes.default.func,
+  /**
    * Callback fired when a double click event comes from a row container element.
@@ -657,0 +661,0 @@ * @param {GridRowParams} params With all properties from [[RowParams]].

DataGridPro/useDataGridProComponent.js

@@ -10,3 +10,2 @@ "use strict";
 var _useGridColumnReorder = require("../hooks/features/columnReorder/useGridColumnReorder");
-var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _useGridTreeData = require("../hooks/features/treeData/useGridTreeData");
@@ -61,3 +60,3 @@ var _useGridTreeDataPreProcessors = require("../hooks/features/treeData/useGridTreeDataPreProcessors");
   (0, _internals.useGridInitializeState)(_useGridColumnReorder.columnReorderStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_useGridColumnResize.columnResizeStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.columnResizeStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
@@ -87,3 +86,3 @@ (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridColumnReorder.useGridColumnReorder)(apiRef, props);
-  (0, _useGridColumnResize.useGridColumnResize)(apiRef, props);
+  (0, _internals.useGridColumnResize)(apiRef, props);
   (0, _internals.useGridPagination)(apiRef, props);
@@ -90,0 +89,0 @@ (0, _internals.useGridRowsMeta)(apiRef, props);

esm/components/GridColumnHeaders.js

@@ -0,64 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["style", "className", "innerRef", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const _excluded = ["style", "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, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { styled } from '@mui/material/styles';
-import { getDataGridUtilityClass, gridClasses, GridColumnHeaderSeparatorSides, GridPinnedColumnPosition, useGridSelector, gridVisiblePinnedColumnDefinitionsSelector } from '@mui/x-data-grid';
-import { GridBaseColumnHeaders, GridColumnHeadersInner } from '@mui/x-data-grid/internals';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridBaseColumnHeaders } from '@mui/x-data-grid/internals';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-import { GridScrollArea } from './GridScrollArea';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    leftPinnedColumns,
-    rightPinnedColumns,
-    classes
-  } = ownerState;
-  const slots = {
-    leftPinnedColumns: ['pinnedColumnHeaders', leftPinnedColumns && leftPinnedColumns.length > 0 && `pinnedColumnHeaders--left`],
-    rightPinnedColumns: ['pinnedColumnHeaders', rightPinnedColumns && rightPinnedColumns.length > 0 && `pinnedColumnHeaders--right`, 'withBorderColor']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const GridColumnHeadersPinnedColumnHeaders = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'PinnedColumnHeaders',
-  overridesResolver: (_, styles) => [{
-    [`&.${gridClasses['pinnedColumnHeaders--left']}`]: styles['pinnedColumnHeaders--left']
-  }, {
-    [`&.${gridClasses['pinnedColumnHeaders--right']}`]: styles['pinnedColumnHeaders--right']
-  }, styles.pinnedColumnHeaders]
-})(({
-  ownerState
-}) => _extends({
-  position: 'sticky',
-  zIndex: 5,
-  top: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  backgroundColor: 'var(--DataGrid-pinnedBackground)'
-}, ownerState.side === GridPinnedColumnPosition.LEFT && {
-  left: 0
-}, ownerState.side === GridPinnedColumnPosition.RIGHT && {
-  right: 0
-}, {
-  [`&.${gridClasses['pinnedColumnHeaders--left']}`]: {
-    left: 0,
-    '& > [role="row"] > [role="columnheader"]:last-of-type': {
-      borderRight: '1px solid var(--DataGrid-rowBorderColor)'
-    }
-  },
-  [`&.${gridClasses['pinnedColumnHeaders--right']}`]: {
-    right: 0,
-    '& > [role="row"] > [role="columnheader"]:first-of-type': {
-      borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
-    }
-  }
-}));
 const Filler = styled('div')({
@@ -68,13 +15,5 @@ flex: 1,
 });
-GridColumnHeadersPinnedColumnHeaders.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  ownerState: PropTypes.object.isRequired
-};
 const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className,
-      innerRef,
       visibleColumns,
@@ -94,14 +33,8 @@ sortColumnLookup,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const {
-    isDragging,
-    renderContext,
     getInnerProps,
-    getColumnHeaders,
-    getColumnFilters,
-    getColumnGroupHeaders
+    getColumnHeadersRow,
+    getColumnFiltersRow,
+    getColumnGroupHeadersRows
   } = useGridColumnHeaders({
-    innerRef,
     visibleColumns,
@@ -120,96 +53,7 @@ sortColumnLookup,
   });
-  const ownerState = _extends({}, rootProps, {
-    leftPinnedColumns: visiblePinnedColumns.left.map(c => c.field),
-    rightPinnedColumns: visiblePinnedColumns.right.map(c => c.field),
-    classes: rootProps.classes
-  });
-  const classes = useUtilityClasses(ownerState);
-  const leftRenderContext = renderContext && visiblePinnedColumns.left.length ? _extends({}, renderContext, {
-    firstColumnIndex: 0,
-    lastColumnIndex: visiblePinnedColumns.left.length
-  }) : null;
-  const rightRenderContext = renderContext && visiblePinnedColumns.right.length ? _extends({}, renderContext, {
-    firstColumnIndex: visibleColumns.length - visiblePinnedColumns.right.length,
-    lastColumnIndex: visibleColumns.length
-  }) : null;
-  const innerProps = getInnerProps();
-  const pinnedColumnHeadersProps = {
-    role: innerProps.role
-  };
   return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
     ref: ref,
     className: className
-  }, other, {
-    children: [leftRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
-      className: classes.leftPinnedColumns,
-      ownerState: _extends({}, ownerState, {
-        side: GridPinnedColumnPosition.LEFT,
-        showCellVerticalBorder: rootProps.showCellVerticalBorder
-      })
-    }, pinnedColumnHeadersProps, {
-      children: [getColumnGroupHeaders({
-        position: GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      }), getColumnHeaders({
-        position: GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      }, {
-        disableReorder: true
-      }), getColumnFilters({
-        position: GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      })]
-    })), /*#__PURE__*/_jsx(GridScrollArea, {
-      scrollDirection: "left"
-    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
-      isDragging: isDragging
-    }, innerProps, {
-      children: [getColumnGroupHeaders({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      }), getColumnHeaders({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      }), getColumnFilters({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      })]
-    })), /*#__PURE__*/_jsx(GridScrollArea, {
-      scrollDirection: "right"
-    }), /*#__PURE__*/_jsx(Filler, {}), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
-      ownerState: _extends({}, ownerState, {
-        side: GridPinnedColumnPosition.RIGHT,
-        showCellVerticalBorder: rootProps.showCellVerticalBorder
-      }),
-      className: classes.rightPinnedColumns
-    }, pinnedColumnHeadersProps, {
-      children: [getColumnGroupHeaders({
-        position: GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      }), getColumnHeaders({
-        position: GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      }, {
-        disableReorder: true,
-        separatorSide: GridColumnHeaderSeparatorSides.Left
-      }), getColumnFilters({
-        position: GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      })]
-    }))]
+  }, other, getInnerProps(), {
+    children: [getColumnGroupHeadersRows(), getColumnHeadersRow(), getColumnFiltersRow(), /*#__PURE__*/_jsx(Filler, {})]
   }));
@@ -248,3 +92,2 @@ });
   headerGroupingMaxDepth: PropTypes.number.isRequired,
-  innerRef: refType,
   sortColumnLookup: PropTypes.object.isRequired,
@@ -251,0 +94,0 @@ visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired

esm/components/headerFiltering/GridHeaderFilterCell.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
+const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength"];
 import * as React from 'react';
@@ -10,2 +10,3 @@ import PropTypes from 'prop-types';
 import { fastMemo, useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/utils/cellBorderUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -20,6 +21,8 @@ import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
     classes,
-    showColumnVerticalBorder
+    showRightBorder,
+    showLeftBorder,
+    pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showColumnVerticalBorder && 'columnHeader--withRightBorder']
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight']
   };
@@ -45,3 +48,7 @@ return composeClasses(slots, getDataGridUtilityClass, classes);
       InputComponentProps,
-      showClearIcon = true
+      showClearIcon = true,
+      pinnedPosition,
+      style: styleProp,
+      indexInSection,
+      sectionLength
     } = props,
@@ -86,3 +93,5 @@ other = _objectWithoutPropertiesLoose(props, _excluded);
   if (colDef.renderHeaderFilter) {
-    headerFilterComponent = colDef.renderHeaderFilter(props);
+    headerFilterComponent = colDef.renderHeaderFilter(_extends({}, props, {
+      inputRef
+    }));
   }
@@ -97,3 +106,3 @@ React.useLayoutEffect(() => {
       elementToFocus == null || elementToFocus.focus();
-      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
@@ -166,4 +175,9 @@ }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
   }), [onMouseDown, onKeyDown, publish]);
+  const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = _extends({}, rootProps, {
-    colDef
+    pinnedPosition,
+    colDef,
+    showLeftBorder,
+    showRightBorder
   });
@@ -180,3 +194,3 @@ const classes = useUtilityClasses(ownerState);
     ref: handleRef,
-    style: {
+    style: _extends({
       height,
@@ -186,3 +200,3 @@ width,
       maxWidth: width
-    },
+    }, styleProp),
     role: "columnheader",
@@ -255,2 +269,3 @@ "aria-colindex": colIndex + 1,
   height: PropTypes.number.isRequired,
+  indexInSection: PropTypes.number.isRequired,
   InputComponentProps: PropTypes.object,
@@ -263,4 +278,7 @@ item: PropTypes.shape({
   }).isRequired,
+  pinnedPosition: PropTypes.oneOf(['left', 'right']),
+  sectionLength: PropTypes.number.isRequired,
   showClearIcon: PropTypes.bool,
   sortIndex: PropTypes.number,
+  style: PropTypes.object,
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
@@ -267,0 +285,0 @@ width: PropTypes.number.isRequired

esm/DataGridPro/DataGridPro.js

@@ -251,3 +251,2 @@ 'use client';
   experimentalFeatures: PropTypes.shape({
-    lazyLoading: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -648,2 +647,7 @@ }),
   /**
+   * 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.
@@ -650,0 +654,0 @@ * @param {GridRowParams} params With all properties from [[RowParams]].

esm/DataGridPro/useDataGridProComponent.js

@@ -1,6 +0,5 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
-import { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 import { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
@@ -7,0 +6,0 @@ import { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';

esm/hooks/features/columnHeaders/useGridColumnHeaders.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["getColumnsToRender"];
+const _excluded = ["getColumnsToRender", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "getCellOffsetStyle"];
 import * as React from 'react';
-import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, GridPinnedColumnPosition } from '@mui/x-data-grid';
 import { useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow } from '@mui/x-data-grid/internals';
@@ -10,2 +10,3 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -34,3 +35,9 @@ const {
     {
-      getColumnsToRender
+      getColumnsToRender,
+      renderContext,
+      leftRenderContext,
+      rightRenderContext,
+      pinnedColumns,
+      visibleColumns,
+      getCellOffsetStyle
     } = _useGridColumnHeaders,
@@ -65,6 +72,3 @@ otherProps = _objectWithoutPropertiesLoose(_useGridColumnHeaders, _excluded);
   }, [filterModel]);
-  const getColumnFilters = (params, other = {}) => {
-    if (disableHeaderFiltering) {
-      return null;
-    }
+  const getColumnFilters = params => {
     const {
@@ -88,2 +92,8 @@ renderedColumns,
       const item = getFilterItem(colDef);
+      const pinnedPosition = params == null ? void 0 : params.position;
+      const style = getCellOffsetStyle({
+        pinnedPosition,
+        columnIndex,
+        computedWidth: colDef.computedWidth
+      });
       filters.push( /*#__PURE__*/_jsx(rootProps.slots.headerFilterCell, _extends({
@@ -99,6 +109,16 @@ colIndex: columnIndex,
         "data-field": colDef.field,
-        item: item
-      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.headerFilterCell, other), `${colDef.field}-filter`));
+        item: item,
+        pinnedPosition: pinnedPosition,
+        style: style,
+        indexInSection: i,
+        sectionLength: renderedColumns.length
+      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.headerFilterCell), `${colDef.field}-filter`));
     }
-    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+    return otherProps.getFillers(params, filters, 0, true);
+  };
+  const getColumnFiltersRow = () => {
+    if (disableHeaderFiltering) {
+      return null;
+    }
+    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
       ref: headerFiltersRef,
@@ -109,8 +129,22 @@ className: classes.headerFilterRow,
       ownerState: rootProps,
-      children: otherProps.getFillers(params, filters, 0, true)
+      children: [leftRenderContext && getColumnFilters({
+        position: GridPinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }), getColumnFilters({
+        renderContext,
+        minFirstColumn: pinnedColumns.left.length,
+        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+      }), rightRenderContext && getColumnFilters({
+        position: GridPinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      })]
     });
   };
   return _extends({}, otherProps, {
-    getColumnFilters
+    getColumnFiltersRow
   });
 };

esm/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -110,2 +110,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
+  const isColumnPinned = React.useCallback((initialValue, field) => apiRef.current.isColumnPinned(field), [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'isColumnPinned', isColumnPinned);
 };

esm/hooks/features/index.js

 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
 export * from './columnPinning';
 export * from './columnReorder';
-export * from './columnResize';
 export * from './rowReorder';
@@ -6,0 +5,0 @@ export * from './treeData';

esm/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -92,7 +92,7 @@ import * as React from 'react';
   }, [isEnabled, triggerRef]);
-  const infiteLoaderPrivateApi = {
+  const infiniteLoaderPrivateApi = {
     getInfiniteLoadingTriggerElement
   };
-  useGridApiMethod(apiRef, infiteLoaderPrivateApi, 'private');
+  useGridApiMethod(apiRef, infiniteLoaderPrivateApi, 'private');
   useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };

esm/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -38,14 +38,2 @@ import * as React from 'react';
 }
-function isLazyLoadingDisabled({
-  lazyLoadingFeatureFlag,
-  rowsLoadingMode
-}) {
-  if (!lazyLoadingFeatureFlag) {
-    return true;
-  }
-  if (rowsLoadingMode !== 'server') {
-    return true;
-  }
-  return false;
-}
 
@@ -59,3 +47,2 @@ /**
 export const useGridLazyLoader = (privateApiRef, props) => {
-  var _props$experimentalFe;
   const sortModel = useGridSelector(privateApiRef, gridSortModelSelector);
@@ -67,9 +54,3 @@ const filterModel = useGridSelector(privateApiRef, gridFilterModelSelector);
   });
-  const {
-    lazyLoading
-  } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
-  const isDisabled = isLazyLoadingDisabled({
-    lazyLoadingFeatureFlag: lazyLoading,
-    rowsLoadingMode: props.rowsLoadingMode
-  });
+  const isDisabled = props.rowsLoadingMode !== 'server';
   const handleRenderedRowsIntervalChange = React.useCallback(params => {
@@ -76,0 +57,0 @@ if (isDisabled) {

esm/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -8,9 +8,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 export const useGridLazyLoaderPreProcessors = (privateApiRef, props) => {
-  var _props$experimentalFe;
-  const {
-    lazyLoading
-  } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
   const addSkeletonRows = React.useCallback(groupingParams => {
     const rootGroup = groupingParams.tree[GRID_ROOT_GROUP_ID];
-    if (!lazyLoading || props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
+    if (props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
       return groupingParams;
@@ -37,4 +33,4 @@ }
     });
-  }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
+  }, [props.rowCount, props.rowsLoadingMode]);
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateRows', addSkeletonRows);
 };

esm/internals/index.js

@@ -8,3 +8,2 @@ // eslint-disable-next-line import/export
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-export { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 export { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
@@ -11,0 +10,0 @@ export { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';

esm/utils/releaseInfo.js

 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwOTg1MjQwMDAwMA==";
+  const releaseInfo = "MTcxMDM3MDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
@@ -5,0 +5,0 @@ // A simple hack to set the value in the test environment (has no build step).

hooks/features/columnHeaders/useGridColumnHeaders.d.ts

 import * as React from 'react';
 import { UseGridColumnHeadersProps, GetHeadersParams } from '@mui/x-data-grid/internals';
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
-    getColumnFilters: (params?: GetHeadersParams, other?: {}) => React.JSX.Element | null;
-    renderContext: import("@mui/x-data-grid").GridRenderContext;
+    getColumnFiltersRow: () => React.JSX.Element | null;
     getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderTop?: boolean | undefined) => React.JSX.Element;
-    getColumnHeaders: (params?: GetHeadersParams | undefined, other?: {} | undefined) => React.JSX.Element;
-    getColumnGroupHeaders: (params?: GetHeadersParams | undefined) => React.JSX.Element[] | null;
+    getColumnHeadersRow: () => React.JSX.Element;
+    getColumnGroupHeadersRows: () => React.JSX.Element[] | null;
     isDragging: boolean;
     getInnerProps: () => {
-        ref: ((instance: HTMLDivElement | null) => void) | null;
         role: string;
     };
 };

hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -16,3 +16,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["getColumnsToRender"];
+const _excluded = ["getColumnsToRender", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "getCellOffsetStyle"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -43,3 +43,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
     {
-      getColumnsToRender
+      getColumnsToRender,
+      renderContext,
+      leftRenderContext,
+      rightRenderContext,
+      pinnedColumns,
+      visibleColumns,
+      getCellOffsetStyle
     } = _useGridColumnHeaders,
@@ -74,6 +80,3 @@ otherProps = (0, _objectWithoutPropertiesLoose2.default)(_useGridColumnHeaders, _excluded);
   }, [filterModel]);
-  const getColumnFilters = (params, other = {}) => {
-    if (disableHeaderFiltering) {
-      return null;
-    }
+  const getColumnFilters = params => {
     const {
@@ -96,2 +99,8 @@ renderedColumns,
       const item = getFilterItem(colDef);
+      const pinnedPosition = params?.position;
+      const style = getCellOffsetStyle({
+        pinnedPosition,
+        columnIndex,
+        computedWidth: colDef.computedWidth
+      });
       filters.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.headerFilterCell, (0, _extends2.default)({
@@ -107,6 +116,16 @@ colIndex: columnIndex,
         "data-field": colDef.field,
-        item: item
-      }, rootProps.slotProps?.headerFilterCell, other), `${colDef.field}-filter`));
+        item: item,
+        pinnedPosition: pinnedPosition,
+        style: style,
+        indexInSection: i,
+        sectionLength: renderedColumns.length
+      }, rootProps.slotProps?.headerFilterCell), `${colDef.field}-filter`));
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridColumnHeaderRow, {
+    return otherProps.getFillers(params, filters, 0, true);
+  };
+  const getColumnFiltersRow = () => {
+    if (disableHeaderFiltering) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeaderRow, {
       ref: headerFiltersRef,
@@ -117,9 +136,23 @@ className: classes.headerFilterRow,
       ownerState: rootProps,
-      children: otherProps.getFillers(params, filters, 0, true)
+      children: [leftRenderContext && getColumnFilters({
+        position: _xDataGrid.GridPinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }), getColumnFilters({
+        renderContext,
+        minFirstColumn: pinnedColumns.left.length,
+        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+      }), rightRenderContext && getColumnFilters({
+        position: _xDataGrid.GridPinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      })]
     });
   };
   return (0, _extends2.default)({}, otherProps, {
-    getColumnFilters
+    getColumnFiltersRow
   });
 };
 exports.useGridColumnHeaders = useGridColumnHeaders;

hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -119,3 +119,5 @@ "use strict";
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', reorderPinnedColumns);
+  const isColumnPinned = React.useCallback((initialValue, field) => apiRef.current.isColumnPinned(field), [apiRef]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'isColumnPinned', isColumnPinned);
 };
 exports.useGridColumnPinningPreProcessors = useGridColumnPinningPreProcessors;

hooks/features/index.d.ts

 export * from './columnPinning';
 export * from './columnReorder';
-export * from './columnResize';
 export * from './rowReorder';
@@ -5,0 +4,0 @@ export * from './treeData';

hooks/features/index.js

@@ -28,13 +28,2 @@ "use strict";
 });
-var _columnResize = require("./columnResize");
-Object.keys(_columnResize).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _columnResize[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _columnResize[key];
-    }
-  });
-});
 var _rowReorder = require("./rowReorder");
@@ -41,0 +30,0 @@ Object.keys(_rowReorder).forEach(function (key) {

hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -97,8 +97,8 @@ "use strict";
   }, [isEnabled, triggerRef]);
-  const infiteLoaderPrivateApi = {
+  const infiniteLoaderPrivateApi = {
     getInfiniteLoadingTriggerElement
   };
-  (0, _xDataGrid.useGridApiMethod)(apiRef, infiteLoaderPrivateApi, 'private');
+  (0, _xDataGrid.useGridApiMethod)(apiRef, infiniteLoaderPrivateApi, 'private');
   (0, _xDataGrid.useGridApiOptionHandler)(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };
 exports.useGridInfiniteLoader = useGridInfiniteLoader;

hooks/features/lazyLoader/useGridLazyLoader.js

@@ -45,14 +45,2 @@ "use strict";
 }
-function isLazyLoadingDisabled({
-  lazyLoadingFeatureFlag,
-  rowsLoadingMode
-}) {
-  if (!lazyLoadingFeatureFlag) {
-    return true;
-  }
-  if (rowsLoadingMode !== 'server') {
-    return true;
-  }
-  return false;
-}
 
@@ -72,9 +60,3 @@ /**
   });
-  const {
-    lazyLoading
-  } = props.experimentalFeatures ?? {};
-  const isDisabled = isLazyLoadingDisabled({
-    lazyLoadingFeatureFlag: lazyLoading,
-    rowsLoadingMode: props.rowsLoadingMode
-  });
+  const isDisabled = props.rowsLoadingMode !== 'server';
   const handleRenderedRowsIntervalChange = React.useCallback(params => {
@@ -81,0 +63,0 @@ if (isDisabled) {

hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -17,8 +17,5 @@ "use strict";
 const useGridLazyLoaderPreProcessors = (privateApiRef, props) => {
-  const {
-    lazyLoading
-  } = props.experimentalFeatures ?? {};
   const addSkeletonRows = React.useCallback(groupingParams => {
     const rootGroup = groupingParams.tree[_xDataGrid.GRID_ROOT_GROUP_ID];
-    if (!lazyLoading || props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
+    if (props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
       return groupingParams;
@@ -45,5 +42,5 @@ }
     });
-  }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
+  }, [props.rowCount, props.rowsLoadingMode]);
   (0, _internals.useGridRegisterPipeProcessor)(privateApiRef, 'hydrateRows', addSkeletonRows);
 };
 exports.useGridLazyLoaderPreProcessors = useGridLazyLoaderPreProcessors;

index.js

 /**
- * @mui/x-data-grid-pro v7.0.0-beta.6
+ * @mui/x-data-grid-pro v7.0.0-beta.7
  *
@@ -4,0 +4,0 @@ * @license MUI X Commercial

internals/index.d.ts

@@ -5,3 +5,2 @@ export * from '@mui/x-data-grid/internals';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-export { useGridColumnResize, columnResizeStateInitializer, } from '../hooks/features/columnResize/useGridColumnResize';
 export { useGridColumnPinning, columnPinningStateInitializer, } from '../hooks/features/columnPinning/useGridColumnPinning';
@@ -8,0 +7,0 @@ export { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';

internals/index.js

@@ -10,4 +10,2 @@ "use strict";
   useGridColumnHeaders: true,
-  useGridColumnResize: true,
-  columnResizeStateInitializer: true,
   useGridColumnPinning: true,
@@ -76,8 +74,2 @@ columnPinningStateInitializer: true,
 });
-Object.defineProperty(exports, "columnResizeStateInitializer", {
-  enumerable: true,
-  get: function () {
-    return _useGridColumnResize.columnResizeStateInitializer;
-  }
-});
 Object.defineProperty(exports, "createRowTree", {
@@ -155,8 +147,2 @@ enumerable: true,
 });
-Object.defineProperty(exports, "useGridColumnResize", {
-  enumerable: true,
-  get: function () {
-    return _useGridColumnResize.useGridColumnResize;
-  }
-});
 Object.defineProperty(exports, "useGridDetailPanel", {
@@ -243,3 +229,2 @@ enumerable: true,
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
-var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _useGridColumnPinning = require("../hooks/features/columnPinning/useGridColumnPinning");
@@ -246,0 +231,0 @@ var _useGridColumnPinningPreProcessors = require("../hooks/features/columnPinning/useGridColumnPinningPreProcessors");

models/dataGridProProps.d.ts

@@ -10,8 +10,3 @@ import * as React from 'react';
 import type { GridProSlotProps } from './gridProSlotProps';
-import type { GridAutosizeOptions } from '../hooks';
 export interface GridExperimentalProFeatures extends GridExperimentalFeatures {
-    /**
-     * Enables the data grid to lazy load rows while scrolling.
-     */
-    lazyLoading: boolean;
 }
@@ -68,12 +63,2 @@ interface DataGridProPropsWithComplexDefaultValueBeforeProcessing extends Omit<DataGridPropsWithComplexDefaultValueBeforeProcessing, 'components'> {
     /**
-     * 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;
-    /**
      * If `true`, the column pinning is disabled.
@@ -130,6 +115,2 @@ * @default false
     /**
-     * The options for autosize when user-initiated.
-     */
-    autosizeOptions?: GridAutosizeOptions;
-    /**
      * The initial state of the DataGridPro.
@@ -155,16 +136,2 @@ * The data in it will be set in the state on initialization but will not be controlled.
     /**
-     * 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'>;
-    /**
      * Callback fired when scrolling to the bottom of the grid viewport.
@@ -171,0 +138,0 @@ * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].

models/gridApiPro.d.ts

 import { GridApiCommon, GridColumnReorderApi, GridRowMultiSelectionApi, GridRowProApi } from '@mui/x-data-grid';
 import { GridPrivateOnlyApiCommon } from '@mui/x-data-grid/internals';
+import type { GridInfiniteLoaderPrivateApi } from '@mui/x-data-grid/models/api/gridInfiniteLoaderApi';
 import { GridInitialStatePro, GridStatePro } from './gridStatePro';
-import type { GridColumnPinningApi, GridColumnResizeApi, GridDetailPanelApi, GridRowPinningApi, GridDetailPanelPrivateApi } from '../hooks';
+import type { GridColumnPinningApi, GridDetailPanelApi, GridRowPinningApi, GridDetailPanelPrivateApi } from '../hooks';
 import type { DataGridProProcessedProps } from './dataGridProProps';
@@ -9,5 +10,5 @@ /**
  */
-export interface GridApiPro extends GridApiCommon<GridStatePro, GridInitialStatePro>, GridRowProApi, GridColumnPinningApi, GridColumnResizeApi, GridDetailPanelApi, GridRowPinningApi, GridRowMultiSelectionApi, GridColumnReorderApi {
+export interface GridApiPro extends GridApiCommon<GridStatePro, GridInitialStatePro>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowPinningApi, GridRowMultiSelectionApi, GridColumnReorderApi {
 }
-export interface GridPrivateApiPro extends GridApiPro, GridPrivateOnlyApiCommon<GridApiPro, GridPrivateApiPro, DataGridProProcessedProps>, GridDetailPanelPrivateApi {
+export interface GridPrivateApiPro extends GridApiPro, GridPrivateOnlyApiCommon<GridApiPro, GridPrivateApiPro, DataGridProProcessedProps>, GridDetailPanelPrivateApi, GridInfiniteLoaderPrivateApi {
 }

models/gridStatePro.d.ts

 import { GridInitialState as GridInitialStateCommunity, GridState as GridStateCommunity, GridColumnPinningState, GridPinnedColumnFields } from '@mui/x-data-grid';
-import type { GridDetailPanelState, GridDetailPanelInitialState, GridColumnReorderState, GridColumnResizeState } from '../hooks';
+import type { GridDetailPanelState, GridDetailPanelInitialState, GridColumnReorderState } from '../hooks';
 /**
@@ -8,3 +8,2 @@ * The state of `DataGridPro`.
     columnReorder: GridColumnReorderState;
-    columnResize: GridColumnResizeState;
     pinnedColumns: GridColumnPinningState;
@@ -11,0 +10,0 @@ detailPanel: GridDetailPanelState;

modern/components/GridColumnHeaders.js

@@ -0,64 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["style", "className", "innerRef", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const _excluded = ["style", "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, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { styled } from '@mui/material/styles';
-import { getDataGridUtilityClass, gridClasses, GridColumnHeaderSeparatorSides, GridPinnedColumnPosition, useGridSelector, gridVisiblePinnedColumnDefinitionsSelector } from '@mui/x-data-grid';
-import { GridBaseColumnHeaders, GridColumnHeadersInner } from '@mui/x-data-grid/internals';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridBaseColumnHeaders } from '@mui/x-data-grid/internals';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-import { GridScrollArea } from './GridScrollArea';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    leftPinnedColumns,
-    rightPinnedColumns,
-    classes
-  } = ownerState;
-  const slots = {
-    leftPinnedColumns: ['pinnedColumnHeaders', leftPinnedColumns && leftPinnedColumns.length > 0 && `pinnedColumnHeaders--left`],
-    rightPinnedColumns: ['pinnedColumnHeaders', rightPinnedColumns && rightPinnedColumns.length > 0 && `pinnedColumnHeaders--right`, 'withBorderColor']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const GridColumnHeadersPinnedColumnHeaders = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'PinnedColumnHeaders',
-  overridesResolver: (_, styles) => [{
-    [`&.${gridClasses['pinnedColumnHeaders--left']}`]: styles['pinnedColumnHeaders--left']
-  }, {
-    [`&.${gridClasses['pinnedColumnHeaders--right']}`]: styles['pinnedColumnHeaders--right']
-  }, styles.pinnedColumnHeaders]
-})(({
-  ownerState
-}) => _extends({
-  position: 'sticky',
-  zIndex: 5,
-  top: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  backgroundColor: 'var(--DataGrid-pinnedBackground)'
-}, ownerState.side === GridPinnedColumnPosition.LEFT && {
-  left: 0
-}, ownerState.side === GridPinnedColumnPosition.RIGHT && {
-  right: 0
-}, {
-  [`&.${gridClasses['pinnedColumnHeaders--left']}`]: {
-    left: 0,
-    '& > [role="row"] > [role="columnheader"]:last-of-type': {
-      borderRight: '1px solid var(--DataGrid-rowBorderColor)'
-    }
-  },
-  [`&.${gridClasses['pinnedColumnHeaders--right']}`]: {
-    right: 0,
-    '& > [role="row"] > [role="columnheader"]:first-of-type': {
-      borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
-    }
-  }
-}));
 const Filler = styled('div')({
@@ -68,13 +15,5 @@ flex: 1,
 });
-GridColumnHeadersPinnedColumnHeaders.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  ownerState: PropTypes.object.isRequired
-};
 const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className,
-      innerRef,
       visibleColumns,
@@ -94,14 +33,8 @@ sortColumnLookup,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const {
-    isDragging,
-    renderContext,
     getInnerProps,
-    getColumnHeaders,
-    getColumnFilters,
-    getColumnGroupHeaders
+    getColumnHeadersRow,
+    getColumnFiltersRow,
+    getColumnGroupHeadersRows
   } = useGridColumnHeaders({
-    innerRef,
     visibleColumns,
@@ -120,96 +53,7 @@ sortColumnLookup,
   });
-  const ownerState = _extends({}, rootProps, {
-    leftPinnedColumns: visiblePinnedColumns.left.map(c => c.field),
-    rightPinnedColumns: visiblePinnedColumns.right.map(c => c.field),
-    classes: rootProps.classes
-  });
-  const classes = useUtilityClasses(ownerState);
-  const leftRenderContext = renderContext && visiblePinnedColumns.left.length ? _extends({}, renderContext, {
-    firstColumnIndex: 0,
-    lastColumnIndex: visiblePinnedColumns.left.length
-  }) : null;
-  const rightRenderContext = renderContext && visiblePinnedColumns.right.length ? _extends({}, renderContext, {
-    firstColumnIndex: visibleColumns.length - visiblePinnedColumns.right.length,
-    lastColumnIndex: visibleColumns.length
-  }) : null;
-  const innerProps = getInnerProps();
-  const pinnedColumnHeadersProps = {
-    role: innerProps.role
-  };
   return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
     ref: ref,
     className: className
-  }, other, {
-    children: [leftRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
-      className: classes.leftPinnedColumns,
-      ownerState: _extends({}, ownerState, {
-        side: GridPinnedColumnPosition.LEFT,
-        showCellVerticalBorder: rootProps.showCellVerticalBorder
-      })
-    }, pinnedColumnHeadersProps, {
-      children: [getColumnGroupHeaders({
-        position: GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      }), getColumnHeaders({
-        position: GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      }, {
-        disableReorder: true
-      }), getColumnFilters({
-        position: GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      })]
-    })), /*#__PURE__*/_jsx(GridScrollArea, {
-      scrollDirection: "left"
-    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
-      isDragging: isDragging
-    }, innerProps, {
-      children: [getColumnGroupHeaders({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      }), getColumnHeaders({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      }), getColumnFilters({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      })]
-    })), /*#__PURE__*/_jsx(GridScrollArea, {
-      scrollDirection: "right"
-    }), /*#__PURE__*/_jsx(Filler, {}), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
-      ownerState: _extends({}, ownerState, {
-        side: GridPinnedColumnPosition.RIGHT,
-        showCellVerticalBorder: rootProps.showCellVerticalBorder
-      }),
-      className: classes.rightPinnedColumns
-    }, pinnedColumnHeadersProps, {
-      children: [getColumnGroupHeaders({
-        position: GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      }), getColumnHeaders({
-        position: GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      }, {
-        disableReorder: true,
-        separatorSide: GridColumnHeaderSeparatorSides.Left
-      }), getColumnFilters({
-        position: GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      })]
-    }))]
+  }, other, getInnerProps(), {
+    children: [getColumnGroupHeadersRows(), getColumnHeadersRow(), getColumnFiltersRow(), /*#__PURE__*/_jsx(Filler, {})]
   }));
@@ -248,3 +92,2 @@ });
   headerGroupingMaxDepth: PropTypes.number.isRequired,
-  innerRef: refType,
   sortColumnLookup: PropTypes.object.isRequired,
@@ -251,0 +94,0 @@ visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired

modern/components/headerFiltering/GridHeaderFilterCell.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
+const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength"];
 import * as React from 'react';
@@ -10,2 +10,3 @@ import PropTypes from 'prop-types';
 import { fastMemo, useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/utils/cellBorderUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -20,6 +21,8 @@ import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
     classes,
-    showColumnVerticalBorder
+    showRightBorder,
+    showLeftBorder,
+    pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showColumnVerticalBorder && 'columnHeader--withRightBorder']
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight']
   };
@@ -44,3 +47,7 @@ return composeClasses(slots, getDataGridUtilityClass, classes);
       InputComponentProps,
-      showClearIcon = true
+      showClearIcon = true,
+      pinnedPosition,
+      style: styleProp,
+      indexInSection,
+      sectionLength
     } = props,
@@ -85,3 +92,5 @@ other = _objectWithoutPropertiesLoose(props, _excluded);
   if (colDef.renderHeaderFilter) {
-    headerFilterComponent = colDef.renderHeaderFilter(props);
+    headerFilterComponent = colDef.renderHeaderFilter(_extends({}, props, {
+      inputRef
+    }));
   }
@@ -96,3 +105,3 @@ React.useLayoutEffect(() => {
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
@@ -163,4 +172,9 @@ }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
   }), [onMouseDown, onKeyDown, publish]);
+  const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = _extends({}, rootProps, {
-    colDef
+    pinnedPosition,
+    colDef,
+    showLeftBorder,
+    showRightBorder
   });
@@ -177,3 +191,3 @@ const classes = useUtilityClasses(ownerState);
     ref: handleRef,
-    style: {
+    style: _extends({
       height,
@@ -183,3 +197,3 @@ width,
       maxWidth: width
-    },
+    }, styleProp),
     role: "columnheader",
@@ -251,2 +265,3 @@ "aria-colindex": colIndex + 1,
   height: PropTypes.number.isRequired,
+  indexInSection: PropTypes.number.isRequired,
   InputComponentProps: PropTypes.object,
@@ -259,4 +274,7 @@ item: PropTypes.shape({
   }).isRequired,
+  pinnedPosition: PropTypes.oneOf(['left', 'right']),
+  sectionLength: PropTypes.number.isRequired,
   showClearIcon: PropTypes.bool,
   sortIndex: PropTypes.number,
+  style: PropTypes.object,
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
@@ -263,0 +281,0 @@ width: PropTypes.number.isRequired

modern/DataGridPro/DataGridPro.js

@@ -251,3 +251,2 @@ 'use client';
   experimentalFeatures: PropTypes.shape({
-    lazyLoading: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -648,2 +647,7 @@ }),
   /**
+   * 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.
@@ -650,0 +654,0 @@ * @param {GridRowParams} params With all properties from [[RowParams]].

modern/DataGridPro/useDataGridProComponent.js

@@ -1,6 +0,5 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
-import { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 import { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
@@ -7,0 +6,0 @@ import { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';

modern/hooks/features/columnHeaders/useGridColumnHeaders.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["getColumnsToRender"];
+const _excluded = ["getColumnsToRender", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "getCellOffsetStyle"];
 import * as React from 'react';
-import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, GridPinnedColumnPosition } from '@mui/x-data-grid';
 import { useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow } from '@mui/x-data-grid/internals';
@@ -10,2 +10,3 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -34,3 +35,9 @@ const {
     {
-      getColumnsToRender
+      getColumnsToRender,
+      renderContext,
+      leftRenderContext,
+      rightRenderContext,
+      pinnedColumns,
+      visibleColumns,
+      getCellOffsetStyle
     } = _useGridColumnHeaders,
@@ -65,6 +72,3 @@ otherProps = _objectWithoutPropertiesLoose(_useGridColumnHeaders, _excluded);
   }, [filterModel]);
-  const getColumnFilters = (params, other = {}) => {
-    if (disableHeaderFiltering) {
-      return null;
-    }
+  const getColumnFilters = params => {
     const {
@@ -87,2 +91,8 @@ renderedColumns,
       const item = getFilterItem(colDef);
+      const pinnedPosition = params?.position;
+      const style = getCellOffsetStyle({
+        pinnedPosition,
+        columnIndex,
+        computedWidth: colDef.computedWidth
+      });
       filters.push( /*#__PURE__*/_jsx(rootProps.slots.headerFilterCell, _extends({
@@ -98,6 +108,16 @@ colIndex: columnIndex,
         "data-field": colDef.field,
-        item: item
-      }, rootProps.slotProps?.headerFilterCell, other), `${colDef.field}-filter`));
+        item: item,
+        pinnedPosition: pinnedPosition,
+        style: style,
+        indexInSection: i,
+        sectionLength: renderedColumns.length
+      }, rootProps.slotProps?.headerFilterCell), `${colDef.field}-filter`));
     }
-    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+    return otherProps.getFillers(params, filters, 0, true);
+  };
+  const getColumnFiltersRow = () => {
+    if (disableHeaderFiltering) {
+      return null;
+    }
+    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
       ref: headerFiltersRef,
@@ -108,8 +128,22 @@ className: classes.headerFilterRow,
       ownerState: rootProps,
-      children: otherProps.getFillers(params, filters, 0, true)
+      children: [leftRenderContext && getColumnFilters({
+        position: GridPinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }), getColumnFilters({
+        renderContext,
+        minFirstColumn: pinnedColumns.left.length,
+        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+      }), rightRenderContext && getColumnFilters({
+        position: GridPinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      })]
     });
   };
   return _extends({}, otherProps, {
-    getColumnFilters
+    getColumnFiltersRow
   });
 };

modern/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -110,2 +110,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
+  const isColumnPinned = React.useCallback((initialValue, field) => apiRef.current.isColumnPinned(field), [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'isColumnPinned', isColumnPinned);
 };

modern/hooks/features/index.js

 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
 export * from './columnPinning';
 export * from './columnReorder';
-export * from './columnResize';
 export * from './rowReorder';
@@ -6,0 +5,0 @@ export * from './treeData';

modern/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -88,7 +88,7 @@ import * as React from 'react';
   }, [isEnabled, triggerRef]);
-  const infiteLoaderPrivateApi = {
+  const infiniteLoaderPrivateApi = {
     getInfiniteLoadingTriggerElement
   };
-  useGridApiMethod(apiRef, infiteLoaderPrivateApi, 'private');
+  useGridApiMethod(apiRef, infiniteLoaderPrivateApi, 'private');
   useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };

modern/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -37,14 +37,2 @@ import * as React from 'react';
 }
-function isLazyLoadingDisabled({
-  lazyLoadingFeatureFlag,
-  rowsLoadingMode
-}) {
-  if (!lazyLoadingFeatureFlag) {
-    return true;
-  }
-  if (rowsLoadingMode !== 'server') {
-    return true;
-  }
-  return false;
-}
 
@@ -64,9 +52,3 @@ /**
   });
-  const {
-    lazyLoading
-  } = props.experimentalFeatures ?? {};
-  const isDisabled = isLazyLoadingDisabled({
-    lazyLoadingFeatureFlag: lazyLoading,
-    rowsLoadingMode: props.rowsLoadingMode
-  });
+  const isDisabled = props.rowsLoadingMode !== 'server';
   const handleRenderedRowsIntervalChange = React.useCallback(params => {
@@ -73,0 +55,0 @@ if (isDisabled) {

modern/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -8,8 +8,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 export const useGridLazyLoaderPreProcessors = (privateApiRef, props) => {
-  const {
-    lazyLoading
-  } = props.experimentalFeatures ?? {};
   const addSkeletonRows = React.useCallback(groupingParams => {
     const rootGroup = groupingParams.tree[GRID_ROOT_GROUP_ID];
-    if (!lazyLoading || props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
+    if (props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
       return groupingParams;
@@ -36,4 +33,4 @@ }
     });
-  }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
+  }, [props.rowCount, props.rowsLoadingMode]);
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateRows', addSkeletonRows);
 };

modern/index.js

 /**
- * @mui/x-data-grid-pro v7.0.0-beta.6
+ * @mui/x-data-grid-pro v7.0.0-beta.7
  *
@@ -4,0 +4,0 @@ * @license MUI X Commercial

modern/internals/index.js

@@ -8,3 +8,2 @@ // eslint-disable-next-line import/export
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-export { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 export { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
@@ -11,0 +10,0 @@ export { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';

modern/utils/releaseInfo.js

 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwOTg1MjQwMDAwMA==";
+  const releaseInfo = "MTcxMDM3MDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
@@ -5,0 +5,0 @@ // A simple hack to set the value in the test environment (has no build step).

package.json

 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.0.0-beta.6",
+  "version": "7.0.0-beta.7",
   "description": "The Pro plan edition of the data grid component (MUI X).",
@@ -38,3 +38,3 @@ "author": "MUI Team",
     "@mui/utils": "^5.15.9",
-    "@mui/x-data-grid": "7.0.0-beta.6",
+    "@mui/x-data-grid": "7.0.0-beta.7",
     "@mui/x-license": "7.0.0-beta.6",
@@ -41,0 +41,0 @@ "@types/format-util": "^1.0.4",

typeOverloads/modules.d.ts

 /// <reference types="react" />
 import { GridRowId, GridPinnedColumnFields } from '@mui/x-data-grid';
 import type { GridRowScrollEndParams, GridRowOrderChangeParams, GridFetchRowsParams } from '../models';
-import type { GridHeaderFilterCellProps } from '../components/headerFiltering/GridHeaderFilterCell';
+import type { GridRenderHeaderFilterProps } from '../components/headerFiltering/GridHeaderFilterCell';
 import type { GridColumnPinningInternalCache } from '../hooks/features/columnPinning/gridColumnPinningInterface';
@@ -11,6 +11,6 @@ import type { GridCanBeReorderedPreProcessingContext } from '../hooks/features/columnReorder/columnReorderInterfaces';
      * Allows to render a component in the column header filter cell.
-     * @param {GridHeaderFilterCellProps} params Object containing parameters for the renderer.
+     * @param {GridRenderHeaderFilterProps} params Object containing parameters for the renderer and `inputRef`.
      * @returns {React.ReactNode} The element to be rendered.
      */
-    renderHeaderFilter?: (params: GridHeaderFilterCellProps) => React.ReactNode;
+    renderHeaderFilter?: (params: GridRenderHeaderFilterProps) => React.ReactNode;
 }
@@ -17,0 +17,0 @@ export interface GridControlledStateEventLookupPro {

utils/releaseInfo.js

@@ -9,3 +9,3 @@ "use strict";
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcwOTg1MjQwMDAwMA==";
+  const releaseInfo = "MTcxMDM3MDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
@@ -12,0 +12,0 @@ // A simple hack to set the value in the test environment (has no build step).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

27

decreased by-10%

Worsened metrics

Total package byte prevSize

1081253

decreased by-9.89%

Number of package files

393

decreased by-6.65%

Lines of code

17220

decreased by-14.49%

Number of medium maintenance alerts

1

increased byInfinity%

Dependency changes

• + Added@mui/x-data-grid@7.0.0-beta.7(transitive)

• - Removed@mui/x-data-grid@7.0.0-beta.6(transitive)

• Updated@mui/x-data-grid@7.0.0-beta.7