@mui/x-data-grid 5.7.0 → 5.8.0

package/node/components/cell/GridEditInputCell.js

@@ -151,7 +151,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: _propTypes.default.func.isRequired,
@@ -176,7 +176,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.any.isRequired,
+  row: _propTypes.default.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridEditSingleSelectCell.js

@@ -211,7 +211,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: _propTypes.default.func.isRequired,
@@ -236,7 +236,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.any.isRequired,
+  row: _propTypes.default.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/columnHeaders/{ColumnHeaderFilterIcon.js → GridColumnHeaderFilterIconButton.js}

@@ -5,12 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ColumnHeaderFilterIcon = ColumnHeaderFilterIcon;
+exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButton;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _material = require("@mui/material");
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -45,11 +47,13 @@ const useUtilityClasses = ownerState => {
   return (0, _material.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 
-function ColumnHeaderFilterIcon(props) {
+function GridColumnHeaderFilterIconButton(props) {
   var _rootProps$components;
 
   const {
-    counter
+    counter,
+    field,
+    onClick
   } = props;
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -70,7 +74,11 @@ function ColumnHeaderFilterIcon(props) {
     } else {
       apiRef.current.showFilterPanel();
     }
-  }, [apiRef]);
+
+    if (onClick) {
+      onClick(apiRef.current.getColumnHeaderParams(field), event);
+    }
+  }, [apiRef, field, onClick]);
 
   if (!counter) {
     return null;
@@ -99,4 +107,14 @@ function ColumnHeaderFilterIcon(props) {
       }), counter === 1 && iconButton]
     })
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: _propTypes.default.number,
+  field: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func
+} : void 0;

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -31,8 +31,6 @@ var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
 
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 
-var _ColumnHeaderFilterIcon = require("./ColumnHeaderFilterIcon");
-
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
 
 var _gridClasses = require("../../constants/gridClasses");
@@ -68,7 +66,7 @@ const useUtilityClasses = ownerState => {
 };
 
 function GridColumnHeaderItem(props) {
-  var _apiRef$current$getRo, _column$sortingOrder, _column$headerName, _rootProps$components;
+  var _apiRef$current$getRo, _column$sortingOrder, _rootProps$components, _column$headerName, _rootProps$components2;
 
   const {
     column,
@@ -167,9 +165,10 @@ function GridColumnHeaderItem(props) {
   });
   const sortingOrder = (_column$sortingOrder = column.sortingOrder) != null ? _column$sortingOrder : rootProps.sortingOrder;
   const columnTitleIconButtons = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [!rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnHeaderFilterIcon.ColumnHeaderFilterIcon, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnHeaderFilterIconButton, (0, _extends2.default)({
+      field: column.field,
       counter: filterItemsCounter
-    }), column.sortable && !column.hideSortIcons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSortIcon.GridColumnHeaderSortIcon, {
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSortIcon.GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -234,7 +233,7 @@ function GridColumnHeaderItem(props) {
       open: columnMenuOpen,
       target: iconButtonRef.current,
       ContentComponent: rootProps.components.ColumnMenu,
-      contentComponentProps: (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnMenu,
+      contentComponentProps: (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnMenu,
       onExited: handleExited
     })]
   }));

package/node/components/columnHeaders/index.js

@@ -43,6 +43,19 @@ Object.keys(_GridColumnHeaderSortIcon).forEach(function (key) {
   });
 });
 
+var _GridColumnHeaderFilterIconButton = require("./GridColumnHeaderFilterIconButton");
+
+Object.keys(_GridColumnHeaderFilterIconButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnHeaderFilterIconButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnHeaderFilterIconButton[key];
+    }
+  });
+});
+
 var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
 
 Object.keys(_GridColumnHeaderTitle).forEach(function (key) {

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -150,7 +150,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: _propTypes.default.func.isRequired,
@@ -173,7 +173,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.any.isRequired,
+  row: _propTypes.default.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/containers/GridRoot.js

@@ -19,8 +19,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/material/utils");
 
-var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
-
 var _GridRootStyles = require("./GridRootStyles");
 
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
@@ -57,21 +55,34 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = (0, _utils.useForkRef)(rootContainerRef, ref);
-  apiRef.current.rootElementRef = rootContainerRef;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
-      ref: handleRef,
-      className: (0, _clsx.default)(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, _gridClasses.gridClasses.root, rootProps.autoHeight && _gridClasses.gridClasses.autoHeight),
-      role: "grid",
-      "aria-colcount": visibleColumns.length,
-      "aria-rowcount": totalRowCount,
-      "aria-multiselectable": !rootProps.disableMultipleSelection,
-      "aria-label": rootProps['aria-label'],
-      "aria-labelledby": rootProps['aria-labelledby']
-    }, other, {
-      children: children
-    }))
-  });
+  apiRef.current.rootElementRef = rootContainerRef; // Our implementation of <NoSsr />
+
+  const [mountedState, setMountedState] = React.useState(false);
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    setMountedState(true);
+  }, []);
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    if (mountedState) {
+      apiRef.current.unstable_updateGridDimensionsRef();
+    }
+  }, [apiRef, mountedState]);
+
+  if (!mountedState) {
+    return null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
+    ref: handleRef,
+    className: (0, _clsx.default)(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, _gridClasses.gridClasses.root, rootProps.autoHeight && _gridClasses.gridClasses.autoHeight),
+    role: "grid",
+    "aria-colcount": visibleColumns.length,
+    "aria-rowcount": totalRowCount,
+    "aria-multiselectable": !rootProps.disableMultipleSelection,
+    "aria-label": rootProps['aria-label'],
+    "aria-labelledby": rootProps['aria-labelledby']
+  }, other, {
+    children: children
+  }));
 });
 exports.GridRoot = GridRoot;
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {

package/node/components/menu/columnMenu/GridColumnMenu.js

@@ -53,7 +53,7 @@ const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(pro
     onClick: hideMenu,
     column: currentColumn
   })];
