[Beta] EuiDataGrid canDragAndDropColumns functionality

`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.

<details><summary><b>EuiDataGrid usages:</b></summary>
<p>

```
22 results - 22 files

kibana • examples/esql_ast_inspector/public/components/esql_inspector/components/preview/components/preview_tokens/index.tsx:
  68        <EuiPanel paddingSize="xs" hasShadow={false} hasBorder style={{ height: 600 }}>
  69:         <EuiDataGrid
  70            aria-label="Container constrained data grid demo"

kibana • examples/ui_actions_explorer/public/trigger_context_example.tsx:
  125  
  126:       <EuiDataGrid
  127          aria-label="Action and trigger data demo"

kibana • src/platform/packages/shared/kbn-data-grid-in-table-search/src/__mocks__/data_grid_example.tsx:
  79      <div ref={(node) => setDataGridWrapper(node)} css={inTableSearchTermCss}>
  80:       <EuiDataGrid
  81          ref={dataGridRef}

kibana • src/platform/packages/shared/kbn-unified-data-table/src/components/compare_documents/compare_documents.tsx:
  203    return (
  204:     <EuiDataGrid
  205        id={id}

kibana • src/platform/packages/shared/response-ops/alerts-table/components/alerts_data_grid.tsx:
  351            {alertsCount > 0 && (
  352:             <EuiDataGrid
  353                {...euiDataGridProps}

kibana • src/platform/plugins/private/vis_types/table/public/components/table_vis_basic.tsx:
  130          )}
  131:         <EuiDataGrid
  132            aria-label={dataGridAriaLabel}

kibana • src/platform/plugins/private/vis_types/vega/public/vega_inspector/components/inspector_data_grid.tsx:
  105    return (
  106:     <EuiDataGrid
  107        aria-label={dataGridAriaLabel}

kibana • src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.tsx:
  523          >
  524:           <EuiDataGrid
  525              key={`fields-table-${hit.id}`}

kibana • x-pack/platform/packages/private/ml/data_grid/components/data_grid.tsx:
  299                <div css={cssOverride} ref={mutationRef}>
  300:                 <EuiDataGrid
  301                    aria-label={isWithHeader(props) ? props.title : ''}

kibana • x-pack/platform/packages/shared/logs-overview/src/components/log_categories/log_categories_grid.tsx:
  81    return (
  82:     <EuiDataGrid
  83        aria-label={logCategoriesGridLabel}

kibana • x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/table_basic.tsx:
  532        >
  533:         <EuiDataGrid
  534            aria-label={dataGridAriaLabel}

kibana • x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx:
  342                                      <EuiFlexItem>
  343:                                       <EuiDataGrid
  344                                          data-test-subj="mlDFAnalyticsClassificationExplorationConfusionMatrix"

kibana • x-pack/platform/plugins/shared/osquery/public/results/results_table.tsx:
  446            <div css={resultsTableContainerCss}>
  447:             <EuiDataGrid
  448                css={euiDataGridCss}

kibana • x-pack/platform/plugins/shared/stack_alerts/public/rule_types/es_query/test_query_row/test_query_row_table.tsx:
  39      <EuiPanel style={{ overflow: 'hidden' }} hasShadow={false} hasBorder={true}>
  40:       <EuiDataGrid
  41          css={styles.grid}

kibana • x-pack/platform/plugins/shared/streams_app/public/components/data_management/preview_table/index.tsx:
  43    return (
  44:     <EuiDataGrid
  45        aria-label={i18n.translate('xpack.streams.resultPanel.euiDataGrid.previewLabel', {

kibana • x-pack/platform/plugins/shared/streams_app/public/components/data_management/schema_editor/schema_editor_table.tsx:
  60    return (
  61:     <EuiDataGrid
  62        aria-label={i18n.translate(

kibana • x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_data_grid.tsx:
  365        />
  366:       <EuiDataGrid
  367          aria-label="event log"

kibana • x-pack/solutions/observability/plugins/inventory/public/components/entities_grid/index.tsx:
  136    return (
  137:     <EuiDataGrid
  138        aria-label={i18n.translate(

kibana • x-pack/solutions/observability/plugins/profiling/public/components/differential_topn_functions_grid/index.tsx:
  248        <EuiFlexItem>
  249:         <EuiDataGrid
  250            data-test-subj="profilingDiffTopNFunctionsGrid"

kibana • x-pack/solutions/observability/plugins/profiling/public/components/topn_functions/index.tsx:
  313        <EuiFlexItem>
  314:         <EuiDataGrid
  315            data-test-subj={dataTestSubj}

kibana • x-pack/solutions/security/packages/data-table/components/data_table/index.tsx:
  452          <EuiDataGridContainer hideLastPage={totalItems > ES_LIMIT_COUNT}>
  453:           <EuiDataGrid
  454              {...otherProps}

kibana • x-pack/solutions/security/plugins/threat_intelligence/public/modules/indicators/components/table/table.tsx:
  192  
  193:         <EuiDataGrid
  194            aria-labelledby="indicators-table"
```

</p>
</details> 

**`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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Beta] EuiDataGrid canDragAndDropColumns functionality #8454

Feature description

Usage notes

Discover

Goal

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

[Beta] EuiDataGrid canDragAndDropColumns functionality #8454

Description

Feature description

Usage notes

Discover

Goal

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions