-
-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Resized sticky columns overlap when scrolling horizontally #5392
Comments
I have the same problem even without resizing them. Sticky column always overlap when horizontally scrolled. |
Hello! I have the same issue with pinned columns on a horizontal scroll. I have noticed that when pinned column is resized, overlapping for this particular column is gone. Could you help to fix this? |
Running into this as well - best I can understand is this is happening when the table header / table content is unable to shrink down to the size specified by the column width. In the framework docs example, the smallest the first name column is able to actually shrink is ~112.188px, despite it internally setting lower sizes in table state. If you shrink it lower in state than in the dom, pinning for subsequent rows snaps to whatever the state thinks the width is, not what's actually happening in the dom. Simple fix if it works for your project, check the minimum size of a given column, and provide a minSize that's larger than the smallest you can shrink a given row. For example, setting a minimum size of 120 for all table rows prevents this from happening in the documentation example. Still trying to figure out how to resolve it in more complex situations / requirements, mostly seems like there has to be some extra check occurring on size updates to verify the element can get to that size, but it doesn't seem like there's an easy way to do that at this point through table settings. |
As @kaydev-io mentions above, I also found out that the I've added a video to demonstrate this. So when the following css is applied, the value passed to the left sticky position is not correct (I assume
Recording.2024-05-25.095334.mp4 |
I poked around with the example a bit more since I'm stuck trying to figure this out on a project atm - probably not an optimal solution by any stretch, but here's the original example forked with a solution that appears to be working the way I'd expect it to https://stackblitz.com/edit/tanstack-table-n25raf?file=src%2Fmain.tsx tl;dr, all in main.tsx
Can try to size items below their minimum point and notice that they won't scale beneath their minimum anymore w/ a console log showing the state/element size diff. Moving forward with a variation on this for my current project since it's good enough, but this could probably be workshopped a bit to improve it - just wanted to share for others that might be running into it. |
TanStack Table version
v8.13.2
Framework/Library version
v18.2.0
Describe the bug and the steps to reproduce it
When columns are resized and pinned sticky, they start to overlap when scrolling.
You can reproduce this by going to the Column Pinning Sticky example from the docs.
I'm not sure if this could be solved with css? Any help would be appreciated.
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky
Screenshots or Videos (Optional)
tanstack-sticky-column-issue_tmCslzH3.mp4
Do you intend to try to help solve this bug with your own PR?
None
Terms & Code of Conduct
The text was updated successfully, but these errors were encountered: