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 index c9a3a2a5453c3..875c110004c87 100644 --- 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) => { - 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( 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/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts index 1b362cda8e06b..5bc9c2ee826a5 100644 --- a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts +++ b/packages/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, ], );