New draggable columns in DataGrid component feedback

[l-suarez]

Issue: #8015
PoC in Discover: https://kertal-pr-195743-discover-dragable-columns.kbndev.co/app/r/s/Sf17f (elastic:changeme)

Currently, we have a new implementation of draggable column headers in our data tables. While this functionality is a great addition, there are some areas for improvement to enhance the user experience and usability. This issue outlines several enhancements to consider. Below are some suggestions that could help improve user experience, but they are open for discussion and further input from the team:

Shall we remove the Columns re-ordering functionality in favor of the new implementation?

Shall we update the Keyboard shortcut cheatsheet to add the dragging?

On the Discover fields sidebar, we replace the data type icon for the drag and drop icon, could we do the same for columns?

When dragging, could we move the whole column instead of just the column cell? See video below as an example

Could we truncate the cell text so it doesn't jump to different rows? see video for clarity

NOTE: We also have the same jumping issue in Lens datatable:

[mgadewoll]

@l-suarez I'll try to add some context from tech side to the questions asked:

1. Shall we remove the Columns re-ordering functionality in favor of the new implementation?

We shouldn't remove the column reorder popover for now because a) the draggable columns functionality is disabled by default and b) the popover originally has more functionality included that's not covered by the dragging behavior alone. (that seems to potentially be hidden on Kibana side)

2. Shall we update the Keyboard shortcut cheatsheet to add the dragging?

Yes, eventually we should add the dragging key navigation but currently the feature is disabled by default and in opt-in state. We could check if we can conditionally add the additional keyboard information.

3. On the Discover fields sidebar, we replace the data type icon for the drag and drop icon, could we do the same for columns?

I'm not entirely sure what's meant here. Do you mean the token inside the cell should be replaced with the drag icon instead of having a drag icon + data token?
If so, then this is currently not possible. The data token is passed on Kibana side and the drag icon is added in the EuiDataGrid. The outside currently has no context about the dragging state and the datagrid has no context about what's the cell content.

4. When dragging, could we move the whole column instead of just the column cell?

This is technically not possible as we're limited by our virtualization library that's used under the hood. We'd need to find or build a more flexible and more performant virtualization solution which all together is an incredibly high performance and engineering lift and other similar grid solutions (e.g. Google Sheets or Excel) don't do it either.

5. Could we truncate the cell text so it doesn't jump to different rows?

As far as I can tell, this likely is an issue introduced on consumer side. The original EuiDataGrid does truncate content as expected, both text as well as custom content 🤔

text	custom content

[davismcphee]

Hey all, just got back from PTO yesterday so didn't get to respond in the original Slack thread. Just adding a bit of context/feedback from the Kibana/Discover side too:

Shall we remove the Columns re-ordering functionality in favor of the new implementation?

We should be able to do this on our end if we'd like to using EuiDataGridToolBarVisibilityOptions.showColumnSelector: false. It's true we're not currently using allowHide anyway, so having both options for column reordering is likely unnecessary. It would free up some space in the data grid toolbar too, which is nice since it can get crowded in Discover with our other custom controls.

On the Discover fields sidebar, we replace the data type icon for the drag and drop icon, could we do the same for columns?

As @mgadewoll mentioned, the field tokens are added on the consumer side in Discover. And I agree it wouldn't really be feasible to do currently since field tokens are ours and drag icons are EUI, unlike the field list where we control the whole component. We'd need explicit support for it from the EUI side, but even then there'd likely be issues since we intentionally wrap the header text around the token to save space for long field names (another consumer customization):

Could we truncate the cell text so it doesn't jump to different rows? see video for clarity

As @mgadewoll also mentioned, the multiline header text was added on our side to accommodate long field names (can be configured in the "Display options" popover). The jumpiness on hover is definitely an annoyance, although it's more important that we retain this wrapping functionality since it's helpful to users (we had complaints in the past about truncation). I'd treat this one as separate from the draggable column feedback since it already existed, but maybe someone from the EUI side has ideas of how we might be able to solve this without truncation? Maybe it would be possible for us to adjust some styles to have the header options button overlay the text content instead of shrinking its container?

[l-suarez]

Thanks @davismcphee, regarding the jumping to different rows, could we add the truncation on hovering only to avoid increasing the height of the cell? As it happens with timestamp values, see below:

[davismcphee]

Hmm, possibly? I'd have to dig into a bit more to know for sure, although I would think it would lead to another variety of jumpiness where hovering the column snaps it back to a single truncated line, right? The fact @timestamp doesn't wrap currently strikes me as a bug. It still feels like the most straightforward solution would be something like overlaying / absolutely positioning the button on hover, but I'm just guessing.