Mantine-table resets index to zero when controlled

[enyelsequeira]

mantine-react-table version

"mantine-react-table": "^2.0.0-beta.4",

react & react-dom versions

"react-dom": "^18.2.0",

Describe the bug and the steps to reproduce it

I was working on API that needs to have zero index as pagination the BE pagination is something like this

meaning there are 4 total of pages, but starts at 0 so in there I would be in page 2 of total pages

what I have found is that if I try to put that in the states, it will not work as intended and the index will be reset to 0
even with this property added autoResetPageIndex: false,

possible issue could be the pagination component from mantine does not start at 0? https://mantine.dev/core/pagination/#controlled

while this is hard to debug, I created repo where it works fine, but if you work with and API that index start at 0 will always reset.
I did made it work by creating a custom pagination, where it is outside the table scope controlling, this is the main reason it makes me belives that the issue could deal with how the pagination component from mantine behaves

Minimal, Reproducible Example - (Optional, but Recommended)

https://stackblitz.com/edit/github-ex4yja?file=src%2FTS.tsx

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Yes, I think I know how to fix it and will discuss it in the comments of this issue

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[alessandrojcm]

Hi @enyelsequeira thanks for reporting, you mentioned that you have a possible fix could you share it please?

[enyelsequeira]

Hello @alessandrojcm yes, I came up with a solution for the code I have, and more and more I am thinking this issue is because of the way to initiate the pagination state from mantine. I created a custom pagination like this

  const [currentPage, setCurrentPage] = useState(1);


// table component 
   renderBottomToolbar: () => (
        <Flex>
          <Pagination
            size={'sm'}
            value={currentPage}
            onChange={setCurrentPage}
            withEdges
            total={paginationOptions?.totalPages || 0}
          />
        </Flex>
      ),

changing the state to something like this

  const [currentPage, setCurrentPage] = useState(2);

outputs this, which is correct

and this works fine, and I can have it start at different index. However letting the table handle will always reset it to zero no matter what you try

[alessandrojcm]

Sorry, but I am looking at your reproduction and cannot see what the issue is, to me it seems like it works correctly. It's the same in the project I'm working on that uses controlled pagination, moreover, the pagination implementation already takes into account that the Mantine component uses 1-based indexing https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/components/toolbar/MRT_TablePagination.tsx#L105

[enyelsequeira]

Sorry, but I am looking at your reproduction and cannot see what the issue is, to me it seems like it works correctly. It's the same in the project I'm working on that uses controlled pagination, moreover, the pagination implementation already takes into account that the Mantine component uses 1-based indexing https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/components/toolbar/MRT_TablePagination.tsx#L105

Hey, I will record a short video and see if maybe that helps, in the meantime may I ask what version you’re using?

[enyelsequeira]

trim-pagination.mp4

Hey @alessandrojcm please take a look at here, very minimal example trying to make the pagination controlled and setting the pagination index to 4 how it goes back to zero, I am literally following the example that is given in the docs

[alessandrojcm]

Hi @enyelsequeira apologies for the late reply again. I've managed to reproduce what you mentioned, it occurs due to the data being loaded being async. Basically what happens is that when the table loads, your data array is empty, so the table cannot set the page index since the data array is empty so it defaults back to 0.

If you want to set an index this needs to happen after the data array has been populated, MRT cannot do this for you as you have marked the pagination to be manual (and, IMO, it is out of scope for this package to handle async pagination).

If you are using react query (As I think you are doing) it should be fairly easy to set the page index after the date has been loaded.

Let me know if you have any other questions.

[enyelsequeira]

Hey @alessandrojcm thank you for the response. yeah, I’m using react-query. So the option here would be to use useEffect and set the index correct?

[alessandrojcm]

I have not used RTK in a while but is there not an onSuccess message? I am not a fan of useEffect but if there is no alternative then it should do

[llamorinlabs]

Hey @alessandrojcm thank you for the response. yeah, I’m using react-query. So the option here would be to use useEffect and set the index correct?

Just set keepPreviousData to true just thank me later.

[enyelsequeira]

T

Hey @alessandrojcm thank you for the response. yeah, I’m using react-query. So the option here would be to use useEffect and set the index correct?

Just set keepPreviousData to true just thank me later.

This will do nothing 😅