-  const preProcessedButtons = apiRef.current.unstable_applyPreProcessors('columnMenu', defaultButtons, currentColumn);
+  const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('columnMenu', defaultButtons, currentColumn);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuContainer.GridColumnMenuContainer, (0, _extends2.default)({
     ref: ref
   }, props, {

package/node/components/panel/GridPreferencesPanel.js

@@ -36,7 +36,7 @@ const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferen
   const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const preferencePanelState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
-  const panelContent = apiRef.current.unstable_applyPreProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : _gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
+  const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : _gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.Panel, (0, _extends2.default)({
     ref: ref,
     as: rootProps.components.BasePopper,

package/node/constants/defaultGridSlotsComponents.js

@@ -71,6 +71,7 @@ const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, DEFAULT_GR
   BaseTooltip: _Tooltip.default,
   BasePopper: _Popper.default,
   Cell: _components.GridCell,
+  ColumnHeaderFilterIconButton: _components.GridColumnHeaderFilterIconButton,
   ColumnMenu: _components.GridColumnMenu,
   ErrorOverlay: _ErrorOverlay.ErrorOverlay,
   Footer: _components.GridFooter,

package/node/hooks/core/pipeProcessing/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridPipeProcessingApi = require("./gridPipeProcessingApi");
+
+Object.keys(_gridPipeProcessingApi).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridPipeProcessingApi[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridPipeProcessingApi[key];
+    }
+  });
+});
+
+var _useGridPipeProcessing = require("./useGridPipeProcessing");
+
+Object.keys(_useGridPipeProcessing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridPipeProcessing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridPipeProcessing[key];
+    }
+  });
+});
+
+var _useGridRegisterPipeProcessor = require("./useGridRegisterPipeProcessor");
+
+Object.keys(_useGridRegisterPipeProcessor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridRegisterPipeProcessor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridRegisterPipeProcessor[key];
+    }
+  });
+});

package/node/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridPipeProcessing = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _events = require("../../../models/events");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Implement the Pipeline Pattern
+ *
+ * More information and detailed example in (TODO add link to technical doc when ready)
+ *
+ * Some plugins contains custom logic to enrich data provided by other plugins or components.
+ * For instance, the row grouping plugin needs to add / remove the grouping columns when the grid columns are updated.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin containing the custom logic must use:
+ *
+ * - `useGridRegisterPipeProcessor` to register their processor.
+ *   When the processor changes, it will fire `GridEvents.pipeProcessorRegister` to re-apply the whole pipe.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin or component that needs to enrich its data must use:
+ *
+ * - `apiRef.current.unstable_applyPipeProcessors` to run in chain all the processors of a given group.
+ *
+ * - `GridEvents.pipeProcessorRegister` to re-apply the whole pipe when a processor of this pipe changes.
+ *
+ */
+const useGridPipeProcessing = apiRef => {
+  const processorsCache = React.useRef({});
+  const registerPipeProcessor = React.useCallback((group, id, processor) => {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {};
+    }
+
+    const groupProcessors = processorsCache.current[group];
+    const oldProcessor = groupProcessors[id];
+
+    if (oldProcessor !== processor) {
+      processorsCache.current[group] = (0, _extends2.default)({}, groupProcessors, {
+        [id]: processor
+      });
+      apiRef.current.publishEvent(_events.GridEvents.pipeProcessorRegister, group);
+    }
+
+    return () => {
+      const _ref = processorsCache.current[group],
+            otherProcessors = (0, _objectWithoutPropertiesLoose2.default)(_ref, [id].map(_toPropertyKey2.default));
+      processorsCache.current[group] = otherProcessors;
+      apiRef.current.publishEvent(_events.GridEvents.pipeProcessorUnregister, group);
+    };
+  }, [apiRef]);
+  const applyPipeProcessors = React.useCallback((...args) => {
+    const [group, value, context] = args;
+
+    if (!processorsCache.current[group]) {
+      return value;
+    }
+
+    const preProcessors = Object.values(processorsCache.current[group]);
+    return preProcessors.reduce((acc, preProcessor) => {
+      return preProcessor(acc, context);
+    }, value);
+  }, []);
+  const preProcessingApi = {
+    unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_applyPipeProcessors: applyPipeProcessors
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, preProcessingApi, 'GridPipeProcessingApi');
+};
+
+exports.useGridPipeProcessing = useGridPipeProcessing;

