TanStack
Resizing of the columns is not working as expected
Describe the bug
When combining flexbox with resizing, like in the Full Width Resizable Table example the resizing does not work as expected. When trying to resize, the column resizer is not where the mouse actually moves. This is even more visible on bigger screens and only occurs when using the flex/fullwidth table, with normal column sizes resizing works fine.
Your minimal, reproducible example
https://codesandbox.io/s/gracious-shaw-k2nnje?file=/src/main.tsx:127-131
Steps to reproduce
- Resize one of the resizable columns. (e.g. the one underneath "Name")
- As your mouse is moving, notice how the border where you grabbed to resize is not where the mouse is. The offset increases the more you try to resize.
Expected behavior
I expected the border to move exactly corresponding to the position of the mouse. The expected behaviour can be seen in this example.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: [Windows]
- Browser: [Chrome, Firefox, Edge]
react-table version
v7.7.0, v8.5.11
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- [X] I agree to follow this project's Code of Conduct
- [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
The resizing logic is not flex based, so indeed this will “flex” the pixel based measurements. I don’t believe there is anything that can be done here.
@melaniemeindldynatrace I advice you to have a look my comment in discussions below. You may inspire what to do in order to keep the column sizes in the state.
https://github.com/TanStack/table/discussions/3947#discussioncomment-2845135
