[Beta] EuiDataGrid canDragAndDropColumns functionality

[weronikaolejniczak]

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

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        <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"

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.

  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.