Column drag resizing not matching cursor's movement
Hello! I am a TanStack table begginer using React. I have implemented a custom resizer handle. I feel confusing that the amount of distance that the mouse is moved does not match the column size. I don't know how to explain it properly, but in the gif you can see that the column ends in a smaller position than it should be, it does not fully follow the cursor...
Is this behaviour customizable?
8 Replies
conscious-sapphire•3mo ago
The demo you’re showing looks to be changing the table size rather than the column size. The movement is likely to do with how tables are rendered and sized up in HTML
optimistic-goldOP•3mo ago
Hmmmmm the problem is that the "width" html attribute becomes out of sync with the real element width
optimistic-goldOP•3mo ago
I am going to write a simple demo of my table ...
optimistic-goldOP•3mo ago
Here you have it
optimistic-goldOP•3mo ago
Oh dang, I guess that the issue is due to the table having 100% width
optimistic-goldOP•3mo ago
https://github.com/TanStack/table/issues/4825#issuecomment-1749665597 this solution is quite good but not perfect
GitHub
implement full width resize handler · Issue #4825 · TanStack/table
Describe the bug The header.getResizeHandler() works well if the table is not full-width. But when working with full-width tables, it does not handle the ColumnSizingState properly. Your minimal, r...
optimistic-goldOP•3mo ago
This issue has been reported multiple times but no one has given a definitive answer or fix 😅
conscious-sapphire•3mo ago
Great find. I'd either play around with the tableLayout property or perhaps change to a Grid or Flexbox layout. There are likely limitations on what can be accomplished with a
display: table either due to various browser rendering quirks or that it's an older spec.