package/node/hooks/core/{preProcessing/useGridRegisterPreProcessor.js → pipeProcessing/useGridRegisterPipeProcessor.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridRegisterPreProcessor = void 0;
+exports.useGridRegisterPipeProcessor = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -16,11 +16,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * TODO: Rename `useGridRegisterPipeProcessor`
  */
-const useGridRegisterPreProcessor = (apiRef, group, callback) => {
+const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
-    cleanup.current = apiRef.current.unstable_registerPreProcessor(group, id.current, callback);
+    cleanup.current = apiRef.current.unstable_registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   (0, _useFirstRender.useFirstRender)(() => {
     registerPreProcessor();
@@ -42,4 +42,4 @@ const useGridRegisterPreProcessor = (apiRef, group, callback) => {
   }, [registerPreProcessor]);
 };
 
-exports.useGridRegisterPreProcessor = useGridRegisterPreProcessor;
+exports.useGridRegisterPipeProcessor = useGridRegisterPipeProcessor;

package/node/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -33,31 +33,42 @@ exports.GRID_STRATEGIES_PROCESSORS = GRID_STRATEGIES_PROCESSORS;
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
  *
- * Some plugins contain custom logic that must only be run if the right strategy is active.
- * For instance, the tree data plugin has:
- * - custom row tree creation algorithm.
- * - custom sorting algorithm.
- * - custom filtering algorithm.
+ * More information and detailed example in (TODO add link to technical doc when ready)
+ *
+ * Some plugins contains custom logic that must only be applied if the right strategy is active.
+ * For instance, the row grouping plugin has a custom filtering algorithm.
+ * This algorithm must be applied by the filtering plugin if the row grouping is the current way of grouping rows,
+ * but not if the tree data is the current way of grouping rows.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin containing the custom logic must use:
+ *
+ * - `useGridRegisterStrategyProcessor` to register their processor.
+ *   When the processor of the active strategy changes, it will fire `GridEvents.activeStrategyProcessorChange` to re-apply the processor.
  *
- * These plugins must use:
- * - `apiRef.current.unstable_registerStrategyProcessor` to register their processors.
  * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
  *
- * Some hooks need to run the custom logic of the active strategy.
- * For instance, the `useGridFiltering` wants to run:
- * - the tree data filtering if the tree data is the current way of grouping rows.
- * - the row grouping filtering if the row grouping is the current way of grouping rows.
- * - the flat filtering if there is no grouping of the rows (equivalent to the "none" strategy).
+ * =====================================================================================================================
+ *
+ * The plugin or component that needs to apply the custom logic of the current strategy must use:
+ *
+ * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * These hooks must use:
- * - `apiRef.current.unstable_applyStrategyProcessor` to run a processor.
  * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
  *    Warning: Be careful not to apply the processor several times.
  *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
  *    So listening to both would most likely run your logic twice.
- * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes
+ *
+ * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ *
+ * =====================================================================================================================
  *
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
+ * For now, there is only one strategy group named `rowTree` which customize
+ * - row tree creation algorithm.
+ * - sorting algorithm.
+ * - filtering algorithm.
  */
 const useGridStrategyProcessing = apiRef => {
   const availableStrategies = React.useRef(new Map());

package/node/hooks/core/useGridInitialization.js

@@ -13,7 +13,7 @@ var _useGridErrorHandler = require("./useGridErrorHandler");
 
 var _useGridLocaleText = require("./useGridLocaleText");
 
-var _preProcessing = require("./preProcessing");
+var _pipeProcessing = require("./pipeProcessing");
 
 var _strategyProcessing = require("./strategyProcessing");
 
@@ -27,7 +27,7 @@ const useGridInitialization = (inputApiRef, props) => {
   (0, _useGridLoggerFactory.useGridLoggerFactory)(apiRef, props);
   (0, _useGridErrorHandler.useGridErrorHandler)(apiRef, props);
   (0, _useGridStateInitialization.useGridStateInitialization)(apiRef, props);
-  (0, _preProcessing.useGridPreProcessing)(apiRef);
+  (0, _pipeProcessing.useGridPipeProcessing)(apiRef);
   (0, _strategyProcessing.useGridStrategyProcessing)(apiRef);
   (0, _useGridLocaleText.useGridLocaleText)(apiRef, props);
   return apiRef;

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -144,7 +144,7 @@ const useGridColumnHeaders = props => {
         column: column,
         colIndex: columnIndex,
         isResizing: resizeCol === column.field,
-        isLastColumn: columnIndex === columns.length - 1,
+        isLastColumn: columnIndex === visibleColumns.length - 1,
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex