[BUG] Table pagination example is flawed

[ElementalWarrior]

Describe the bug

https://refine.dev/docs/examples/table/mui/cursor-pagination/

Firstly this example only works one direction. The back button just moves forward further.

Secondly, by taking this approach, changing filters or sort breaks the "current page" referenced. The ${pagestart} - ${pageEnd} count will be inaccurate.

I don't have a solution for cursor pagination, but this example is not something people should try to use.

Steps To Reproduce

1. Go to https://refine.dev/docs/examples/table/mui/cursor-pagination/
2. Click the next arrow
3. click the prev arrow
4. Note the timestamps only go in one direction

Expected behavior

previous button in pagination works. And there is an example with the datagrid that works properly.

Packages

refine/examples/table-material-ui-cursor-pagination

Additional Context

No response

[amrahs02]

Hi, I noticed the issue with cursor pagination. I'd like to help resolve it. Looking forward to contributing. Thanks!"

[amrahs02]

Hey @ElementalWarrior, I've analyzed the issue but need a visual aid to understand it better. Could you provide a video or image? It'll help me grasp the problem more effectively. Thanks!

[ElementalWarrior]

Click the link, go to the demo, click forward and back on the pagination.

[ElementalWarrior]

You didn't actually click the paging back and forth.

[ElementalWarrior]

The issue is with the example, not the websites navigation

[mkazin]

@ElementalWarrior thanks for the clarification. I see the behavior you described. There is indeed a problem with how the example sets up the datagrid.

Apparently each subsequent request to the Github API is using an until cursor whose value is the date of the last commit which was in the datagrid. Since this API request returns data in newest-first order, both backward and forward queries end up moving back in time.

Relevant code:

The API's until parameter is specified with a date here via cursor.next :

refine/examples/table-material-ui-cursor-pagination/src/rest-data-provider/index.ts

Lines 16 to 17 in fedb191

	if (metaData?.cursor?.next) {
	url = `${url}&until=${metaData.cursor.next}`;

This value is passed to the datagrid using the state variable next:

refine/examples/table-material-ui-cursor-pagination/src/pages/posts/list.tsx

Lines 10 to 14 in fedb191

	const { dataGridProps, tableQueryResult } = useDataGrid<ICommit>({
	initialPageSize: 5,
	metaData: {
	cursor: {
	next,

And the value of next is always being set to the date of the last row:

refine/examples/table-material-ui-cursor-pagination/src/pages/posts/list.tsx

Lines 70 to 77 in fedb191

	onPaginationModelChange={(model, details) => {
	const lastRow = data?.data[data.data.length - 1];
	const next = lastRow?.commit.committer.date;
	if (next) {
	setNext(next);
	}
	dataGridProps.onPaginationModelChange?.(model, details);
	}}

I'm not sure if this customized pagination was intended to be part of this example. For most use-cases, what the component has built-in should serve and custom pagination seems sufficiently documented.

I tested commit 97b82a0 which removes the custom code in favor of the component's default implementation.

If customization was intended in this example, Github's API allows for a since parameter in addition to until, which would allow backward and forward traversal, but these parameters aren't explicitly documented for use in pagination.

@ElementalWarrior as someone who used this example, do you have thoughts on which you prefer?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.