Resized sticky columns overlap when scrolling horizontally

[SeanStove]

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.

1. Resize the first two columns
2. Pin them
3. They overlap when you scroll

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)

https://github.com/TanStack/table/assets/1710247/3c7c7205-dd70-4420-8785-ad49df7ce6b9

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

None

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.

[xluk9]

I have the same problem even without resizing them. Sticky column always overlap when horizontally scrolled. Anybody have any workaround?

[irenako]

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?

[kaydev-io]

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.

[SeanStove]

As @kaydev-io mentions above, I also found out that the column.getSize() value gets out of sync with the actual width of the column. You can keep dragging the resize handler, even if there's no more room to resize.

I've added a video to demonstrate this. column.getSize() is added to the header of each column to show the value. I can drag the width down to 20, which is the default minSize.

So when the following css is applied, the value passed to the left sticky position is not correct (I assume column.getStart is based on the width of the previous column)

left: isPinned === 'left' ? ``${column.getStart('left')}px`` : undefined

might be related #4825 #4880

https://github.com/TanStack/table/assets/1710247/e35cb141-6cd3-47fd-b998-43a650e7fb8d

[kaydev-io]

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

1. add a ref that will be used to track the th elements (L99)
2. assign a key in the ref for each th in the loop (L228-L230)
3. add custom sizing state (L101-L112)
4. add a custom sizing state updater (L114-L125)
5. add these to the table configs so manual sizing is enabled (L148-L161)
6. add a final (preferably debounced, not in example above to keep it simple) layout effect that checks the current state size, then the element's clientWidth, and updates state to current client width if state<element.

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.