Lazy loading flag moved to the root props instead of it being a part …

…of the data source model

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -205,6 +205,7 @@
     },
     "keepColumnPositionIfDraggedOutside": { "type": { "name": "bool" }, "default": "false" },
     "keepNonExistentRowsSelected": { "type": { "name": "bool" }, "default": "false" },
+    "lazyLoading": { "type": { "name": "bool" }, "default": "false" },
     "loading": { "type": { "name": "bool" }, "default": "false" },
     "localeText": { "type": { "name": "object" } },
     "logger": {

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -182,6 +182,7 @@
     },
     "keepColumnPositionIfDraggedOutside": { "type": { "name": "bool" }, "default": "false" },
     "keepNonExistentRowsSelected": { "type": { "name": "bool" }, "default": "false" },
+    "lazyLoading": { "type": { "name": "bool" }, "default": "false" },
     "loading": { "type": { "name": "bool" }, "default": "false" },
     "localeText": { "type": { "name": "object" } },
     "logger": {

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -232,6 +232,9 @@
     "keepNonExistentRowsSelected": {
       "description": "If <code>true</code>, the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages."
     },
+    "lazyLoading": {
+      "description": "Used together with <code>unstable_dataSource</code> to enable lazy loading. If enabled, the grid will stop adding <code>paginationModel</code> to the data requests (<code>getRows</code>) and start sending <code>start</code> and <code>end</code> values depending on the scroll position. A new request will be made whenever the user scrolls to the area that has skeleton rows."
+    },
     "loading": { "description": "If <code>true</code>, a loading overlay is displayed." },
     "localeText": {
       "description": "Set the locale text of the Data Grid. You can find all the translation keys supported in <a href=\"https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts\">the source</a> in the GitHub repository."

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -213,6 +213,9 @@
     "keepNonExistentRowsSelected": {
       "description": "If <code>true</code>, the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages."
     },
+    "lazyLoading": {
+      "description": "Used together with <code>unstable_dataSource</code> to enable lazy loading. If enabled, the grid will stop adding <code>paginationModel</code> to the data requests (<code>getRows</code>) and start sending <code>start</code> and <code>end</code> values depending on the scroll position. A new request will be made whenever the user scrolls to the area that has skeleton rows."
+    },
     "loading": { "description": "If <code>true</code>, a loading overlay is displayed." },
     "localeText": {
       "description": "Set the locale text of the Data Grid. You can find all the translation keys supported in <a href=\"https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts\">the source</a> in the GitHub repository."

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -502,6 +502,13 @@ DataGridPremiumRaw.propTypes = {
    * @default false
    */
   keepNonExistentRowsSelected: PropTypes.bool,
+  /**
+   * Used together with `unstable_dataSource` to enable lazy loading.
+   * If enabled, the grid will stop adding `paginationModel` to the data requests (`getRows`) and start sending `start` and `end` values depending on the scroll position.
+   * A new request will be made whenever the user scrolls to the area that has skeleton rows.
+   * @default false
+   */
+  lazyLoading: PropTypes.bool,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -1049,7 +1056,6 @@ DataGridPremiumRaw.propTypes = {
     getChildrenCount: PropTypes.func,
     getGroupKey: PropTypes.func,
     getRows: PropTypes.func.isRequired,
-    lazyLoaded: PropTypes.bool,
     updateRow: PropTypes.func,
   }),
   unstable_dataSourceCache: PropTypes.shape({

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -457,6 +457,13 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   keepNonExistentRowsSelected: PropTypes.bool,
+  /**
+   * Used together with `unstable_dataSource` to enable lazy loading.
+   * If enabled, the grid will stop adding `paginationModel` to the data requests (`getRows`) and start sending `start` and `end` values depending on the scroll position.
+   * A new request will be made whenever the user scrolls to the area that has skeleton rows.
+   * @default false
+   */
+  lazyLoading: PropTypes.bool,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -948,7 +955,6 @@ DataGridProRaw.propTypes = {
     getChildrenCount: PropTypes.func,
     getGroupKey: PropTypes.func,
     getRows: PropTypes.func.isRequired,
-    lazyLoaded: PropTypes.bool,
     updateRow: PropTypes.func,
   }),
   unstable_dataSourceCache: PropTypes.shape({

packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts

@@ -57,16 +57,20 @@ export const useGridDataSource = (
     | 'filterMode'
     | 'paginationMode'
     | 'treeData'
+    | 'lazyLoading'
   >,
 ) => {
   const nestedDataManager = useLazyRef<NestedDataManager, void>(
     () => new NestedDataManager(apiRef),
   ).current;
   const groupsToAutoFetch = useGridSelector(apiRef, gridRowGroupsToFetchSelector);
   const scheduledGroups = React.useRef<number>(0);
+
+  const isLazyLoaded = !!props.unstable_dataSource && props.lazyLoading;
   const rowFetchSlice = React.useRef(
-    props.unstable_dataSource?.lazyLoaded ? { start: 0, end: 10 } : {}, // TODO: predict the initial `end` from the viewport
+    isLazyLoaded ? { start: 0, end: 10 } : {}, // TODO: predict the initial `end` from the viewport
   );
+
   const onError = props.unstable_onDataSourceError;
 
   const [cache, setCache] = React.useState<GridDataSourceCache>(() =>
@@ -97,7 +101,7 @@ export const useGridDataSource = (
 
       if (cachedData !== undefined) {
         const rows = cachedData.rows;
-        if (props.unstable_dataSource?.lazyLoaded === true) {
+        if (isLazyLoaded) {
           apiRef.current.unstable_replaceRows(fetchParams.start, rows);
         } else {
           apiRef.current.setRows(rows);
@@ -119,7 +123,7 @@ export const useGridDataSource = (
         if (getRowsResponse.rowCount) {
           apiRef.current.setRowCount(getRowsResponse.rowCount);
         }
-        if (props.unstable_dataSource?.lazyLoaded === true) {
+        if (isLazyLoaded) {
           apiRef.current.unstable_replaceRows(fetchParams.start, getRowsResponse.rows);
         } else {
           apiRef.current.setRows(getRowsResponse.rows);
@@ -135,20 +139,20 @@ export const useGridDataSource = (
       nestedDataManager,
       apiRef,
       props.unstable_dataSource?.getRows,
-      props.unstable_dataSource?.lazyLoaded,
+      isLazyLoaded,
       onError,
       rowFetchSlice,
     ],
   );
 
   const fetchRowBatch = React.useCallback(
     (fetchParams: GridGetRowsParams) => {
-      if (props.unstable_dataSource?.lazyLoaded && fetchParams.start && fetchParams.end) {
+      if (isLazyLoaded && fetchParams.start && fetchParams.end) {
         rowFetchSlice.current = { start: Number(fetchParams.start), end: fetchParams.end };
       }
       return fetchRows();
     },
-    [props.unstable_dataSource?.lazyLoaded, fetchRows],
+    [isLazyLoaded, fetchRows],
   );
 
   const fetchRowChildren = React.useCallback<GridDataSourcePrivateApi['fetchRowChildren']>(

packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts

@@ -28,12 +28,15 @@ const INTERVAL_CACHE_INITIAL_STATE = {
  */
 export const useGridDataSourceLazyLoader = (
   privateApiRef: React.MutableRefObject<GridPrivateApiPro>,
-  props: Pick<DataGridProProcessedProps, 'pagination' | 'paginationMode' | 'unstable_dataSource'>,
+  props: Pick<
+    DataGridProProcessedProps,
+    'pagination' | 'paginationMode' | 'unstable_dataSource' | 'lazyLoading'
+  >,
 ): void => {
   const sortModel = useGridSelector(privateApiRef, gridSortModelSelector);
   const filterModel = useGridSelector(privateApiRef, gridFilterModelSelector);
   const renderedRowsIntervalCache = React.useRef(INTERVAL_CACHE_INITIAL_STATE);
-  const isDisabled = props.unstable_dataSource?.lazyLoaded !== true;
+  const isDisabled = !props.unstable_dataSource || props.lazyLoading !== true;
 
   const handleRenderedRowsIntervalChange = React.useCallback<
     GridEventListener<'renderedRowsIntervalChange'>

packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoaderPreProcessors.tsx

@@ -10,13 +10,14 @@ const getSkeletonRowId = (index: number) => `${GRID_SKELETON_ROW_ROOT_ID}-${inde
 
 export const useGridDataSourceLazyLoaderPreProcessors = (
   privateApiRef: React.MutableRefObject<GridPrivateApiPro>,
-  props: Pick<DataGridProProcessedProps, 'unstable_dataSource'>,
+  props: Pick<DataGridProProcessedProps, 'unstable_dataSource' | 'lazyLoading'>,
 ) => {
   const addSkeletonRows = React.useCallback<GridPipeProcessor<'hydrateRows'>>(
     (groupingParams) => {
       const rootGroup = groupingParams.tree[GRID_ROOT_GROUP_ID] as GridGroupNode;
+      const isDisabled = !props.unstable_dataSource || props.lazyLoading !== true;
 
-      if (props.unstable_dataSource?.lazyLoaded !== true) {
+      if (isDisabled) {
         return groupingParams;
       }
 
@@ -46,7 +47,7 @@ export const useGridDataSourceLazyLoaderPreProcessors = (
         tree,
       };
     },
-    [props.unstable_dataSource?.lazyLoaded],
+    [props.unstable_dataSource, props.lazyLoading],
   );
 
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateRows', addSkeletonRows);

packages/x-data-grid-pro/src/internals/propValidation.ts

@@ -34,7 +34,7 @@ export const propValidatorsDataGridPro: PropValidator<DataGridProProcessedProps>
   (props) =>
     (props.signature !== GridSignature.DataGrid &&
       props.rowsLoadingMode === 'server' &&
-      props.unstable_dataSource?.lazyLoaded === true &&
-      'MUI X: Usage of the client side lazy loading (`rowsLoadingMode="server"`) cannot be used together with server side lazy loading `unstable_dataSource="{ ..., lazyLoaded: true}"`.') ||
+      props.lazyLoading &&
+      'MUI X: Usage of the client side lazy loading (`rowsLoadingMode="server"`) cannot be used together with server side lazy loading `lazyLoading="true"`.') ||
     undefined,
 ];

packages/x-data-grid-pro/src/models/dataGridProProps.ts

@@ -137,6 +137,13 @@ export interface DataGridProPropsWithDefaultValue<R extends GridValidRowModel =
    * @default false
    */
   keepColumnPositionIfDraggedOutside: boolean;
+  /**
+   * Used together with `unstable_dataSource` to enable lazy loading.
+   * If enabled, the grid will stop adding `paginationModel` to the data requests (`getRows`) and start sending `start` and `end` values depending on the scroll position.
+   * A new request will be made whenever the user scrolls to the area that has skeleton rows.
+   * @default false
+   */
+  lazyLoading: boolean;
 }
 
 interface DataGridProDataSourceProps {

packages/x-data-grid/src/models/gridDataSource.ts

@@ -75,11 +75,6 @@ export interface GridDataSource {
    * @returns {number} The number of children the row has
    */
   getChildrenCount?: (row: GridRowModel) => number;
-  /**
-   * If enabled, the grid will send `start` and `end` instead of `paginationModel` to `getRows` and a new request will be made
-   * whenever the user scrolls to the area that has skeleton rows
-   */
-  lazyLoaded?: boolean;
 }
 
 export interface GridDataSourceCache {