State update on a component that has not been mounted yet

[Saracaen]

mantine-react-table version

v1.0.0-beta.8

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

The initial load fails when used in combination with React Suspense and async data load, such as React Query with suspense: true. The table does appear to work fine afterwards, and it only happens when refreshing the page. I'm building a Next.js app with Blitz.js for auth + data loading, and this causes the issue on initial data load.

I have verified that this is not a problem with alternative components, such as Mantine Datatable, so it appears to be an issue somewhere inside the MRT_TableRoot component.

Minimal, Reproducible Example - (Optional, but Recommended)

Screenshots or Videos (Optional)

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

Maybe, I'll investigate and start debugging

Terms

• [X] 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.

[Saracaen]

Upon further examination I have concluded that the issue is caused / resolved by the following property being true:

autoResetPageIndex

That seems to cause render/re-render issues with the way the table works. Any idea what might cause that?

EDIT: It seems to be related to the following issues from Material React Table:

https://github.com/KevinVandy/material-react-table/issues/200 https://github.com/KevinVandy/material-react-table/issues

I hope the fact that it is somehow caused by the autoResetPageIndex prop is helpful.

EDIT2: I suspect it is a combination of how getPaginationRowModel is used in Mantine React Table and how Tanstack Table handles this internally, which causes side-effects.

EDIT3: One way to fix this without changing core functionality is like this:

[Princezhm]

have you ever found a solution for this? I'm using next13 with app dir. I'm just installing the table component and creating a one table with data with the following info:

return (
        <MantineReactTable
            columns={columns}
            data={data}
            enableGrouping
            initialState={{
                density: 'xs',
                // grouping: ['exchange_name'],
                sorting: [{ id: 'exchange_name', desc: false }],
                showGlobalFilter: true,
            }}
            enableColumnResizing
        />
    )

in the console I'm getting the same issue as you described which is:

app-index.js:31 Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
    at MantineReactTable (webpack-internal:///(app-client)/./node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js:3294:9)

the behaviour is weird because when I refresh the page I see the table without styles (i'm not using mantine, just tailwind) and then if I click the table container it pops the real styles.

https://github.com/KevinVandy/mantine-react-table/assets/8930664/8d2d24d8-fb7a-42bb-873f-5474895559c9