Allow DataGrid's columns popover to optionally not allow hiding and/or reordering

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}

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>

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>
   );
 

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 = (

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
    */