[UX] Pinning columns to the right pushes item to the bottom of menu

[renatoka]

material-react-table version

v2.12.1

react & react-dom versions

18.2.60 && @18.2.0

Describe the bug and the steps to reproduce it

While pinning columns to the right, pinned column menu item gets pushed to the bottom of the menu, which is kinda unpleasant as it doesn't happen to the column items pinned to the left(they keep their position in menu order).

https://github.com/KevinVandy/material-react-table/assets/72624715/03b06ef4-28c2-4a41-8ae2-c66d40cc0807

Minimal, Reproducible Example - (Optional, but Recommended)

Try it on any pinning example.

Screenshots or Videos (Optional)

Proposed solution

https://github.com/KevinVandy/material-react-table/assets/72624715/854e57d1-d6e7-4f67-9862-759f0997bd93

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

Yes, I am also opening a PR that solves the problem along side this issue

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.