Pagination params adjustment inside lazyLoading hook. Use the same ap…

…i for row slice fetching
mui · Oct 1, 2024 · 9230211 · 9230211
1 parent 5ae3b22
commit 9230211
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts
@@ -10,11 +10,7 @@ import {
   gridPaginationModelSelector,
   gridFilteredSortedRowIdsSelector,
 } from '@mui/x-data-grid';
-import {
-  GridGetRowsParams,
-  gridRowGroupsToFetchSelector,
-  GridStateInitializer,
-} from '@mui/x-data-grid/internals';
+import { gridRowGroupsToFetchSelector, GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { gridGetRowsParamsSelector, gridDataSourceErrorsSelector } from './gridDataSourceSelector';
@@ -96,22 +92,6 @@ export const useGridDataSource = (
     }),
   );
 
-  // Adjust the render context range to fit the pagination model's page size
-  // First row index should be decreased to the start of the page, end row index should be increased to the end of the page
-  const adjustRowParams = React.useCallback(
-    (params: Pick<GridGetRowsParams, 'start' | 'end'>) => {
-      if (typeof params.start !== 'number') {
-        return params;
-      }
-
-      return {
-        start: params.start - (params.start % paginationModel.pageSize),
-        end: params.end + paginationModel.pageSize - (params.end % paginationModel.pageSize) - 1,
-      };
-    },
-    [paginationModel],
-  );
-
   const fetchRows = React.useCallback(
     async (options?: GridRowId | FetchRowsOptions) => {
       const getRows = props.unstable_dataSource?.getRows;
@@ -202,13 +182,6 @@ export const useGridDataSource = (
     ],
   );
 
-  const fetchRowBatch = React.useCallback(
-    (fetchParams: GridGetRowsParams) => {
-      return fetchRows(adjustRowParams(fetchParams));
-    },
-    [adjustRowParams, fetchRows],
-  );
-
   const fetchRowChildren = React.useCallback<GridDataSourcePrivateApi['fetchRowChildren']>(
     async (id) => {
       if (!props.treeData) {
@@ -362,7 +335,7 @@ export const useGridDataSource = (
     'paginationModelChange',
     runIf(props.paginationMode === 'server' && !isLazyLoaded, fetchRows),
   );
-  useGridApiEventHandler(apiRef, 'getRows', runIf(isLazyLoaded, fetchRowBatch));
+  useGridApiEventHandler(apiRef, 'getRows', runIf(isLazyLoaded, fetchRows));
 
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {

diff --git a/...es/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts b/...es/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts
@@ -65,6 +65,23 @@ export const useGridDataSourceLazyLoader = (
     [dimensions.viewportInnerSize.height, dimensions.contentSize.height],
   );
 
+  // Adjust the render context range to fit the pagination model's page size
+  // First row index should be decreased to the start of the page, end row index should be increased to the end of the page
+  const adjustRowParams = React.useCallback(
+    (params: GridGetRowsParams) => {
+      if (typeof params.start !== 'number') {
+        return params;
+      }
+
+      return {
+        ...params,
+        start: params.start - (params.start % paginationModel.pageSize),
+        end: params.end + paginationModel.pageSize - (params.end % paginationModel.pageSize) - 1,
+      };
+    },
+    [paginationModel],
+  );
+
   const resetGrid = React.useCallback(() => {
     privateApiRef.current.setRows([]);
     previousLastRowIndex.current = 0;
@@ -214,7 +231,7 @@ export const useGridDataSourceLazyLoader = (
         };
 
         privateApiRef.current.setLoading(true);
-        privateApiRef.current.publishEvent('getRows', getRowsParams);
+        privateApiRef.current.publishEvent('getRows', adjustRowParams(getRowsParams));
       }
     },
     [
@@ -226,6 +243,7 @@ export const useGridDataSourceLazyLoader = (
       heights,
       paginationModel.pageSize,
       renderContext.lastRowIndex,
+      adjustRowParams,
     ],
   );
 
@@ -277,9 +295,17 @@ export const useGridDataSourceLazyLoader = (
       getRowsParams.start = skeletonRowsSection.firstRowIndex;
       getRowsParams.end = skeletonRowsSection.lastRowIndex;
 
-      privateApiRef.current.publishEvent('getRows', getRowsParams);
+      privateApiRef.current.publishEvent('getRows', adjustRowParams(getRowsParams));
     },
-    [privateApiRef, isDisabled, props.pagination, props.paginationMode, sortModel, filterModel],
+    [
+      privateApiRef,
+      isDisabled,
+      props.pagination,
+      props.paginationMode,
+      sortModel,
+      filterModel,
+      adjustRowParams,
+    ],
   );
 
   const throttledHandleRenderedRowsIntervalChange = React.useMemo(
@@ -317,7 +343,7 @@ export const useGridDataSourceLazyLoader = (
         filterModel,
       };
 
-      privateApiRef.current.publishEvent('getRows', getRowsParams);
+      privateApiRef.current.publishEvent('getRows', adjustRowParams(getRowsParams));
     },
     [
       privateApiRef,
@@ -326,6 +352,7 @@ export const useGridDataSourceLazyLoader = (
       paginationModel.pageSize,
       renderContext,
       adjustGridRows,
+      adjustRowParams,
     ],
   );