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