useResizeColumns doesn't work with React Portal in new window

[JustJarethB]

Describe the bug

When using react-table in a newly created window via ReactDOM.createPortal, column resizing does not work. From investigating, I believe this is because useResizeColumns references document to add event listeners, which refers to the original window running the code. This means the listener is on the wrong window's document. a local reference such as

draggableElement.closest('html')?.parentNode as Document;

should work, but may not be the most 'correct'

edit: found draggableElement.ownerDocument which seems more robust.

Your minimal, reproducible example

https://codesandbox.io/s/recursing-varahamihira-359y3m?file=/src/App.js:742-752

Steps to reproduce

create new window
use window as Portal container
place resizable table inside portal

Expected behavior

I expect column resizing to work in a new window but the table does not respond to the mouse event.

How often does this bug happen?

Every time

Screenshots or Videos

Screen.Recording.2022-10-26.at.13.27.12.mov

Platform

macOS (12.2.1) - Chrome & Safari

react-table version

7.7.0 & 7.8.0
Edit: Also 8.7.6

TypeScript version

4.8.3

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• 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.

[JustJarethB]

Interestingly AG Grid does work for this, but we have other requirements that mean we can not use AG. From digging around I think they are using ResizeObserver and [element].ownerDocument. I don't know how that would work with the library being headless

[KishoreS-pamp]

This is because tanstack tables need to have context of where exactly the resize is happening.
you have to do something like this
const handleMouseDown = useCallback((e) => { // Pass the event's ownerDocument so TanStack attaches its mousemove/mouseup // listeners to the correct document — works for both main and detached windows. getResizeHandler(e.target?.ownerDocument)(e); }, [getResizeHandler]);

in this way we can say whether it is happening in the main or portal. This worked for me!