[DATA GRID] Add Column header menu (#3087)

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
Co-authored-by: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added footer row to `EuiDataGrid` via the `renderFooterCellValue` prop ([#3770](https://github.com/elastic/eui/pull/3770))
+- Added column header menu to `EuiDataGrid` ([#3087](https://github.com/elastic/eui/pull/3087))
 
 ## [`29.0.0`](https://github.com/elastic/eui/tree/v29.0.0)
 

src-docs/src/views/datagrid/column_actions.js

@@ -0,0 +1,107 @@
+import React, { useState, useCallback } from 'react';
+import { fake } from 'faker';
+
+import { EuiDataGrid, EuiAvatar } from '../../../../src/components/';
+
+const columns = [
+  {
+    id: 'avatar',
+    initialWidth: 40,
+    isResizable: false,
+    actions: false,
+  },
+  {
+    id: 'name',
+    initialWidth: 100,
+    isSortable: true,
+    actions: {
+      showHide: false,
+    },
+  },
+  {
+    id: 'email',
+    isSortable: true,
+    actions: {
+      additional: [
+        {
+          iconType: 'heart',
+          label: 'Send Email',
+          size: 'xs',
+          onClick: () =>
+            alert('🎵Return to sender, address unknown, no such number,...'),
+        },
+      ],
+    },
+  },
+  {
+    id: 'city',
+    isSortable: true,
+    actions: {
+      showHide: {
+        iconType: 'cross',
+        label: 'Remove column',
+      },
+    },
+  },
+  {
+    id: 'country',
+  },
+  {
+    id: 'account',
+  },
+];
+
+const data = [];
+
+for (let i = 1; i < 5; i++) {
+  data.push({
+    avatar: (
+      <EuiAvatar
+        size="s"
+        imageUrl={fake('{{internet.avatar}}')}
+        name={fake('{{name.lastName}}, {{name.firstName}}')}
+      />
+    ),
+    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
+    email: fake('{{internet.email}}'),
+    city: fake('{{address.city}}'),
+    country: fake('{{address.country}}'),
+    account: fake('{{finance.account}}'),
+  });
+}
+
+export default () => {
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  );
+
+  const setPageIndex = useCallback(
+    pageIndex => setPagination({ ...pagination, pageIndex }),
+    [pagination, setPagination]
+  );
+  const setPageSize = useCallback(
+    pageSize => setPagination({ ...pagination, pageSize, pageIndex: 0 }),
+    [pagination, setPagination]
+  );
+
+  return (
+    <EuiDataGrid
+      aria-label="DataGrid demonstrating column sizing constraints"
+      columns={columns}
+      columnVisibility={{
+        visibleColumns: visibleColumns,
+        setVisibleColumns: setVisibleColumns,
+      }}
+      rowCount={data.length}
+      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+      pagination={{
+        ...pagination,
+        pageSizeOptions: [5, 10, 25],
+        onChangeItemsPerPage: setPageSize,
+        onChangePage: setPageIndex,
+      }}
+    />
+  );
+};

src-docs/src/views/datagrid/datagrid.js

@@ -26,28 +26,26 @@ const columns = [
   },
   {
     id: 'email',
-    display: (
-      // This is an example of an icon next to a title that still respects text truncate
-      <EuiFlexGroup gutterSize="xs" responsive={false}>
-        <EuiFlexItem className="eui-textTruncate">
-          <div className="eui-textTruncate">email</div>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonIcon
-            aria-label="Column header email"
-            iconType="gear"
-            color="text"
-            onClick={() => alert('Email Icon Clicked!')}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    ),
   },
   {
     id: 'location',
   },
   {
     id: 'account',
+    actions: {
+      showHide: { label: 'Custom hide label' },
+      showMoveLeft: false,
+      showMoveRight: false,
+      additional: [
+        {
+          label: 'Custom action',
+          onClick: () => alert('🎉'),
+          iconType: 'cheer',
+          size: 'xs',
+          color: 'text',
+        },
+      ],
+    },
   },
   {
     id: 'date',
@@ -65,6 +63,7 @@ const columns = [
     defaultSortDirection: 'desc',
     initialWidth: 65,
     isResizable: false,
+    actions: false,
   },
 ];
 

src-docs/src/views/datagrid/datagrid_example.js

@@ -26,6 +26,7 @@ import {
   EuiDataGridStyle,
   EuiDataGridToolBarVisibilityOptions,
   EuiDataGridColumnVisibility,
+  EuiDataGridColumnActions,
   EuiDataGridPopoverContentProps,
   EuiDataGridControlColumn,
   EuiDataGridToolBarVisibilityColumnSelectorOptions,
@@ -41,9 +42,13 @@ const gridSnippet = `
     // Required. There are 200 total records.
     rowCount={200}
     // Required. Sets up three columns, the last of which has a custom schema we later define down below.
-    // The second column B won't allow clicking in to see the content in a popup.
-    // The first column defines a starting width of 150px and prevents the user from resizing it
-    columns={[{ id: 'A', initialWidth: 150, isResizable: false }, { id: 'B', isExpandable: false }, {id: 'C', schema: 'franchise'}]}
+    // The second column B won't allow clicking in to see the content in a popup and doesn't show move actions in column header cell
+    // The first column defines a starting width of 150px, prevents the user from resizing it and no actions are displayed
+    columns={[
+        { id: 'A', initialWidth: 150, isResizable: false, actions: false },
+        { id: 'B', isExpandable: false, actions: { showMoveLeft: false, showMoveRight: false } },
+        { id: 'C', schema: 'franchise'}
+    ]}
     // Optional. This allows you to initially hide columns. Users can still turn them on.
     columnVisibility={{
       visibleColumns: ['A', 'C'],
@@ -354,6 +359,7 @@ export const DataGridExample = {
         EuiDataGrid,
         EuiDataGridColumn,
         EuiDataGridColumnVisibility,
+        EuiDataGridColumnActions,
         EuiDataGridControlColumn,
         EuiDataGridInMemory,
         EuiDataGridPaginationProps,

src-docs/src/views/datagrid/datagrid_schema_example.js

@@ -11,6 +11,7 @@ const dataGridSchemaHtml = renderToHtml(DataGridSchema);
 
 import {
   EuiDataGridColumn,
+  EuiDataGridColumnActions,
   EuiDataGridPaginationProps,
   EuiDataGridSorting,
   EuiDataGridInMemory,
@@ -89,6 +90,7 @@ export const DataGridSchemaExample = {
         EuiDataGrid,
         EuiDataGridInMemory,
         EuiDataGridColumn,
+        EuiDataGridColumnActions,
         EuiDataGridColumnVisibility,
         EuiDataGridPaginationProps,
         EuiDataGridSorting,

src-docs/src/views/datagrid/datagrid_styling_example.js

@@ -3,7 +3,12 @@ import React, { Fragment } from 'react';
 import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
-import { EuiDataGrid, EuiCode, EuiCodeBlock } from '../../../../src/components';
+import {
+  EuiDataGrid,
+  EuiCode,
+  EuiCodeBlock,
+  EuiListGroupItem,
+} from '../../../../src/components';
 
 import DataGridContainer from './container';
 const dataGridContainerSource = require('!!raw-loader!./container');
@@ -18,11 +23,15 @@ const dataGridControlsSource = require('!!raw-loader!./additional_controls');
 const dataGridControlsHtml = renderToHtml(DataGridControls);
 
 import DataGridColumnWidths from './column_widths';
+import DataGridColumnActions from './column_actions';
 const dataGridColumnWidthsSource = require('!!raw-loader!./column_widths');
 const dataGridColumnWidthsHtml = renderToHtml(DataGridColumnWidths);
+const dataGridColumnActionsSource = require('!!raw-loader!./column_actions');
+const dataGridColumnActionsHtml = renderToHtml(DataGridColumnActions);
 
 import {
   EuiDataGridColumn,
+  EuiDataGridColumnActions,
   EuiDataGridStyle,
   EuiDataGridToolBarVisibilityOptions,
 } from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';
@@ -123,7 +132,7 @@ const widthsSnippet = `<EuiDataGrid
 `;
 
 export const DataGridStylingExample = {
-  title: 'Data grid styling and toolbar',
+  title: 'Data grid styling and control',
   sections: [
     {
       source: [
@@ -260,5 +269,47 @@ export const DataGridStylingExample = {
       },
       demo: <DataGridColumnWidths />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridColumnActionsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridColumnActionsHtml,
+        },
+      ],
+      title: 'Column actions',
+      text: (
+        <Fragment>
+          <p>
+            By default, columns provide actions for sorting, moving and hiding.
+            These can be extended with custom actions. You can customize the
+            actions by setting the <EuiCode>actions</EuiCode> value of{' '}
+            <strong>EuiDataGridColumn</strong>. Setting it to{' '}
+            <EuiCode>false</EuiCode> removes the action menu displayed. You can
+            configure it by passing an object of type{' '}
+            <strong>EuiDataGridColumnAction</strong>. This allows you a hide,
+            configure the existing actions and add new ones.
+          </p>
+          <p>
+            Below, the first column provides no action, the second doesn&apos;t
+            provide the ability to hide the columns, the 3rd provides an
+            additional action, the 4th overwrites the hide action with a custom
+            label and icon.
+          </p>
+        </Fragment>
+      ),
+      components: { DataGridColumnActions },
+      snippet: widthsSnippet,
+      props: {
+        EuiDataGrid,
+        EuiDataGridColumn,
+        EuiDataGridColumnActions,
+        EuiListGroupItem,
+      },
+      demo: <DataGridColumnActions />,
+    },
   ],
 };

src-docs/src/views/datagrid/focus.js

@@ -97,6 +97,7 @@ export default () => {
           </EuiFlexGroup>
         ),
         isExpandable: false,
+        actions: false,
       },
       {
         id: 'no-interactives is expandable',
@@ -115,6 +116,7 @@ export default () => {
             </EuiFlexItem>
           </EuiFlexGroup>
         ),
+        actions: false,
       },
       {
         id: 'one-interactive not expandable',
@@ -134,6 +136,7 @@ export default () => {
           </EuiFlexGroup>
         ),
         isExpandable: false,
+        actions: false,
       },
       {
         id: 'one-interactives is expandable',
@@ -153,6 +156,7 @@ export default () => {
             </EuiFlexItem>
           </EuiFlexGroup>
         ),
+        actions: false,
       },
       {
         id: 'two-interactives not expandable',
@@ -173,6 +177,7 @@ export default () => {
           </EuiFlexGroup>
         ),
         isExpandable: false,
+        actions: false,
       },
       {
         id: 'two-interactives is expandable',
@@ -192,6 +197,7 @@ export default () => {
             </EuiFlexItem>
           </EuiFlexGroup>
         ),
+        actions: false,
       },
     ],
     [areHeadersInteractive]