From 1af95550fd655b1a4bcdf32947628f01049b5f37 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 5 Mar 2020 15:23:48 -0700
Subject: [PATCH 1/5] Added customization functionality to EuiDataGrid's
 toolbarVisibility.showColumnSelector

---
 src-docs/src/views/datagrid/datagrid.js       |   5 +
 .../__snapshots__/data_grid.test.tsx.snap     |   8 +-
 src/components/datagrid/column_selector.tsx   | 161 +++++++++++-------
 src/components/datagrid/data_grid.tsx         |  53 +++---
 src/components/datagrid/data_grid_types.ts    |   9 +-
 5 files changed, 141 insertions(+), 95 deletions(-)

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index 62864d99fce..85e9157ff45 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -202,6 +202,11 @@ export default () => {
   return (
     <EuiDataGrid
       aria-label="Data grid demo"
+      toolbarVisibility={{
+        showColumnSelector: {
+          allowHide: false,
+        },
+      }}
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       trailingControlColumns={trailingControlColumns}
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 103dd9f4f5d..08c55097015 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -196,7 +196,7 @@ Array [
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Hide fields
+                  Columns
                 </span>
               </span>
             </button>
@@ -718,7 +718,7 @@ Array [
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Hide fields
+                  Columns
                 </span>
               </span>
             </button>
@@ -1435,7 +1435,7 @@ Array [
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Hide fields
+                  Columns
                 </span>
               </span>
             </button>
@@ -1956,7 +1956,7 @@ Array [
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Hide fields
+                  Columns
                 </span>
               </span>
             </button>
diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx
index fc776538b1f..3de233c27f2 100644
--- a/src/components/datagrid/column_selector.tsx
+++ b/src/components/datagrid/column_selector.tsx
@@ -10,6 +10,8 @@ import classNames from 'classnames';
 import {
   EuiDataGridColumn,
   EuiDataGridColumnVisibility,
+  EuiDataGridToolBarVisibilityColumnSelectorOptions,
+  EuiDataGridToolBarVisibilityOptions,
 } from './data_grid_types';
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../popover';
 import { EuiI18n } from '../i18n';
@@ -26,10 +28,30 @@ import { DropResult } from 'react-beautiful-dnd';
 import { EuiIcon } from '../icon';
 import { useDependentState } from '../../services';
 
+const getShowColumnSelectorValue = (
+  showColumnSelector: EuiDataGridToolBarVisibilityOptions['showColumnSelector'],
+  valueName: keyof EuiDataGridToolBarVisibilityColumnSelectorOptions
+) => {
+  if (showColumnSelector === false) return false;
+  if (showColumnSelector == null) return true;
+  if (showColumnSelector === true) return true;
+  return showColumnSelector[valueName] !== false;
+};
+
 export const useColumnSelector = (
   availableColumns: EuiDataGridColumn[],
-  columnVisibility: EuiDataGridColumnVisibility
+  columnVisibility: EuiDataGridColumnVisibility,
+  showColumnSelector: EuiDataGridToolBarVisibilityOptions['showColumnSelector']
 ): [ReactElement, EuiDataGridColumn[]] => {
+  const allowColumnHiding = getShowColumnSelectorValue(
+    showColumnSelector,
+    'allowHide'
+  );
+  const allowColumnReorder = getShowColumnSelectorValue(
+    showColumnSelector,
+    'allowReorder'
+  );
+
   const [sortedColumns, setSortedColumns] = useDependentState(
     () => availableColumns.map(({ id }) => id),
     [availableColumns]
@@ -69,7 +91,7 @@ export const useColumnSelector = (
   const filteredColumns = sortedColumns.filter(
     id => id.toLowerCase().indexOf(columnSearchText.toLowerCase()) !== -1
   );
-  const isDragEnabled = columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
+  const isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
 
   const columnSelector = (
     <EuiPopover
@@ -86,7 +108,7 @@ export const useColumnSelector = (
             'euiColumnSelector.button',
             'euiColumnSelector.buttonActive',
           ]}
-          defaults={['Hide fields', 'fields hidden']}>
+          defaults={['Columns', 'columns hidden']}>
           {([button, buttonActive]: ReactChild[]) => (
             <EuiButtonEmpty
               size="xs"
@@ -103,26 +125,28 @@ export const useColumnSelector = (
         </EuiI18n>
       }>
       <div>
-        <EuiPopoverTitle>
-          <EuiI18n
-            tokens={[
-              'euiColumnSelector.search',
-              'euiColumnSelector.searchcolumns',
-            ]}
-            defaults={['Search', 'Search columns']}>
-            {([search, searchcolumns]: string[]) => (
-              <EuiFieldText
-                compressed
-                placeholder={search}
-                aria-label={searchcolumns}
-                value={columnSearchText}
-                onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                  setColumnSearchText(e.currentTarget.value)
-                }
-              />
-            )}
-          </EuiI18n>
-        </EuiPopoverTitle>
+        {allowColumnHiding && (
+          <EuiPopoverTitle>
+            <EuiI18n
+              tokens={[
+                'euiColumnSelector.search',
+                'euiColumnSelector.searchcolumns',
+              ]}
+              defaults={['Search', 'Search columns']}>
+              {([search, searchcolumns]: string[]) => (
+                <EuiFieldText
+                  compressed
+                  placeholder={search}
+                  aria-label={searchcolumns}
+                  value={columnSearchText}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    setColumnSearchText(e.currentTarget.value)
+                  }
+                />
+              )}
+            </EuiI18n>
+          </EuiPopoverTitle>
+        )}
         <EuiDragDropContext onDragEnd={onDragEnd}>
           <EuiDroppable
             droppableId="columnOrder"
@@ -141,27 +165,31 @@ export const useColumnSelector = (
                         'euiDataGridColumnSelector__item-isDragging'}`}>
                       <EuiFlexGroup gutterSize="m" alignItems="center">
                         <EuiFlexItem>
-                          <EuiSwitch
-                            name={id}
-                            label={id}
-                            checked={visibleColumnIds.has(id)}
-                            compressed
-                            className="euiSwitch--mini"
-                            onChange={event => {
-                              const {
-                                target: { checked },
-                              } = event;
-                              const nextVisibleColumns = sortedColumns.filter(
-                                columnId =>
-                                  checked
-                                    ? visibleColumnIds.has(columnId) ||
-                                      id === columnId
-                                    : visibleColumnIds.has(columnId) &&
-                                      id !== columnId
-                              );
-                              setVisibleColumns(nextVisibleColumns);
-                            }}
-                          />
+                          {allowColumnHiding ? (
+                            <EuiSwitch
+                              name={id}
+                              label={id}
+                              checked={visibleColumnIds.has(id)}
+                              compressed
+                              className="euiSwitch--mini"
+                              onChange={event => {
+                                const {
+                                  target: { checked },
+                                } = event;
+                                const nextVisibleColumns = sortedColumns.filter(
+                                  columnId =>
+                                    checked
+                                      ? visibleColumnIds.has(columnId) ||
+                                        id === columnId
+                                      : visibleColumnIds.has(columnId) &&
+                                        id !== columnId
+                                );
+                                setVisibleColumns(nextVisibleColumns);
+                              }}
+                            />
+                          ) : (
+                            id
+                          )}
                         </EuiFlexItem>
                         {isDragEnabled && (
                           <EuiFlexItem grow={false}>
@@ -177,26 +205,31 @@ export const useColumnSelector = (
           </EuiDroppable>
         </EuiDragDropContext>
       </div>
-      <EuiPopoverFooter>
-        <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
-          <EuiFlexItem>
-            <EuiButtonEmpty
-              size="xs"
-              flush="left"
-              onClick={() => setVisibleColumns(sortedColumns)}>
-              <EuiI18n token="euiColumnSelector.selectAll" default="Show all" />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiButtonEmpty
-              size="xs"
-              flush="right"
-              onClick={() => setVisibleColumns([])}>
-              <EuiI18n token="euiColumnSelector.hideAll" default="Hide all" />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPopoverFooter>
+      {allowColumnHiding && (
+        <EuiPopoverFooter>
+          <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
+            <EuiFlexItem>
+              <EuiButtonEmpty
+                size="xs"
+                flush="left"
+                onClick={() => setVisibleColumns(sortedColumns)}>
+                <EuiI18n
+                  token="euiColumnSelector.selectAll"
+                  default="Show all"
+                />
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiButtonEmpty
+                size="xs"
+                flush="right"
+                onClick={() => setVisibleColumns([])}>
+                <EuiI18n token="euiColumnSelector.hideAll" default="Hide all" />
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPopoverFooter>
+      )}
     </EuiPopover>
   );
 
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 598ff5786fc..b0e2ba941c7 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -485,6 +485,31 @@ const useFocus = (
   return [focusProps, focusedCell, setFocusedCell];
 };
 
+// Typeguards to see if toolbarVisibility has a certain boolean property assigned
+// If not, just set it to true and assume it's OK to show
+function objectHasKey<O extends Record<string, any>, ObjectKey extends keyof O>(
+  object: O,
+  key: ObjectKey
+): object is Required<O> {
+  return object.hasOwnProperty(key);
+}
+function checkOrDefaultToolBarDiplayOptions<
+  OptionKey extends keyof EuiDataGridToolBarVisibilityOptions
+>(
+  arg: EuiDataGridProps['toolbarVisibility'],
+  option: OptionKey
+): Required<EuiDataGridToolBarVisibilityOptions>[OptionKey] {
+  if (arg === undefined) {
+    return true;
+  } else if (typeof arg === 'boolean') {
+    return arg as boolean;
+  } else if (objectHasKey(arg, option)) {
+    return arg[option];
+  } else {
+    return true;
+  }
+}
+
 export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [hasRoomForGridControls, setHasRoomForGridControls] = useState(true);
@@ -605,7 +630,8 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
 
   const [columnSelector, orderedVisibleColumns] = useColumnSelector(
     columns,
-    columnVisibility
+    columnVisibility,
+    checkOrDefaultToolBarDiplayOptions(toolbarVisibility, 'showColumnSelector')
   );
   const columnSorting = useColumnSorting(
     orderedVisibleColumns,
@@ -653,31 +679,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
   // By default the toolbar appears
   const showToolbar = !!toolbarVisibility;
 
-  // Typeguards to see if toolbarVisibility has a certain boolean property assigned
-  // If not, just set it to true and assume it's OK to show
-  function objectHasKey<
-    O extends Record<string, any>,
-    ObjectKey extends keyof O
-  >(object: O, key: ObjectKey): object is Required<O> {
-    return object.hasOwnProperty(key);
-  }
-  function checkOrDefaultToolBarDiplayOptions<
-    OptionKey extends keyof EuiDataGridToolBarVisibilityOptions
-  >(
-    arg: EuiDataGridProps['toolbarVisibility'],
-    option: OptionKey
-  ): Required<EuiDataGridToolBarVisibilityOptions>[OptionKey] {
-    if (arg === undefined) {
-      return true;
-    } else if (typeof arg === 'boolean') {
-      return arg as boolean;
-    } else if (objectHasKey(arg, option)) {
-      return arg[option];
-    } else {
-      return true;
-    }
-  }
-
   // These grid controls will only show when there is room. Check the resize observer callback
   // They can also be optionally turned off individually by using toolbarVisibility
   const gridControls = (
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 58b5165095e..26e7f0b4928 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -99,11 +99,18 @@ export interface EuiDataGridStyle {
   cellPadding?: EuiDataGridStyleCellPaddings;
 }
 
+export interface EuiDataGridToolBarVisibilityColumnSelectorOptions {
+  allowHide?: boolean;
+  allowReorder?: boolean;
+}
+
 export interface EuiDataGridToolBarVisibilityOptions {
   /**
    * Allows the ability for the user to hide fields and sort columns
    */
-  showColumnSelector?: boolean;
+  showColumnSelector?:
+    | boolean
+    | EuiDataGridToolBarVisibilityColumnSelectorOptions;
   /**
    * Allows the ability for the user to set the grid density. If on, this merges against what is provided in #EuiDataGridStyle
    */

From 67e542de90851934e013496840a4376c115601dc Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 10 Mar 2020 13:11:34 -0700
Subject: [PATCH 2/5] design updates

---
 .../__snapshots__/data_grid.test.tsx.snap     | 16 +++---
 .../datagrid/_data_grid_column_selector.scss  |  4 ++
 src/components/datagrid/column_selector.tsx   | 54 +++++++++++--------
 3 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 08c55097015..6dd0ae95c2a 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -191,12 +191,12 @@ Array [
                 <div
                   aria-hidden="true"
                   class="euiButtonEmpty__icon"
-                  data-euiicon-type="eyeClosed"
+                  data-euiicon-type="listAdd"
                 />
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Columns
+                   Columns
                 </span>
               </span>
             </button>
@@ -713,12 +713,12 @@ Array [
                 <div
                   aria-hidden="true"
                   class="euiButtonEmpty__icon"
-                  data-euiicon-type="eyeClosed"
+                  data-euiicon-type="listAdd"
                 />
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Columns
+                   Columns
                 </span>
               </span>
             </button>
@@ -1430,12 +1430,12 @@ Array [
                 <div
                   aria-hidden="true"
                   class="euiButtonEmpty__icon"
-                  data-euiicon-type="eyeClosed"
+                  data-euiicon-type="listAdd"
                 />
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Columns
+                   Columns
                 </span>
               </span>
             </button>
@@ -1951,12 +1951,12 @@ Array [
                 <div
                   aria-hidden="true"
                   class="euiButtonEmpty__icon"
-                  data-euiicon-type="eyeClosed"
+                  data-euiicon-type="listAdd"
                 />
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Columns
+                   Columns
                 </span>
               </span>
             </button>
diff --git a/src/components/datagrid/_data_grid_column_selector.scss b/src/components/datagrid/_data_grid_column_selector.scss
index a339a0de063..ea67ebae8ad 100644
--- a/src/components/datagrid/_data_grid_column_selector.scss
+++ b/src/components/datagrid/_data_grid_column_selector.scss
@@ -15,6 +15,10 @@
   margin: 0 (-$euiSizeS);
 }
 
+.euiDataGridColumnSelector__itemLabel {
+  @include euiFontSizeXS;
+}
+
 .euiDataGridColumnSelectorPopover {
   // Hack because the fixed positions of drag and drop don't work inside of transformed elements
   // sass-lint:disable-block no-important
diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx
index 3de233c27f2..71c6fc0b61c 100644
--- a/src/components/datagrid/column_selector.tsx
+++ b/src/components/datagrid/column_selector.tsx
@@ -2,7 +2,6 @@ import React, {
   Fragment,
   useState,
   useMemo,
-  ReactChild,
   ReactElement,
   ChangeEvent,
 } from 'react';
@@ -93,6 +92,26 @@ export const useColumnSelector = (
   );
   const isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
 
+  let buttonText = (
+    <EuiI18n token="euiColumnSelector.button" default="Columns" />
+  );
+
+  if (numberOfHiddenFields === 1) {
+    buttonText = (
+      <EuiI18n
+        token="euiColumnSelector.buttonActiveSingular"
+        default="column hidden"
+      />
+    );
+  } else if (numberOfHiddenFields > 1) {
+    buttonText = (
+      <EuiI18n
+        token="euiColumnSelector.buttonActivePlural"
+        default="columns hidden"
+      />
+    );
+  }
+
   const columnSelector = (
     <EuiPopover
       data-test-subj="dataGridColumnSelectorPopover"
@@ -103,26 +122,15 @@ export const useColumnSelector = (
       panelPaddingSize="s"
       panelClassName="euiDataGridColumnSelectorPopover"
       button={
-        <EuiI18n
-          tokens={[
-            'euiColumnSelector.button',
-            'euiColumnSelector.buttonActive',
-          ]}
-          defaults={['Columns', 'columns hidden']}>
-          {([button, buttonActive]: ReactChild[]) => (
-            <EuiButtonEmpty
-              size="xs"
-              iconType="eyeClosed"
-              color="text"
-              className={controlBtnClasses}
-              data-test-subj="dataGridColumnSelectorButton"
-              onClick={() => setIsOpen(!isOpen)}>
-              {numberOfHiddenFields > 0
-                ? `${numberOfHiddenFields} ${buttonActive}`
-                : button}
-            </EuiButtonEmpty>
-          )}
-        </EuiI18n>
+        <EuiButtonEmpty
+          size="xs"
+          iconType={allowColumnHiding ? 'listAdd' : 'list'}
+          color="text"
+          className={controlBtnClasses}
+          data-test-subj="dataGridColumnSelectorButton"
+          onClick={() => setIsOpen(!isOpen)}>
+          {numberOfHiddenFields > 0 ? numberOfHiddenFields : null} {buttonText}
+        </EuiButtonEmpty>
       }>
       <div>
         {allowColumnHiding && (
@@ -188,7 +196,9 @@ export const useColumnSelector = (
                               }}
                             />
                           ) : (
-                            id
+                            <span className="euiDataGridColumnSelector__itemLabel">
+                              {id}
+                            </span>
                           )}
                         </EuiFlexItem>
                         {isDragEnabled && (

From 52a3f2b71110595d3186d9f4dcd4a76594e1d13c Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 10 Mar 2020 15:07:23 -0700
Subject: [PATCH 3/5] docs improved

---
 src-docs/src/views/datagrid/datagrid.js       |  5 --
 .../datagrid/datagrid_styling_example.js      |  3 +-
 src-docs/src/views/datagrid/styling.js        | 73 +++++++++++++++----
 3 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index 85e9157ff45..62864d99fce 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -202,11 +202,6 @@ export default () => {
   return (
     <EuiDataGrid
       aria-label="Data grid demo"
-      toolbarVisibility={{
-        showColumnSelector: {
-          allowHide: false,
-        },
-      }}
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       trailingControlColumns={trailingControlColumns}
diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js
index 29160929363..a7089cc6452 100644
--- a/src-docs/src/views/datagrid/datagrid_styling_example.js
+++ b/src-docs/src/views/datagrid/datagrid_styling_example.js
@@ -37,10 +37,11 @@ const gridSnippet = `<EuiDataGrid
   ]}
   // This can work as a shape.
   toolbarVisibility={{
-    showColumnSelector: false
     showStyleSelector: false
     showSortSelector: false
     showFullScreenSelector: false
+    // showColumnSelector also takes an object, check the prop docs.
+    showColumnSelector: false
     additionalControls: (
       <Fragment>
         <EuiButtonEmpty
diff --git a/src-docs/src/views/datagrid/styling.js b/src-docs/src/views/datagrid/styling.js
index 4078dfaabd7..febe3c03ab4 100644
--- a/src-docs/src/views/datagrid/styling.js
+++ b/src-docs/src/views/datagrid/styling.js
@@ -167,6 +167,17 @@ export default class DataGrid extends Component {
       },
     ];
 
+    this.allowHideColumnsOptions = [
+      {
+        id: 'true',
+        label: 'True',
+      },
+      {
+        id: 'false',
+        label: 'False',
+      },
+    ];
+
     this.showFullScreenSelectorOptions = [
       {
         id: 'true',
@@ -212,6 +223,7 @@ export default class DataGrid extends Component {
       showSortSelector: true,
       showStyleSelector: true,
       showColumnSelector: true,
+      allowHideColumns: true,
       showFullScreenSelector: true,
       showToolbar: true,
       toolbarPropTypeIsBoolean: true,
@@ -279,6 +291,12 @@ export default class DataGrid extends Component {
     });
   };
 
+  onAllowHideColumnsChange = optionId => {
+    this.setState({
+      allowHideColumns: optionId === 'true',
+    });
+  };
+
   onShowFullScreenSelectorChange = optionId => {
     this.setState({
       showFullScreenSelector: optionId === 'true',
@@ -356,8 +374,18 @@ export default class DataGrid extends Component {
       </EuiButton>
     );
 
+    let showColumnSelector = this.state.showColumnSelector;
+    if (
+      this.state.showColumnSelector === true &&
+      this.state.allowHideColumns === false
+    ) {
+      showColumnSelector = {
+        allowHide: false,
+      };
+    }
+
     const toolbarVisibilityOptions = {
-      showColumnSelector: this.state.showColumnSelector,
+      showColumnSelector: showColumnSelector,
       showStyleSelector: this.state.showStyleSelector,
       showSortSelector: this.state.showSortSelector,
       showFullScreenSelector: this.state.showFullScreenSelector,
@@ -459,7 +487,7 @@ export default class DataGrid extends Component {
               anchorPosition="rightUp"
               zIndex={2}
               closePopover={this.closeToolbarPopover.bind(this)}>
-              <div style={{ width: 300 }}>
+              <div style={{ width: 400 }}>
                 <EuiFormRow
                   display="columnCompressed"
                   label="toolbarVisibility prop">
@@ -474,19 +502,6 @@ export default class DataGrid extends Component {
                 </EuiFormRow>
                 {this.state.toolbarPropTypeIsBoolean === false ? (
                   <Fragment>
-                    <EuiFormRow
-                      display="columnCompressed"
-                      label="Show column selector">
-                      <EuiButtonGroup
-                        isFullWidth
-                        buttonSize="compressed"
-                        legend="Border"
-                        options={this.showColumnSelectorOptions}
-                        idSelected={this.state.showColumnSelector.toString()}
-                        onChange={this.onShowColumnSelectorChange}
-                      />
-                    </EuiFormRow>
-
                     <EuiFormRow
                       display="columnCompressed"
                       label="Show style selector">
@@ -525,6 +540,34 @@ export default class DataGrid extends Component {
                         onChange={this.onShowFullScreenSelectorChange}
                       />
                     </EuiFormRow>
+
+                    <EuiFormRow
+                      display="columnCompressed"
+                      label="Show column selector">
+                      <EuiButtonGroup
+                        isFullWidth
+                        buttonSize="compressed"
+                        legend="Border"
+                        options={this.showColumnSelectorOptions}
+                        idSelected={this.state.showColumnSelector.toString()}
+                        onChange={this.onShowColumnSelectorChange}
+                      />
+                    </EuiFormRow>
+                    {this.state.showColumnSelector && (
+                      <EuiFormRow
+                        display="columnCompressed"
+                        label="Allow hiding columns"
+                        style={{ marginLeft: 32 }}>
+                        <EuiButtonGroup
+                          isFullWidth
+                          buttonSize="compressed"
+                          legend="Border"
+                          options={this.allowHideColumnsOptions}
+                          idSelected={this.state.allowHideColumns.toString()}
+                          onChange={this.onAllowHideColumnsChange}
+                        />
+                      </EuiFormRow>
+                    )}
                   </Fragment>
                 ) : (
                   <EuiFormRow display="columnCompressed" label="Show toolbar">

From c5f4aed80d24ad7f84cc9e78a2e0220934ec8ff2 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 12 Mar 2020 10:58:34 -0600
Subject: [PATCH 4/5] Updated columns localization text to allow moving numeric
 value; added toolbar visibility control to docs

---
 src-docs/src/views/datagrid/styling.js        | 65 ++++++++++++++-----
 .../__snapshots__/data_grid.test.tsx.snap     |  8 +--
 src/components/datagrid/column_selector.tsx   |  8 ++-
 3 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/src-docs/src/views/datagrid/styling.js b/src-docs/src/views/datagrid/styling.js
index febe3c03ab4..ba5b8619346 100644
--- a/src-docs/src/views/datagrid/styling.js
+++ b/src-docs/src/views/datagrid/styling.js
@@ -178,6 +178,17 @@ export default class DataGrid extends Component {
       },
     ];
 
+    this.allowOrderingColumnsOptions = [
+      {
+        id: 'true',
+        label: 'True',
+      },
+      {
+        id: 'false',
+        label: 'False',
+      },
+    ];
+
     this.showFullScreenSelectorOptions = [
       {
         id: 'true',
@@ -224,6 +235,7 @@ export default class DataGrid extends Component {
       showStyleSelector: true,
       showColumnSelector: true,
       allowHideColumns: true,
+      allowOrderingColumns: true,
       showFullScreenSelector: true,
       showToolbar: true,
       toolbarPropTypeIsBoolean: true,
@@ -297,6 +309,12 @@ export default class DataGrid extends Component {
     });
   };
 
+  onAllowOrderingColumnsChange = optionId => {
+    this.setState({
+      allowOrderingColumns: optionId === 'true',
+    });
+  };
+
   onShowFullScreenSelectorChange = optionId => {
     this.setState({
       showFullScreenSelector: optionId === 'true',
@@ -377,10 +395,12 @@ export default class DataGrid extends Component {
     let showColumnSelector = this.state.showColumnSelector;
     if (
       this.state.showColumnSelector === true &&
-      this.state.allowHideColumns === false
+      (this.state.allowHideColumns === false ||
+        this.state.allowOrderingColumns === false)
     ) {
       showColumnSelector = {
-        allowHide: false,
+        allowHide: this.state.allowHideColumns,
+        allowReorder: this.state.allowOrderingColumns,
       };
     }
 
@@ -554,19 +574,34 @@ export default class DataGrid extends Component {
                       />
                     </EuiFormRow>
                     {this.state.showColumnSelector && (
-                      <EuiFormRow
-                        display="columnCompressed"
-                        label="Allow hiding columns"
-                        style={{ marginLeft: 32 }}>
-                        <EuiButtonGroup
-                          isFullWidth
-                          buttonSize="compressed"
-                          legend="Border"
-                          options={this.allowHideColumnsOptions}
-                          idSelected={this.state.allowHideColumns.toString()}
-                          onChange={this.onAllowHideColumnsChange}
-                        />
-                      </EuiFormRow>
+                      <>
+                        <EuiFormRow
+                          display="columnCompressed"
+                          label="Allow hiding columns"
+                          style={{ marginLeft: 32 }}>
+                          <EuiButtonGroup
+                            isFullWidth
+                            buttonSize="compressed"
+                            legend="Border"
+                            options={this.allowHideColumnsOptions}
+                            idSelected={this.state.allowHideColumns.toString()}
+                            onChange={this.onAllowHideColumnsChange}
+                          />
+                        </EuiFormRow>
+                        <EuiFormRow
+                          display="columnCompressed"
+                          label="Allow ordering columns"
+                          style={{ marginLeft: 32 }}>
+                          <EuiButtonGroup
+                            isFullWidth
+                            buttonSize="compressed"
+                            legend="Border"
+                            options={this.allowOrderingColumnsOptions}
+                            idSelected={this.state.allowOrderingColumns.toString()}
+                            onChange={this.onAllowOrderingColumnsChange}
+                          />
+                        </EuiFormRow>
+                      </>
                     )}
                   </Fragment>
                 ) : (
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 6dd0ae95c2a..b4de6816b40 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -196,7 +196,7 @@ Array [
                 <span
                   class="euiButtonEmpty__text"
                 >
-                   Columns
+                  Columns
                 </span>
               </span>
             </button>
@@ -718,7 +718,7 @@ Array [
                 <span
                   class="euiButtonEmpty__text"
                 >
-                   Columns
+                  Columns
                 </span>
               </span>
             </button>
@@ -1435,7 +1435,7 @@ Array [
                 <span
                   class="euiButtonEmpty__text"
                 >
-                   Columns
+                  Columns
                 </span>
               </span>
             </button>
@@ -1956,7 +1956,7 @@ Array [
                 <span
                   class="euiButtonEmpty__text"
                 >
-                   Columns
+                  Columns
                 </span>
               </span>
             </button>
diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx
index 71c6fc0b61c..82ae5ab8bd8 100644
--- a/src/components/datagrid/column_selector.tsx
+++ b/src/components/datagrid/column_selector.tsx
@@ -100,14 +100,16 @@ export const useColumnSelector = (
     buttonText = (
       <EuiI18n
         token="euiColumnSelector.buttonActiveSingular"
-        default="column hidden"
+        default="{numberOfHiddenFields} column hidden"
+        values={{ numberOfHiddenFields }}
       />
     );
   } else if (numberOfHiddenFields > 1) {
     buttonText = (
       <EuiI18n
         token="euiColumnSelector.buttonActivePlural"
-        default="columns hidden"
+        default="{numberOfHiddenFields} columns hidden"
+        values={{ numberOfHiddenFields }}
       />
     );
   }
@@ -129,7 +131,7 @@ export const useColumnSelector = (
           className={controlBtnClasses}
           data-test-subj="dataGridColumnSelectorButton"
           onClick={() => setIsOpen(!isOpen)}>
-          {numberOfHiddenFields > 0 ? numberOfHiddenFields : null} {buttonText}
+          {buttonText}
         </EuiButtonEmpty>
       }>
       <div>

From fa4df005af5ac72888a410694d8341ace12d5660 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 12 Mar 2020 12:08:56 -0600
Subject: [PATCH 5/5] Changelog & prop docs

---
 CHANGELOG.md                                    | 1 +
 src-docs/src/views/datagrid/datagrid_example.js | 2 ++
 src-docs/src/views/datagrid/props.tsx           | 5 +++++
 src/components/datagrid/data_grid_types.ts      | 8 +++++++-
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 336a3fb016b..b54429681b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Added `onColumnResize` prop to `EuiDataGrid` of type `EuiDataGridOnColumnResizeHandler` that gets called when column changes it's size ([#2963](https://github.com/elastic/eui/pull/2963))
 - Added RGB format support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850))
 - Added alpha channel (opacity) support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850))
+- Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993))
 
 **Bug Fixes**
 
diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js
index 14c67b714d3..15ed7a627a9 100644
--- a/src-docs/src/views/datagrid/datagrid_example.js
+++ b/src-docs/src/views/datagrid/datagrid_example.js
@@ -30,6 +30,7 @@ import {
   DataGridColumnVisibility,
   DataGridPopoverContent,
   DataGridControlColumn,
+  DataGridToolBarVisibilityColumnSelectorOptions,
 } from './props';
 
 const gridSnippet = `
@@ -351,6 +352,7 @@ export const DataGridExample = {
         EuiDataGridSchemaDetector: DataGridSchemaDetector,
         EuiDataGridStyle: DataGridStyle,
         EuiDataGridToolbarVisibilityOptions: DataGridToolbarVisibilityOptions,
+        EuiDataGridToolBarVisibilityColumnSelectorOptions: DataGridToolBarVisibilityColumnSelectorOptions,
         EuiDataGridPopoverContent: DataGridPopoverContent,
       },
       demo: (
diff --git a/src-docs/src/views/datagrid/props.tsx b/src-docs/src/views/datagrid/props.tsx
index bd828719b24..1c81700f261 100644
--- a/src-docs/src/views/datagrid/props.tsx
+++ b/src-docs/src/views/datagrid/props.tsx
@@ -9,6 +9,7 @@ import {
   EuiDataGridColumnVisibility,
   EuiDataGridPopoverContentProps,
   EuiDataGridControlColumn,
+  EuiDataGridToolBarVisibilityColumnSelectorOptions,
 } from '../../../../src/components/datagrid/data_grid_types';
 import { EuiDataGridCellValueElementProps } from '../../../../src/components/datagrid/data_grid_cell';
 import { EuiDataGridSchemaDetector } from '../../../../src/components/datagrid/data_grid_schema';
@@ -54,3 +55,7 @@ export const DataGridPopoverContent: FunctionComponent<
 export const DataGridControlColumn: FunctionComponent<
   EuiDataGridControlColumn
 > = () => <div />;
+
+export const DataGridToolBarVisibilityColumnSelectorOptions: FunctionComponent<
+  EuiDataGridToolBarVisibilityColumnSelectorOptions
+> = () => <div />;
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 7157d761fc8..b30a7260bee 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -104,13 +104,19 @@ export interface EuiDataGridStyle {
 }
 
 export interface EuiDataGridToolBarVisibilityColumnSelectorOptions {
+  /**
+   * When `false`, removes the ability to show & hide columns through the UI
+   */
   allowHide?: boolean;
+  /**
+   * When `false`, removes the ability to re-order columns through the UI
+   */
   allowReorder?: boolean;
 }
 
 export interface EuiDataGridToolBarVisibilityOptions {
   /**
-   * Allows the ability for the user to hide fields and sort columns
+   * Allows the ability for the user to hide fields and sort columns, boolean or a #EuiDataGridToolBarVisibilityColumnSelectorOptions
    */
   showColumnSelector?:
     | boolean