@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-beta.0

package/node/components/virtualization/GridVirtualScrollerFiller.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridVirtualScrollerFiller = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _system = require("@mui/system");
+var _fastMemo = require("../../utils/fastMemo");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _dimensions = require("../../hooks/features/dimensions");
+var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+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 Filler = (0, _system.styled)('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  width: 'var(--DataGrid-rowWidth)',
+  boxSizing: 'border-box'
+});
+const Pinned = (0, _system.styled)('div')({
+  position: 'sticky',
+  height: '100%',
+  boxSizing: 'border-box',
+  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  backgroundColor: 'var(--DataGrid-pinnedBackground)'
+});
+const PinnedLeft = (0, _system.styled)(Pinned)({
+  left: 0,
+  borderRight: '1px solid var(--DataGrid-rowBorderColor)'
+});
+const PinnedRight = (0, _system.styled)(Pinned)({
+  right: 0,
+  borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
+});
+const Main = (0, _system.styled)('div')({
+  flexGrow: 1,
+  borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+});
+function GridVirtualScrollerFiller() {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const {
+    viewportOuterSize,
+    minimumSize,
+    hasScrollX,
+    scrollbarSize,
+    leftPinnedWidth,
+    rightPinnedWidth
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
+  const scrollbarHeight = hasScrollX ? scrollbarSize : 0;
+  const expandedHeight = viewportOuterSize.height - minimumSize.height - scrollbarHeight;
+  const height = Math.max(scrollbarHeight, expandedHeight);
+  if (height === 0) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Filler, {
+    className: _constants.gridClasses.filler,
+    role: "presentation",
+    style: {
+      height
+    },
+    children: [leftPinnedWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedLeft, {
+      className: _constants.gridClasses['filler--pinnedLeft'],
+      style: {
+        width: leftPinnedWidth
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Main, {}), rightPinnedWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedRight, {
+      className: _constants.gridClasses['filler--pinnedRight'],
+      style: {
+        width: rightPinnedWidth
+      }
+    })]
+  });
+}
+const Memoized = exports.GridVirtualScrollerFiller = (0, _fastMemo.fastMemo)(GridVirtualScrollerFiller);

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -34,7 +34,8 @@ const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
   position: 'absolute',
   display: 'flex',
   // Prevents margin collapsing when using `getRowSpacing`
-  flexDirection: 'column'
+  flexDirection: 'column',
+  transform: 'translate3d(0, var(--DataGrid-offsetTop), 0)'
 });
 const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {

package/node/constants/defaultGridSlotsComponents.js

@@ -10,25 +10,30 @@ var _components = require("../components");
 var _GridCell = require("../components/cell/GridCell");
 var _GridColumnHeaders = require("../components/GridColumnHeaders");
 var _GridColumnMenu = require("../components/menu/columnMenu/GridColumnMenu");
+var _GridDetailPanels = require("../components/GridDetailPanels");
+var _GridPinnedRows = require("../components/GridPinnedRows");
 var _GridNoResultsOverlay = require("../components/GridNoResultsOverlay");
 var _material = _interopRequireDefault(require("../material"));
 // TODO: camelCase these key. It's a private helper now.
 // Remove then need to call `uncapitalizeObjectKeys`.
 const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = exports.DATA_GRID_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _material.default, {
-  cell: _GridCell.GridCellV7,
+  cell: _GridCell.GridCell,
   skeletonCell: _components.GridSkeletonCell,
   columnHeaderFilterIconButton: _components.GridColumnHeaderFilterIconButton,
   columnMenu: _GridColumnMenu.GridColumnMenu,
   columnHeaders: _GridColumnHeaders.GridColumnHeaders,
+  detailPanels: _GridDetailPanels.GridDetailPanels,
   footer: _components.GridFooter,
   footerRowCount: _components.GridRowCount,
   toolbar: null,
+  pinnedRows: _GridPinnedRows.GridPinnedRows,
   loadingOverlay: _components.GridLoadingOverlay,
   noResultsOverlay: _GridNoResultsOverlay.GridNoResultsOverlay,
   noRowsOverlay: _components.GridNoRowsOverlay,
   pagination: _components.GridPagination,
   filterPanel: _components.GridFilterPanel,
   columnsPanel: _components.GridColumnsPanel,
+  columnsManagement: _components.GridColumnsManagement,
   panel: _components.GridPanel,
   row: _components.GridRow
 });

package/node/constants/gridClasses.js

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

package/node/constants/localeTextConstants.js

@@ -33,12 +33,10 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download as Excel',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'Find column',
-  columnsPanelTextFieldPlaceholder: 'Column title',
-  columnsPanelDragIconLabel: 'Reorder column',
-  columnsPanelShowAllButton: 'Show all',
-  columnsPanelHideAllButton: 'Hide all',
+  // Columns management text
+  columnsManagementSearchTitle: 'Search',
+  columnsManagementNoColumns: 'No columns',
+  columnsManagementShowHideAllText: 'Show/Hide All',
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
   filterPanelRemoveAll: 'Remove all',

