[EuiDataGrid] Implement draggable column headers

packages/eui/changelogs/upcoming/8015.md

@@ -0,0 +1,2 @@
+- Added `columnVisibility.canDragAndDropColumns` on `EuiDataGrid` which enables reordering columns via draggable header cells
+

packages/eui/src-docs/src/views/datagrid/schema_columns/column_dragging.js

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { faker } from '@faker-js/faker';
+
+import {
+  EuiDataGrid,
+  EuiAvatar,
+  EuiToolTip,
+  EuiButtonIcon,
+} from '../../../../../src/components';
+
+const CustomHeaderCell = ({ title }) => (
+  <>
+    <span>{title}</span>
+    <EuiToolTip content="tooltip content">
+      <EuiButtonIcon
+        iconType="questionInCircle"
+        aria-label="Additional information"
+        color="primary"
+      />
+    </EuiToolTip>
+  </>
+);
+
+const columns = [
+  {
+    id: 'avatar',
+    initialWidth: 40,
+    isResizable: false,
+    actions: false,
+  },
+  {
+    id: 'name',
+    displayAsText: 'Name',
+    display: <CustomHeaderCell title="Name" />,
+  },
+  {
+    id: 'email',
+    display: <CustomHeaderCell title="Email" />,
+  },
+  {
+    id: 'city',
+  },
+  {
+    id: 'country',
+  },
+  {
+    id: 'account',
+  },
+];
+
+const data = [];
+
+for (let i = 1; i < 5; i++) {
+  data.push({
+    avatar: (
+      <EuiAvatar
+        size="s"
+        name={`${faker.person.lastName()}, ${faker.person.firstName()}`}
+      />
+    ),
+    name: `${faker.person.lastName()}, ${faker.person.firstName()} ${faker.person.suffix()}`,
+    email: faker.internet.email(),
+    city: faker.location.city(),
+    country: faker.location.country(),
+    account: faker.finance.accountNumber(),
+  });
+}
+
+export default () => {
+  const [visibleColumns, setVisibleColumns] = useState(
+    columns.map(({ id }) => id)
+  );
+
+  return (
+    <EuiDataGrid
+      aria-label="DataGrid demonstrating column reordering on drag"
+      columns={columns}
+      columnVisibility={{
+        visibleColumns: visibleColumns,
+        setVisibleColumns: setVisibleColumns,
+        canDragAndDropColumns: true,
+      }}
+      rowCount={data.length}
+      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+    />
+  );
+};

packages/eui/src-docs/src/views/datagrid/schema_columns/datagrid_columns_example.js

@@ -17,6 +17,8 @@ import DataGridColumnWidths from './column_widths';
 const dataGridColumnWidthsSource = require('!!raw-loader!./column_widths');
 import DataGridColumnActions from './column_actions';
 const dataGridColumnActionsSource = require('!!raw-loader!./column_actions');
+import DataGridColumnDragging from './column_dragging';
+const dataGridColumnDraggingSource = require('!!raw-loader!./column_dragging');
 
 import DataGridFooterRow from './footer_row';
 const dataGridFooterRowSource = require('!!raw-loader!./footer_row');
