[Beta] EuiDataGrid canDragAndDropColumns functionality
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
`canDragAndDropColumns` functionality stems from a feature request: https://github.com/elastic/eui/issues/7136. It has been introduced on https://github.com/elastic/eui/pull/8015. It's in beta status to assure that the functionality works as expected, that the implementation is stable and doesn't cause conflicts with existing usages. The purpose of this task is to track, analyze the usage and stability of, and plan moving the functionality out of beta.
## Feature description
`canDragAndDropColumns` is a boolean prop of the `EuiDataGrid` component. It enables reordering the columns by dragging.
https://github.com/user-attachments/assets/2fbdf236-32b8-4a65-ba32-5078b387eadf
[Storybook](https://eui.elastic.co/storybook/index.html?path=/story/tabular-content-euidatagrid--draggable-columns&globals=colorMode:light)
## Usage notes
`canDragAndDropColumns` is set to `true` by default. So unless it's explicitly disabled, the functionality exists in all usages of the `EuiDataGrid` component.
EuiDataGrid usages:
```
22 results - 22 files
kibana • examples/esql_ast_inspector/public/components/esql_inspector/components/preview/components/preview_tokens/index.tsx:
68
69: setDataGridWrapper(node)} css={inTableSearchTermCss}>
80: 0 && (
352:
524:
300:
533:
343:
447:
40:
366:
249:
314: ES_LIMIT_COUNT}>
453:
**`canDragAndDropColumns` usages:**
- `src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.tsx`
- `src/platform/plugins/shared/discover/public/components/discover_grid/discover_grid.tsx`
- `x-pack/platform/plugins/shared/streams_app/public/components/data_management/preview_table/index.tsx` (set to `false`)
- `x-pack/platform/plugins/shared/streams_app/public/components/data_management/schema_editor/schema_editor_table.tsx` (set to `false`)
### Discover
**tl;dr;** In the default view, columns cannot be reordered. In a custom view (after applying a filter), columns can be reordered.
The `DataTable` component is located at `src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.tsx`, which accepts a prop called `canDragAndDropColumns`. This prop is passed from `src/platform/plugins/shared/discover/public/components/discover_grid/discover_grid.tsx` and is always set to `true` when used within the Discover plugin.
This prop is internal to Discover implementation and, at this stage, it does not relate to the `EuiDataGrid`.
Inside `data_table.tsx`, where the data grid is used, we check whether we have the default column layout, which includes fields like "timestamp" and "summary" (the default Kibana view). When you load Kibana with the default settings, this layout is used.
```ts
const columnsVisibility = useMemo(
() => ({
canDragAndDropColumns: defaultColumns ? false : canDragAndDropColumns,
visibleColumns,
setVisibleColumns: (newColumns: string[]) => {
const dontModifyColumns = !shouldPrependTimeFieldColumn(newColumns);
onSetColumns(newColumns, dontModifyColumns);
},
}),
[
visibleColumns,
onSetColumns,
shouldPrependTimeFieldColumn,
canDragAndDropColumns,
defaultColumns,
]
);
```

If the layout is the default one, we send `false` for the `canDragAndDropColumns` prop, meaning that the columns cannot be reordered.
However, if a filter is added from the left side, we pass `canDragAndDropColumns` with a value of `true` (because parent sets the prop as `true` always).
## Goal
As part of this ticket, we should test out **usage and developer experience**, and **plan accordingly** for improvements.
Contributor guide
Assessment
This issue has not been assessed yet.