[question] Using scrollToIndexes() together with pagination

[santileortiz]

The problem in depth

As I understand from #6290 scrollToIndexes() is not supposed to switch pages automatically, so we're supposed to do this by hand. Still, the only way I've managed to make it work on all cases is by wrapping the call to the API into a setTimeout(), which doesn't feel correct.

You can see the attempt in the following sandbox: https://codesandbox.io/p/sandbox/serene-wood-t5xdpl

It almost works, except when going from the last page (which is not a full page, has 25 rows while the page size is 50), to the last row in the other pages. In other words, try going to row 101 (or 125) then to row 50 (or 100), for these cases the page change happens, but the scrolling doesn't work.

The delay that fixes the problem is commented out, but we would like to have a solution that doesn't depend on it. Seems like computation of the scroll position happens based on the current viewport and not the target one, and because the last page is shorter, it fails. We have not found a way to ensure the scroll computation happens after the page switch, other than using the delay.

Your environment

Version 7.21.0 from the sandbox.

Search keywords: scrollToIndexes, pagination
Order ID: 93242

[michelengelen]

Hey @santileortiz ... I'll have a look into this tomorrow. 👍🏼

[michelengelen]

Hey @santileortiz and sry for the late reply ... I got sick and couldn't answer in time as promised.

The problem is basically found here:

mui-x/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts

Lines 209 to 216 in bcd8162

	const handlePaginationModelChange: GridEventListener<'paginationModelChange'> = () => {
	const paginationModel = gridPaginationModelSelector(apiRef);
	if (apiRef.current.virtualScrollerRef?.current) {
	apiRef.current.scrollToIndexes({
	rowIndex: paginationModel.page * paginationModel.pageSize,
	});
	}
	};

We do this to ensure we show the top of the rows on every page change, even if the previous scroll was showing the last row. So, as of now you would need to wrap the scrollToIndexes call in a setTimeout as you did before.

I'll add this issue to the board and ask the team though if there is a way we can alter the paginationModel scrolling behavior to support such a use-case.