@@ -238,6 +240,32 @@ schemaDetectors={[
       },
       demo: <DataGridColumnActions />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridColumnDraggingSource,
+        },
+      ],
+      title: 'Draggable columns',
+      text: (
+        <Fragment>
+          <p>
+            To reorder columns directly instead of via the actions menu popover,
+            you can enable draggable <strong>EuiDataGrid</strong> header columns
+            via the <EuiCode>columnVisibility.canDragAndDropColumns</EuiCode>{' '}
+            prop. This will allow you to reorder the column by dragging them.
+          </p>
+        </Fragment>
+      ),
+      props: {
+        EuiDataGrid,
+        EuiDataGridColumn,
+        EuiDataGridColumnActions,
+        EuiListGroupItem,
+      },
+      demo: <DataGridColumnDragging />,
+    },
     {
       title: 'Control columns',
       source: [

packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -628,7 +628,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                 >
                   <button
                     aria-label="Press the Enter key to view this column's actions"
-                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
                     data-euigrid-tab-managed="true"
                     data-test-subj="dataGridHeaderCellActionButton-A"
                     tabindex="-1"
@@ -663,7 +663,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer emotion-euiDataGridColumnResizer"
+                  class="euiDataGridColumnResizer emotion-euiDataGridColumnResizer-isLastColumn"
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
@@ -677,7 +677,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                 >
                   <button
                     aria-label="Press the Enter key to view this column's actions"
-                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
                     data-euigrid-tab-managed="true"
                     data-test-subj="dataGridHeaderCellActionButton-B"
                     tabindex="-1"
@@ -1083,7 +1083,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 >
                   <button
                     aria-label="Press the Enter key to view this column's actions"
-                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
                     data-euigrid-tab-managed="true"
                     data-test-subj="dataGridHeaderCellActionButton-A"
                     tabindex="-1"
@@ -1132,7 +1132,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 >
                   <button
                     aria-label="Press the Enter key to view this column's actions"
-                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
                     data-euigrid-tab-managed="true"
                     data-test-subj="dataGridHeaderCellActionButton-B"
                     tabindex="-1"
@@ -1691,7 +1691,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                 >
                   <button
                     aria-label="Press the Enter key to view this column's actions"
-                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
                     data-euigrid-tab-managed="true"
                     data-test-subj="dataGridHeaderCellActionButton-A"
                     tabindex="-1"
@@ -1726,7 +1726,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer emotion-euiDataGridColumnResizer"
+                  class="euiDataGridColumnResizer emotion-euiDataGridColumnResizer-isLastColumn"
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
@@ -1742,7 +1742,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                 >
                   <button
                     aria-label="Press the Enter key to view this column's actions"
-                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
                     data-euigrid-tab-managed="true"
                     data-test-subj="dataGridHeaderCellActionButton-B"
                     tabindex="-1"
@@ -2123,7 +2123,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                 >
                   <button
                     aria-label="Press the Enter key to view this column's actions"
-                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
                     data-euigrid-tab-managed="true"
                     data-test-subj="dataGridHeaderCellActionButton-A"
                     tabindex="-1"
@@ -2158,7 +2158,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer emotion-euiDataGridColumnResizer"
+                  class="euiDataGridColumnResizer emotion-euiDataGridColumnResizer-isLastColumn"
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
@@ -2172,7 +2172,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                 >
                   <button
                     aria-label="Press the Enter key to view this column's actions"
-                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+                    class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
                     data-euigrid-tab-managed="true"
                     data-test-subj="dataGridHeaderCellActionButton-B"
                     tabindex="-1"

packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap

@@ -36,7 +36,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       >
         <button
           aria-label="Press the Enter key to view this column's actions"
-          class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+          class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
           data-euigrid-tab-managed="true"
           data-test-subj="dataGridHeaderCellActionButton-columnA"
           tabindex="-1"
@@ -71,7 +71,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       tabindex="-1"
     >
       <div
-        class="euiDataGridColumnResizer emotion-euiDataGridColumnResizer"
+        class="euiDataGridColumnResizer emotion-euiDataGridColumnResizer-isLastColumn"
         data-test-subj="dataGridColumnResizer"
       />
       <div
@@ -85,7 +85,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       >
         <button
           aria-label="Press the Enter key to view this column's actions"
-          class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+          class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
           data-euigrid-tab-managed="true"
           data-test-subj="dataGridHeaderCellActionButton-columnB"
           tabindex="-1"

packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap

@@ -40,7 +40,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
         >
           <button
             aria-label="Press the Enter key to view this column's actions"
-            class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+            class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
             data-euigrid-tab-managed="true"
             data-test-subj="dataGridHeaderCellActionButton-columnA"
             tabindex="-1"
@@ -75,7 +75,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
         tabindex="-1"
       >
         <div
-          class="euiDataGridColumnResizer emotion-euiDataGridColumnResizer"
+          class="euiDataGridColumnResizer emotion-euiDataGridColumnResizer-isLastColumn"
           data-test-subj="dataGridColumnResizer"
         />
         <div
@@ -89,7 +89,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
         >
           <button
             aria-label="Press the Enter key to view this column's actions"
-            class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__button"
+            class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
             data-euigrid-tab-managed="true"
             data-test-subj="dataGridHeaderCellActionButton-columnB"
             tabindex="-1"

packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.spec.tsx

@@ -206,6 +206,52 @@ describe('Cell outline styles', () => {
         });
       });
     });
