Hiding the table make the empty text no longer centered

[iscy]

mantine-react-table version

v2.0.0.beta7

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

1. Display a table with 0 rows
2. Hide the table (use the Mantine tabs without disabling keepMounted)
3. Show the table
   => The text "No records to display" will no longer be centered

Minimal, Reproducible Example - (Optional, but Recommended)

The problem is related to these lines:

                  <Text
                    __vars={{
                      '--mrt-paper-width': `${tablePaperRef.current?.clientWidth}`,
                    }}
                    className={clsx(classes['empty-row-td-content'])}
                  >

Once hidden, clientWidth becomes 0. Once we re-display the table again, clientWidth will be 0 on the first redraw but then be properly set on the next one. We can work around the issue by forcing a redraw, however, by removing the var 'mrt-paper-width', the text will occupy 100% of its space and the issue will be fixed. I can open a PR with the removal of this line, but it was introduced in the PR allowing virtualization and might be needed for a certain use case. Feel free to point me in the right direction for the PR.

Screenshots or Videos (Optional)

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.