[Table] Drag and drop using react-dnd not working

[tonyroberts]

Environment

• Package version(s):

blueprint/table 3.93

• Operating System:

Windows 10

• Browser name and version:

Google Chrome Version 93.0.4577.63 (Official Build) (64-bit)

Code Sandbox

https://codesandbox.io/s/dnd-table-t9t48?file=/src/Example.tsx:424-426

Steps to reproduce

1. Run the sandbox and notice the "test" box on the left.
2. Drag the 'test' box over the "This dustbin accepts: test" box to check that turns green correctly.
3. The column headers use the same 'dustbin' component and should work in the same way, but if you drag the 'test' box over them you'll see they never turn green.

Actual behavior

1. Dragging over the column headers does not trigger the 'isOver' behaviour and the column headers do not turn green.

Expected behavior

1. Dragging over the column headers should turn them green. This works when the 'Dustbin' component is rendered outside of the table but if used as a column header it never gets 'isOver' set.

Possible solution

I would guess this is because of the drag and drop behaviour for reordering columns. Disabling that doesn't appear to help though. Perhaps there's a better way to handle dragging and dropping on to column headers?

[tonyroberts]

Just in case anyone else is interested, I did find an alternative way to do this. It's pretty ugly, but putting the whole table in a drop target works. The ugly part is figuring out which column header is being dropped on or hovered over. I was able to that by building a map of refs and then testing the client rects of each to find which, if any, was applicable. I've got a quick and dirty demo of this working here https://codesandbox.io/s/dnd-table-forked-hjbm7?file=/src/Example.tsx.