RowSelection Feature overflows page layout

[JustAPowerWorker]

mantine-react-table version

v2.0.0-beta.1

react & react-dom versions

v18.0.2

Describe the bug and the steps to reproduce it

Hello, In our system we started using Mantine React Table and on one of the listing pages I encountered pretty huge table ( read like 50+ columns ). Reduction of columns is not an option unfortunately.

When setting it up I encountered problem with mantineMenuDropdown used for it. It have hard set of max-height: calc(80vh - 100px) which unfortunately overflows the set of table I have. My table is in lower half of the screen and when it is opened it is going under the layout.

I did not find any suitable way how to change it outside of the hard catching events on that particular thing and resetting max-height by some javascript function. I found this as fault behavior of the list.

Screenshot added.

Minimal, Reproducible Example - (Optional, but Recommended)

• use MantineReactTable in your project
• set table to be on not full layout and not from top of the screen and have high amount of columns to choose from
• open column hiding feature function
• observe the overflow of the list

Screenshots or Videos (Optional)

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

None

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.

[alessandrojcm]

Hi there, I am trying to reproduce this but I do not quite get it. Could you please post a minimal repro? Or at the very least point out where is it that you are setting max-height? Is it in the table itself? Thanks.

[JustAPowerWorker]

Hi there, I am trying to reproduce this but I do not quite get it. Could you please post a minimal repro? Or at the very least point out where is it that you are setting max-height? Is it in the table itself? Thanks.

Hello. Te precise problem where it shows is in here: On this image, is where by portal is set the list of "clickable" items. I have like 40 columns in there therefore it is pretty chunky.

And here is where the problem is: You see. The max-height is done on out of layout element with absolute positioning. For me it have this measures: so if you count top + height, you are way over viewport height of the screen. So I needed to overload max-height to not have it overflowing. Similar problem is when you have table from top to bottom and lot of columns, it will overflow both sides of the screen.

I did not do any changes to the table.

[alessandrojcm]

https://github.com/KevinVandy/mantine-react-table/assets/6154350/2c3be53a-10ad-4ac5-b62e-73e554444a4a

Hi I have tried to reproduce by using 50 columns and by resizing the window but I can't still see what the issue is. If you could please post an exact reproduction of your issue that'd be very helpful.

[alessandrojcm]

Closing due to inactivity, feel free to reopen.