This is probably a large ask. @cee-chen Anything thoughts off the top of your head around what the implementation might look like? A possible approach or challenges?

1. Showing the entire column being dragged is probably impossible with virtualization. We show only the column header being dragged
2. The drop zone is also in question. Are we limiting it to the header row (easiest)? Should we allow dragging to the anywhere in the column (e.g. over data cells) as well (harder)?
3. What custom styles are we going to use to indicate drop zones? Do we just reuse the green background on https://eui.elastic.co/#/display/drag-and-drop? Or is there another style we need to consult with a designer for?
4. Drop zones in stacking contexts can be buggy due to the underlying library using position: fixed (see docs) - this might be problematic for datagrids used in flyouts and will need QA testing

Just looking at some other examples for a frame of reference:
https://adazzle.github.io/react-data-grid/#/columns-reordering

Showing the entire column being dragged is probably impossible with virtualization. We show only the column header being dragged

My 2 cents on it is that's OK. The React Datagrid example above works that way and seems like a fine experience.

The drop zone is also in question. Are we limiting it to the header row (easiest)? Should we allow dragging to the anywhere in the column (e.g. over data cells) as well (harder)?

Again, looking at the React Datagrid example -- it's just the header and it seems fine.

👍 for just using the column header for this operation

And it I don't think the whole header cell needs to be dragged in a visible way. GitHub Project boards do it like that

I think this way it's very clear where to drag to, and I think it's simpler to do that the eye-candy drag'n'drop

ℹ This issue can be picked up after this other update is done, as the update for interactive header columns should be included already.