[Discover][UnifiedDataTable] Enable drag&drop for grid columns #197832
Conversation
jughosta
added
release_note:enhancement
Team:DataDiscovery
…95769-draggable-columns
| @@ -41,13 +41,17 @@ | |||
| } | |||
|
|
|||
| .euiDataGridHeaderCell { | |||
| align-items: start; | |||
| align-items: center; | |||
There was a problem hiding this comment.
To align with the "graggable" state of the header column which is in a portal and we can't override it there.
There was a problem hiding this comment.
I think we can keep the original styles and have this work for dragging by adding this to our EuiDataGridColumn defs:
displayHeaderCellProps: { className: `unifiedDataTable__headerCell` }Then we can remove these nested styles including euiDataGridHeaderCell__popover and euiDataGridHeaderCell__draggableIcon, and use a single global style:
.euiDataGridHeaderCell.unifiedDataTable__headerCell {
align-items: start;
}There was a problem hiding this comment.
Great idea, thanks! Updated via 7946301
|
Pinging @elastic/kibana-data-discovery (Team:DataDiscovery) |
There was a problem hiding this comment.
Looking good to me overall! Just a small suggestion around some styling.
It works well, although the delay when reordering is a bit annoying. But that exists in the EUI docs too for the most part, so not really something we can address on the Discover side. Interestingly there's less of a delay when using the keyboard and it feels smoother, maybe since there's no animation.
| const headerDraggableColumns = await this.find.allByCssSelector( | ||
| '[data-test-subj="euiDataGridHeaderDroppable"] > div' | ||
| ); | ||
| // searching for a common parent of the field column header and its resizer | ||
| const fieldHeader: WebElementWrapper | null | undefined = ( | ||
| await Promise.all( | ||
| headerDraggableColumns.map(async (column) => { | ||
| const hasFieldColumn = | ||
| (await column.findAllByCssSelector(`[data-gridcell-column-id="${field}"]`)).length > 0; | ||
| return hasFieldColumn ? column : null; | ||
| }) | ||
| ) | ||
| ).find(Boolean); | ||
| const resizer = await fieldHeader?.findByTestSubject('dataGridColumnResizer'); | ||
|
|
||
| if (!fieldHeader || !resizer) { | ||
| throw new Error(`Unable to find column resizer for field ${field}`); | ||
| } |
There was a problem hiding this comment.
Wow, maybe we should ask EUI for a test subj on the draggable wrappers as a followup 😅
| @@ -41,13 +41,17 @@ | |||
| } | |||
|
|
|||
| .euiDataGridHeaderCell { | |||
| align-items: start; | |||
| align-items: center; | |||
There was a problem hiding this comment.
I think we can keep the original styles and have this work for dragging by adding this to our EuiDataGridColumn defs:
displayHeaderCellProps: { className: `unifiedDataTable__headerCell` }Then we can remove these nested styles including euiDataGridHeaderCell__popover and euiDataGridHeaderCell__draggableIcon, and use a single global style:
.euiDataGridHeaderCell.unifiedDataTable__headerCell {
align-items: start;
}
💚 Build Succeeded
Metrics [docs]Async chunks
History
cc @jughosta |
| align-items: start; | ||
|
|
||
| .euiDataGridHeaderCell__draggableIcon { | ||
| padding-block: 2px // to align with a token height |
There was a problem hiding this comment.
nit :)
This could be...
padding-block: $euiSizeXS / 2;
There was a problem hiding this comment.
Updated via 7967c37, thanks!
Summary
Eui now supports reordering of grid columns by dra&drop elastic/eui#8015
The PR enables this functionality for UnifiedDataTable.
Checklist