[EuiDataGrid] Implement draggable columns with table headers

[kertal]

Is your feature request related to a problem? Please describe.
We recently implemented draggable fields in Discover, so users can drag and drop fields on the EuiDataGrid and now since you can add fields this way, the next logical step would be to reorder these fields that turned into columns directly using the grid's table headers, without having to use a popover UI. What's more, Discover's EuiDataGrid will be soon become UnifiedDataTable, and replace the grid in Security Solutions Timeline. The current grid supports drag and drop columns ordering with the table headers.

Kapture.2023-08-29.at.09.49.56.mp4

Describe the solution you'd like
The solution how it could look like was drafted in a Figma

[JasonStoltz]

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?

[cee-chen]

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

[JasonStoltz]

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.

[kertal]

👍 for just using the column header for this operation

[kertal]

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

Kapture.2024-05-17.at.14.47.27.mp4

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

[mgadewoll]

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