@mui/x-data-grid-pro 5.16.0 → 5.17.0

package/CHANGELOG.md

@@ -3,6 +3,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.0
+
+_Sep 2, 2022_
+
+🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and  `@mui/x-date-pickers-pro` packages!
+
+If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Implement Lazy loading (#5214) @DanailH
+
+  Pro users now can try the experimental lazy loading feature.
+  In a few steps, you can load your data on demand, as the rows are displayed.
+
+  To enable this feature, add `experimentalFeatures={{ lazyLoading: true }}`.
+  Lazy Loading requires a few other settings.
+  See the [documentation](https://mui.com/x/react-data-grid/row-updates/#lazy-loading) to explore the example in detail.
+
+- 🚀 Improve `pickers` focus management (#5820) @alexfauquette
+- 🎉 Enable disabling `day` on date range picker depending on `position` (#5773) @alexfauquette
+- ✨ Various improvements
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.0` / `@mui/x-data-grid-pro@v5.17.0` / `@mui/x-data-grid-premium@v5.17.0`
+
+#### Changes
+
+- [DataGrid] Add `sort` prop to columns panel slot (#5888) @gavbrennan
+- [DataGrid] Do not throw if `fieldToFocus` cannot be found (#5871) @cherniavskii
+- [DataGrid] Support `getRowId` in the `replaceRows` method (#5988) @flaviendelangle
+- [DataGridPro] Add class name to row with open detail panel (#5924) @m4theushw
+- [DataGridPro] Fix crash when using `pinnedRows` + `getRowClassName` props and `rows=[]` (#5851) @cherniavskii
+- [DataGridPro] Fix filtering with inactive filter items (#5993) @alexfauquette
+- [DataGridPro] Implement Lazy loading (#5214) @DanailH
+- [DataGridPro] Support pinned columns and dynamic row height (#5782) @m4theushw
+- [DataGridPremium] Add state initializer for column groups (#5963) @alexfauquette
+- [DataGridPremium] Update grouping when `groupingValueGetter` changes (#5919) @flaviendelangle
+- [DataGridPremium] Use the aggregated value on tree data real groups (#5953) @flaviendelangle
+
+### `@mui/x-date-pickers@v5.0.0` / `@mui/x-date-pickers-pro@v5.0.0`
+
+#### Changes
+
+- [DatePicker] Improve focus management (#5820) @alexfauquette
+- [DateRangePicker] Enable disabling `day` depending on `position` (#5773) @alexfauquette
+- [DateTimePicker] Create a new `tabs` component slot (#5972) @LukasTy
+- [pickers] Do not forward validation props to the DOM on field components (#5971) @flaviendelangle
+- [pickers] Do not hardcode `date-fns` elements in field components (#5975) @flaviendelangle
+- [pickers] Do not require `date-fns` in `@mui/x-date-pickers-pro` (#5941) @flaviendelangle
+- [pickers] Fix mobile picker not opening on label click (#5651) @LukasTy
+- [pickers] Improve DOM event management on `useField` (#5901) @flaviendelangle
+- [pickers] Include `community` package `themeAugmentation` in `pro` package types (#5969) @LukasTy
+- [pickers] Rename `DateRangeField` into `SingleInputDateRangeField` (#5961) @flaviendelangle
+- [pickers] Support `isSameError` on field components (#5984) @flaviendelangle
+
+### Docs
+
+- [docs] Add `description` and `default` to pickers slots (#5893) @alexfauquette
+- [docs] Fix typo (#5945) @wettopa
+- [docs] Fix typo `onYearPicker` to `onYearChange` (#5954) @alexfauquette
+- [docs] Update `GridCellParams`'s `value` description (#5849) @cherniavskii
+- [docs] Update `README.md` to match Introduction section of the docs (#5754) @samuelsycamore
+
+### Core
+
+- [core] Fix typo (#5990) @flaviendelangle
+- [core] Remove old babel resolve rule (#5939) @oliviertassinari
+- [core] Remove outdated TODO (#5956) @flaviendelangle
+- [core] Upgrade monorepo (#5960) @cherniavskii
+- [core] Fix statics (#5986) @DanailH
+- [core] Remove unused dependencies (#5937) @oliviertassinari
+- [license] Remove CLI (#5757) @flaviendelangle
+- [test] Fix time zone sensitive test (#5955) @LukasTy
+- [test] Use `userEvent.mousePress` instead of `fireClickEvent` (#5920) @cherniavskii
+
 ## 5.16.0
 
 _Aug 25, 2022_
@@ -585,7 +662,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
   **MonthPicker**: The prop `onMonthChange` has been removed, you can use `onChange` instead since every change is a month change
 
-  **YearPicker**: The prop `onYearPicker` has been removed, you can use `onChange` instead since every change is a year change
+  **YearPicker**: The prop `onYearChange` has been removed, you can use `onChange` instead since every change is a year change
 
   **DayPicker**: The prop `isDateDisabled` has been removed, you can now use the same validation props as for the other components (`maxDate`, `minDate`, `shouldDisableDate`, `disableFuture` and `disablePast`)
 

package/DataGridPro/DataGridPro.js

@@ -276,6 +276,7 @@ DataGridProRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
+    lazyLoading: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -670,6 +671,14 @@ DataGridProRaw.propTypes = {
    */
   onError: PropTypes.func,
 
+  /**
+   * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+   * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFetchRows: PropTypes.func,
+
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -915,6 +924,14 @@ DataGridProRaw.propTypes = {
    */
   rows: PropTypes.array.isRequired,
 
+  /**
+   * Loading rows can be processed on the server or client-side.
+   * Set it to 'client' if you would like enable infnite loading.
+   * Set it to 'server' if you would like to enable lazy loading.
+   * * @default "client"
+   */
+  rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"

package/DataGridPro/useDataGridProComponent.js

@@ -11,6 +11,8 @@ import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/featur
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 import { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
 import { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
+import { useGridLazyLoader } from '../hooks/features/lazyLoader/useGridLazyLoader';
+import { useGridLazyLoaderPreProcessors } from '../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors';
 import { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
 import { useGridRowPinningPreProcessors } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export const useDataGridProComponent = (inputApiRef, props) => {
@@ -25,6 +27,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
+  useGridLazyLoaderPreProcessors(apiRef, props);
   useGridRowPinningPreProcessors(apiRef);
   useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
   // Because it changes the order of the columns.
@@ -78,6 +81,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
+  useGridLazyLoader(apiRef, props);
   useGridColumnMenu(apiRef);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);

package/DataGridPro/useDataGridProProps.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES, GridFeatureModeConstant } from '@mui/x-data-grid';
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -14,6 +14,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowReordering: false,
+  rowsLoadingMode: GridFeatureModeConstant.client,
   getDetailPanelHeight: () => 500
 });
 export const useDataGridProProps = inProps => {

package/components/DataGridProVirtualScroller.js

@@ -274,17 +274,20 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const detailPanels = getDetailPanels();
   const topPinnedRows = getRows({
     renderContext,
-    rows: topPinnedRowsData
+    rows: topPinnedRowsData,
+    position: 'center'
   });
   const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
   const mainRows = getRows({
     renderContext,
-    rowIndexOffset: topPinnedRowsData.length
+    rowIndexOffset: topPinnedRowsData.length,
+    position: 'center'
   });
   const bottomPinnedRows = getRows({
     renderContext,
     rows: bottomPinnedRowsData,
-    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+    position: 'center'
   });
   const contentProps = getContentProps();
   const pinnedColumnsStyle = {
@@ -316,8 +319,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rows: topPinnedRowsData
+          rows: topPinnedRowsData,
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
         className: classes.pinnedRowsRenderZone,
@@ -333,9 +336,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
-          ignoreAutoHeight: true,
           availableSpace: 0,
-          rows: topPinnedRowsData
+          rows: topPinnedRowsData,
+          position: 'right'
         })
       })]
     }) : null, /*#__PURE__*/_jsxs(GridVirtualScrollerContent, _extends({}, contentProps, {
@@ -351,8 +354,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rowIndexOffset: topPinnedRowsData.length
+          rowIndexOffset: topPinnedRowsData.length,
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
         children: mainRows
@@ -368,8 +371,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rowIndexOffset: topPinnedRowsData.length
+          rowIndexOffset: topPinnedRowsData.length,
+          position: 'right'
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
@@ -395,9 +398,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
           rows: bottomPinnedRowsData,
-          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
         className: classes.pinnedRowsRenderZone,
@@ -414,9 +417,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
           rows: bottomPinnedRowsData,
-          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+          position: 'right'
         })
       })]
     }) : null]

package/components/GridDetailPanelToggleCell.js

@@ -129,7 +129,8 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/components/GridTreeDataGroupingCell.js

@@ -164,7 +164,8 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
+import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector';
 export const useGridDetailPanelPreProcessors = (apiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
     if (props.getDetailPanelContent == null) {
@@ -27,5 +28,19 @@ export const useGridDetailPanelPreProcessors = (apiRef, props) => {
     });
     return columnsState;
   }, [apiRef, props.getDetailPanelContent]);
+  const addExpandedClassToRow = React.useCallback((classes, id) => {
+    if (props.getDetailPanelContent == null) {
+      return classes;
+    }
+
+    const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
+
+    if (!expandedRowIds.includes(id)) {
+      return classes;
+    }
+
+    return [...classes, 'MuiDataGrid-row--detailPanelExpanded'];
+  }, [apiRef, props.getDetailPanelContent]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+  useGridRegisterPipeProcessor(apiRef, 'rowClassName', addExpandedClassToRow);
 };

package/hooks/features/infiniteLoader/useGridInfiniteLoader.d.ts

@@ -6,4 +6,4 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
-export declare const useGridInfiniteLoader: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'onRowsScrollEnd' | 'scrollEndThreshold' | 'pagination' | 'paginationMode'>) => void;
+export declare const useGridInfiniteLoader: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'onRowsScrollEnd' | 'scrollEndThreshold' | 'pagination' | 'paginationMode' | 'rowsLoadingMode'>) => void;

package/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector, GridFeatureModeConstant } from '@mui/x-data-grid';
 import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
@@ -14,9 +14,9 @@ export const useGridInfiniteLoader = (apiRef, props) => {
   const contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
   const isInScrollBottomArea = React.useRef(false);
   const handleRowsScrollEnd = React.useCallback(scrollPosition => {
-    const dimensions = apiRef.current.getRootDimensions();
+    const dimensions = apiRef.current.getRootDimensions(); // Prevent the infite loading working in combination with lazy loading
 
-    if (!dimensions) {
+    if (!dimensions || props.rowsLoadingMode !== GridFeatureModeConstant.client) {
       return;
     }
 
@@ -36,7 +36,7 @@ export const useGridInfiniteLoader = (apiRef, props) => {
       apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
       isInScrollBottomArea.current = true;
     }
-  }, [contentHeight, props.scrollEndThreshold, visibleColumns, apiRef, currentPage.rows.length]);
+  }, [contentHeight, props.scrollEndThreshold, props.rowsLoadingMode, visibleColumns, apiRef, currentPage.rows.length]);
   const handleGridScroll = React.useCallback(({
     left,
     top

package/hooks/features/lazyLoader/useGridLazyLoader.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+/**
+ * @requires useGridRows (state)
+ * @requires useGridPagination (state)
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridScroll (method
+ */
+export declare const useGridLazyLoader: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'onFetchRows' | 'rowsLoadingMode' | 'pagination' | 'paginationMode' | 'rowBuffer' | 'experimentalFeatures'>) => void;

package/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { useGridApiEventHandler, GridFeatureModeConstant, useGridSelector, gridSortModelSelector, gridFilterModelSelector, useGridApiOptionHandler } from '@mui/x-data-grid';
+import { useGridVisibleRows } from '@mui/x-data-grid/internals';
+import { getRenderableIndexes } from '@mui/x-data-grid/hooks/features/virtualization/useGridVirtualScroller';
+
+function findSkeletonRowsSection(visibleRows, range) {
+  let {
+    firstRowIndex,
+    lastRowIndex
+  } = range;
+  const visibleRowsSection = visibleRows.slice(range.firstRowIndex, range.lastRowIndex);
+  let startIndex = 0;
+  let endIndex = visibleRowsSection.length - 1;
+  let isSkeletonSectionFound = false;
+
+  while (!isSkeletonSectionFound && firstRowIndex < lastRowIndex) {
+    if (!visibleRowsSection[startIndex].model && !visibleRowsSection[endIndex].model) {
+      isSkeletonSectionFound = true;
+    }
+
+    if (visibleRowsSection[startIndex].model) {
+      startIndex += 1;
+      firstRowIndex += 1;
+    }
+
+    if (visibleRowsSection[endIndex].model) {
+      endIndex -= 1;
+      lastRowIndex -= 1;
+    }
+  }
+
+  return isSkeletonSectionFound ? {
+    firstRowIndex,
+    lastRowIndex
+  } : undefined;
+}
+
+function isLazyLoadingDisabled({
+  lazyLoadingFeatureFlag,
+  rowsLoadingMode,
+  gridDimensions
+}) {
+  if (!lazyLoadingFeatureFlag || !gridDimensions) {
+    return true;
+  }
+
+  if (rowsLoadingMode !== GridFeatureModeConstant.server) {
+    return true;
+  }
+
+  return false;
+}
+/**
+ * @requires useGridRows (state)
+ * @requires useGridPagination (state)
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridScroll (method
+ */
+
+
+export const useGridLazyLoader = (apiRef, props) => {
+  var _props$experimentalFe;
+
+  const visibleRows = useGridVisibleRows(apiRef, props);
+  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  const renderedRowsIntervalCache = React.useRef({
+    firstRowToRender: 0,
+    lastRowToRender: 0
+  });
+  const {
+    lazyLoading
+  } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
+  const getCurrentIntervalToRender = React.useCallback(() => {
+    const currentRenderContext = apiRef.current.unstable_getRenderContext();
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: currentRenderContext.firstRowIndex,
+      lastIndex: currentRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: visibleRows.rows.length,
+      buffer: props.rowBuffer
+    });
+    return {
+      firstRowToRender,
+      lastRowToRender
+    };
+  }, [apiRef, props.rowBuffer, visibleRows.rows.length]);
+  const handleRenderedRowsIntervalChange = React.useCallback(params => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (isLazyLoadingDisabled({
+      lazyLoadingFeatureFlag: lazyLoading,
+      rowsLoadingMode: props.rowsLoadingMode,
+      gridDimensions: dimensions
+    })) {
+      return;
+    }
+
+    const fetchRowsParams = {
+      firstRowToRender: params.firstRowToRender,
+      lastRowToRender: params.lastRowToRender,
+      sortModel,
+      filterModel
+    };
+
+    if (renderedRowsIntervalCache.current.firstRowToRender === params.firstRowToRender && renderedRowsIntervalCache.current.lastRowToRender === params.lastRowToRender) {
+      return;
+    }
+
+    if (sortModel.length === 0 && filterModel.items.length === 0) {
+      const skeletonRowsSection = findSkeletonRowsSection(visibleRows.rows, {
+        firstRowIndex: params.firstRowToRender,
+        lastRowIndex: params.lastRowToRender
+      });
+
+      if (!skeletonRowsSection) {
+        return;
+      }
+
+      fetchRowsParams.firstRowToRender = skeletonRowsSection.firstRowIndex;
+      fetchRowsParams.lastRowToRender = skeletonRowsSection.lastRowIndex;
+    }
+
+    renderedRowsIntervalCache.current = params;
+    apiRef.current.publishEvent('fetchRows', fetchRowsParams);
+  }, [apiRef, props.rowsLoadingMode, sortModel, filterModel, visibleRows.rows, lazyLoading]);
+  const handleGridSortModelChange = React.useCallback(newSortModel => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (isLazyLoadingDisabled({
+      lazyLoadingFeatureFlag: lazyLoading,
+      rowsLoadingMode: props.rowsLoadingMode,
+      gridDimensions: dimensions
+    })) {
+      return;
+    }
+
+    apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+    const {
+      firstRowToRender,
+      lastRowToRender
+    } = getCurrentIntervalToRender();
+    const fetchRowsParams = {
+      firstRowToRender,
+      lastRowToRender,
+      sortModel: newSortModel,
+      filterModel
+    };
+    apiRef.current.publishEvent('fetchRows', fetchRowsParams);
+  }, [apiRef, props.rowsLoadingMode, filterModel, lazyLoading, getCurrentIntervalToRender]);
+  const handleGridFilterModelChange = React.useCallback(newFilterModel => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (isLazyLoadingDisabled({
+      lazyLoadingFeatureFlag: lazyLoading,
+      rowsLoadingMode: props.rowsLoadingMode,
+      gridDimensions: dimensions
+    })) {
+      return;
+    }
+
+    apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+    const {
+      firstRowToRender,
+      lastRowToRender
+    } = getCurrentIntervalToRender();
+    const fetchRowsParams = {
+      firstRowToRender,
+      lastRowToRender,
+      sortModel,
+      filterModel: newFilterModel
+    };
+    apiRef.current.publishEvent('fetchRows', fetchRowsParams);
+  }, [apiRef, props.rowsLoadingMode, sortModel, lazyLoading, getCurrentIntervalToRender]);
+  useGridApiEventHandler(apiRef, 'renderedRowsIntervalChange', handleRenderedRowsIntervalChange);
+  useGridApiEventHandler(apiRef, 'sortModelChange', handleGridSortModelChange);
+  useGridApiEventHandler(apiRef, 'filterModelChange', handleGridFilterModelChange);
+  useGridApiOptionHandler(apiRef, 'fetchRows', props.onFetchRows);
+};

package/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { DataGridProProcessedProps } from '@mui/x-data-grid-pro/models/dataGridProProps';
+import { GridApiPro } from '@mui/x-data-grid-pro/models/gridApiPro';
+export declare const GRID_SKELETON_ROW_ROOT_ID = "auto-generated-skeleton-row-root";
+export declare const useGridLazyLoaderPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'rowCount' | 'rowsLoadingMode' | 'experimentalFeatures'>) => void;

package/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+import { GridFeatureModeConstant } from '@mui/x-data-grid';
+export const GRID_SKELETON_ROW_ROOT_ID = 'auto-generated-skeleton-row-root';
+
+const getSkeletonRowId = index => `${GRID_SKELETON_ROW_ROOT_ID}-${index}`;
+
+export const useGridLazyLoaderPreProcessors = (apiRef, props) => {
+  var _props$experimentalFe;
+
+  const {
+    lazyLoading
+  } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
+  const addSkeletonRows = React.useCallback(groupingParams => {
+    if (!lazyLoading || props.rowsLoadingMode !== GridFeatureModeConstant.server || !props.rowCount || groupingParams.ids.length >= props.rowCount) {
+      return groupingParams;
+    }
+
+    const newRowsIds = [...groupingParams.ids];
+
+    for (let i = 0; i < props.rowCount - groupingParams.ids.length; i += 1) {
+      const skeletonId = getSkeletonRowId(i);
+      newRowsIds.push(skeletonId);
+    }
+
+    return _extends({}, groupingParams, {
+      ids: newRowsIds
+    });
+  }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addSkeletonRows);
+};

package/hooks/features/treeData/gridTreeDataUtils.d.ts

@@ -1,10 +1,12 @@
+/// <reference types="react" />
 import { GridRowTreeConfig, GridFilterState, GridFilterModel } from '@mui/x-data-grid';
-import { GridAggregatedFilterItemApplier } from '@mui/x-data-grid/internals';
+import { GridAggregatedFilterItemApplier, GridApiCommunity } from '@mui/x-data-grid/internals';
 interface FilterRowTreeFromTreeDataParams {
     rowTree: GridRowTreeConfig;
     disableChildrenFiltering: boolean;
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
     filterModel: GridFilterModel;
+    apiRef: React.MutableRefObject<GridApiCommunity>;
 }
 export declare const TREE_DATA_STRATEGY = "tree-data";
 /**

package/hooks/features/treeData/gridTreeDataUtils.js

@@ -31,7 +31,7 @@ export const filterRowTreeFromTreeData = params => {
         passingFilterItems,
         passingQuickFilterValues
       } = isRowMatchingFilters(node.id);
-      isMatchingFilters = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+      isMatchingFilters = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel, params.apiRef);
     }
 
     let filteredDescendantCount = 0;

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -100,7 +100,8 @@ export const useGridTreeDataPreProcessors = (apiRef, props) => {
       rowTree,
       isRowMatchingFilters: params.isRowMatchingFilters,
       disableChildrenFiltering: props.disableChildrenFiltering,
-      filterModel: params.filterModel
+      filterModel: params.filterModel,
+      apiRef
     });
   }, [apiRef, props.disableChildrenFiltering]);
   const sortRows = React.useCallback(params => {

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.16.0
+/** @license MUI v5.17.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/DataGridPro/DataGridPro.js

@@ -276,6 +276,7 @@ DataGridProRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
+    lazyLoading: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -670,6 +671,14 @@ DataGridProRaw.propTypes = {
    */
   onError: PropTypes.func,
 
+  /**
+   * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+   * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFetchRows: PropTypes.func,
+
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -915,6 +924,14 @@ DataGridProRaw.propTypes = {
    */
   rows: PropTypes.array.isRequired,
 
+  /**
+   * Loading rows can be processed on the server or client-side.
+   * Set it to 'client' if you would like enable infnite loading.
+   * Set it to 'server' if you would like to enable lazy loading.
+   * * @default "client"
+   */
+  rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"