package/node/hooks/core/gridCoreSelector.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridThemeSelector = void 0;
+/**
+ * Get the theme state
+ * @category Core
+ */
+const gridThemeSelector = state => state.theme;
+exports.gridThemeSelector = gridThemeSelector;

package/node/hooks/core/useGridApiInitialization.js

@@ -107,6 +107,9 @@ function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent,
     publishEvent
   }, 'public');
+  if (inputApiRef && !inputApiRef.current?.state) {
+    inputApiRef.current = publicApiRef.current;
+  }
   React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);
   React.useEffect(() => {
     const api = privateApiRef.current;

package/node/hooks/core/useGridInitialization.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridInitialization = void 0;
+var _useGridRefs = require("./useGridRefs");
+var _useGridTheme = require("./useGridTheme");
 var _useGridLoggerFactory = require("./useGridLoggerFactory");
 var _useGridApiInitialization = require("./useGridApiInitialization");
 var _useGridLocaleText = require("./useGridLocaleText");
@@ -15,6 +17,8 @@ var _useGridStateInitialization = require("./useGridStateInitialization");
  */
 const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = (0, _useGridApiInitialization.useGridApiInitialization)(inputApiRef, props);
+  (0, _useGridRefs.useGridRefs)(privateApiRef);
+  (0, _useGridTheme.useGridTheme)(privateApiRef);
   (0, _useGridLoggerFactory.useGridLoggerFactory)(privateApiRef, props);
   (0, _useGridStateInitialization.useGridStateInitialization)(privateApiRef, props);
   (0, _pipeProcessing.useGridPipeProcessing)(privateApiRef);

package/node/hooks/core/useGridRefs.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridRefs = void 0;
+var React = _interopRequireWildcard(require("react"));
+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 useGridRefs = apiRef => {
+  const rootElementRef = React.useRef(null);
+  const mainElementRef = React.useRef(null);
+  const virtualScrollerRef = React.useRef(null);
+  apiRef.current.register('public', {
+    rootElementRef
+  });
+  apiRef.current.register('private', {
+    mainElementRef,
+    virtualScrollerRef
+  });
+};
+exports.useGridRefs = useGridRefs;

package/node/hooks/core/useGridTheme.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridTheme = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+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 useGridTheme = apiRef => {
+  const theme = (0, _styles.useTheme)();
+  if (!apiRef.current.state.theme) {
+    apiRef.current.state.theme = theme;
+  }
+  const isFirstEffect = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstEffect.current) {
+      isFirstEffect.current = false;
+    } else {
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        theme
+      }));
+    }
+  }, [apiRef, theme]);
+};
+exports.useGridTheme = useGridTheme;

package/node/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -50,16 +50,14 @@ const createGroupLookup = columnGroupingModel => {
   return (0, _extends2.default)({}, groupLookup);
 };
 const columnGroupsStateInitializer = (state, props, apiRef) => {
-  if (!props.experimentalFeatures?.columnGrouping) {
+  if (!props.columnGroupingModel) {
     return state;
   }
   const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
   const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
   const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
   const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(props.columnGroupingModel ?? []);
-  const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel,
-  // @ts-expect-error Move this part to `Pro` package
-  apiRef.current.state.pinnedColumns ?? {});
+  const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel, apiRef.current.state.pinnedColumns ?? {});
   const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
   return (0, _extends2.default)({}, state, {
     columnGrouping: {
@@ -89,16 +87,14 @@ const useGridColumnGrouping = (apiRef, props) => {
     return columnGroupLookup;
   }, [apiRef]);
   const columnGroupingApi = {
-    unstable_getColumnGroupPath: getColumnGroupPath,
-    unstable_getAllGroupDetails: getAllGroupDetails
+    getColumnGroupPath,
+    getAllGroupDetails
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnGroupingApi, 'public');
   const handleColumnIndexChange = React.useCallback(() => {
     const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(props.columnGroupingModel ?? []);
     apiRef.current.setState(state => {
       const orderedFields = state.columns?.orderedFields ?? [];
-
-      // @ts-expect-error Move this logic to `Pro` package
       const pinnedColumns = state.pinnedColumns ?? {};
       const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return (0, _extends2.default)({}, state, {
@@ -109,9 +105,6 @@ const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
-    if (!props.experimentalFeatures?.columnGrouping) {
-      return;
-    }
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
     const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
@@ -130,7 +123,7 @@ const useGridColumnGrouping = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, props.experimentalFeatures?.columnGrouping]);
+  }, [apiRef]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnIndexChange', handleColumnIndexChange);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);