elastic / elastic/eui

[Beta] EuiDataGrid canDragAndDropColumns functionality

Open
#8,454 0 comments 0 reactions 0 assignees View on GitHub
beta data grid meta
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,
]
);
```

![Image](https://github.com/user-attachments/assets/2bc95b89-b825-48be-b9a0-bf44b50825fc)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.