+
+    describe('column header dragging', () => {
+      const propsWithDrag = {
+        ...baseProps,
+        columnVisibility: {
+          ...baseProps.columnVisibility,
+          canDragAndDropColumns: true,
+        },
+      };
+      const getHeaderCell = () =>
+        cy.get('.euiDataGridHeaderCell[data-gridcell-column-id="expandable"]');
+      const getDragIconWidth = () =>
+        getHeaderCell()
+          .find('.euiDataGridHeaderCell__draggableIcon')
+          .then(($el) => {
+            const { width } = $el[0].getBoundingClientRect();
+            return width;
+          });
+
+      it('should show focus state when dragging', () => {
+        cy.realMount(<EuiDataGrid {...propsWithDrag} />);
+        getDragIconWidth().then((width) => expect(width).to.eq(0));
+
+        tabToDataGrid();
+        cy.realPress('Space');
+        getHeaderCell().should('have.attr', 'data-column-moving', 'true');
+
+        cy.wait(ANIMATION.DURATION + ANIMATION.BUFFER);
+        getHeaderCell().then(($el) => {
+          expect(getOutlineColor($el[0])).to.eq(EXPECTED_FOCUS_COLOR);
+        });
+        getDragIconWidth().then((width) => expect(width).to.eq(12));
+      });
+
+      it('should not re-flash the header actions transition after drop', () => {
+        cy.realMount(<EuiDataGrid {...propsWithDrag} />);
+
+        tabToDataGrid();
+        cy.realPress('Space');
+        getDragIconWidth().then((width) => expect(width).to.eq(12));
+
+        cy.realPress('Space');
+        getDragIconWidth().then((width) => expect(width).to.eq(12));
+        getHeaderCell().should('not.have.attr', 'data-column-moving');
+      });
+    });
   });
 
   describe('mouse UI/UX', () => {

packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.ts

@@ -69,6 +69,7 @@ export const euiDataGridCellOutlineSelectors = (parentSelector = '&') => {
 
   // Cell header specific selectors
   const headerActionsOpen = '.euiDataGridHeaderCell--isActionsPopoverOpen';
+  const isMoving = '[data-column-moving]'; // prevents the header column actions hover animation from replaying on column move
 
   // Utils
   const selectors = (...args: string[]) => [...args].join(', ');
@@ -93,9 +94,14 @@ export const euiDataGridCellOutlineSelectors = (parentSelector = '&') => {
     },
 
     header: {
-      focus: is(selectors(focus, focusWithin, headerActionsOpen)), // :focus-within here is primarily intended for when the column actions button has been clicked twice
+      focus: is(selectors(focus, focusWithin, headerActionsOpen, isMoving)), // :focus-within here is primarily intended for when the column actions button has been clicked twice
       focusTrapped: _(isEntered),
-      hideActions: not(selectors(hover, focusWithin, headerActionsOpen)),
+      showActions: is(
+        selectors(hover, focusWithin, headerActionsOpen, isMoving)
+      ),
+      hideActions: not(
+        selectors(hover, focusWithin, headerActionsOpen, isMoving)
+      ),
     },
   };
 };

packages/eui/src/components/datagrid/body/cell/focus_utils.tsx

@@ -97,20 +97,24 @@ export const FocusTrappedChildren: FunctionComponent<
   // direct DOM manipulation as workaround to attach required hints
   useEffect(() => {
     const currentAriaDescribedbyId = cellEl.getAttribute('aria-describedby');
+    // A11y: splitting ids to be able to append the first hint (sorting)
+    // while other hints should follow the keyboard navigation hints
+    const [sortingId, ...rest] = currentAriaDescribedbyId?.split(' ') ?? [];
+    const remainingIds = rest.join(' ');
 
     cellEl.setAttribute(
       'aria-describedby',
-      classNames(currentAriaDescribedbyId, ariaDescribedById)
+      classNames(sortingId, ariaDescribedById, !isCellEntered && remainingIds)
     );
 
     return () => {
       if (currentAriaDescribedbyId) {
-        cellEl.setAttribute('aria-descibedby', currentAriaDescribedbyId);
+        cellEl.setAttribute('aria-describedby', currentAriaDescribedbyId);
       } else {
         cellEl.removeAttribute('aria-describedby');
       }
     };
-  }, [cellEl, ariaDescribedById]);
+  }, [cellEl, ariaDescribedById, isCellEntered]);
 
   useEffect(() => {
     if (isCellEntered) {
@@ -142,6 +146,7 @@ export const FocusTrappedChildren: FunctionComponent<
               isCellEntered === false &&
               isDOMNode(event.target) &&
               isDOMNode(event.currentTarget) &&
+              event.currentTarget !== event.target &&
               event.currentTarget.contains(event.target)
             ) {
               return true;