[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.

[amrahs02]

Screencast from 2024-03-16 08-25-04.webm I think this works fine on my machine ... or .... ?

[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 : https://github.com/refinedev/refine/blob/fedb191036c35468376c737c3d8be6688be467e4/examples/table-material-ui-cursor-pagination/src/rest-data-provider/index.ts#L16-L17

This value is passed to the datagrid using the state variable next: https://github.com/refinedev/refine/blob/fedb191036c35468376c737c3d8be6688be467e4/examples/table-material-ui-cursor-pagination/src/pages/posts/list.tsx#L10-L14

And the value of next is always being set to the date of the last row: https://github.com/refinedev/refine/blob/fedb191036c35468376c737c3d8be6688be467e4/examples/table-material-ui-cursor-pagination/src/pages/posts/list.tsx#L70-L77

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 https://github.com/refinedev/refine/commit/97b82a0643c3e4fa57c6bad552e259af2a91b251 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?