[EuiDataGrid] External control of column order & visibility

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

@@ -44,6 +44,7 @@ export default class DataGridContainer extends Component {
         pageIndex: 0,
         pageSize: 50,
       },
+      visibleColumns: columns.map(({ id }) => id),
     };
   }
 
@@ -57,6 +58,8 @@ export default class DataGridContainer extends Component {
       pagination: { ...pagination, pageSize },
     }));
 
+  setVisibleColumns = visibleColumns => this.setState({ visibleColumns });
+
   render() {
     const { pagination } = this.state;
 
@@ -66,6 +69,10 @@ export default class DataGridContainer extends Component {
           <EuiDataGrid
             aria-label="Top EUI contributors"
             columns={columns}
+            columnVisibility={{
+              visibleColumns: this.state.visibleColumns,
+              setVisibleColumns: this.setVisibleColumns,
+            }}
             rowCount={data.length}
             gridStyle={{
               border: 'horizontal',

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

@@ -123,6 +123,11 @@ export default () => {
     return data.slice(rowStart, rowEnd);
   }, [data, pagination, inMemoryLevel]);
 
+  // Column visibility
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  ); // initialize to the full set of columns
+
   const renderCellValue = useMemo(() => {
     return ({ rowIndex, columnId, setCellProps }) => {
       let adjustedRowIndex = rowIndex;
@@ -209,6 +214,7 @@ export default () => {
       <EuiDataGrid
         aria-label="Data grid demo"
         columns={columns}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
         rowCount={raw_data.length}
         renderCellValue={renderCellValue}
         {...inMemoryProps}

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

@@ -64,6 +64,8 @@ export default class InMemoryDataGrid extends Component {
         pageIndex: 0,
         pageSize: 10,
       },
+
+      visibleColumns: columns.map(({ id }) => id),
     };
   }
 
@@ -79,13 +81,19 @@ export default class InMemoryDataGrid extends Component {
       pagination: { ...pagination, pageSize },
     }));
 
+  setVisibleColumns = visibleColumns => this.setState({ visibleColumns });
+
   render() {
     const { data, pagination, sortingColumns } = this.state;
 
     return (
       <EuiDataGrid
         aria-label="Top EUI contributors"
         columns={columns}
+        columnVisibility={{
+          visibleColumns: this.state.visibleColumns,
+          setVisibleColumns: this.setVisibleColumns,
+        }}
         rowCount={data.length}
         renderCellValue={({ rowIndex, columnId }) => {
           const value = data[rowIndex][columnId];

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

@@ -93,6 +93,8 @@ export default class DataGridSchema extends Component {
         pageIndex: 0,
         pageSize: 10,
       },
+
+      visibleColumns: columns.map(({ id }) => id),
     };
   }
 
@@ -123,6 +125,8 @@ export default class DataGridSchema extends Component {
       pagination: { ...pagination, pageSize },
     }));
 
+  setVisibleColumns = visibleColumns => this.setState({ visibleColumns });
+
   dummyIcon = () => (
     <EuiButtonIcon
       aria-label="dummy icon"
@@ -137,6 +141,10 @@ export default class DataGridSchema extends Component {
       <EuiDataGrid
         aria-label="Top EUI contributors"
         columns={columns}
+        columnVisibility={{
+          visibleColumns: this.state.visibleColumns,
+          setVisibleColumns: this.setVisibleColumns,
+        }}
         rowCount={data.length}
         inMemory={{ level: 'sorting' }}
         renderCellValue={({ rowIndex, columnId }) => {

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

@@ -144,6 +144,8 @@ export default class DataGrid extends Component {
         pageIndex: 0,
         pageSize: 50,
       },
+
+      visibleColumns: columns.map(({ id }) => id),
     };
   }
 
@@ -205,6 +207,8 @@ export default class DataGrid extends Component {
       pagination: { ...pagination, pageSize },
     }));
 
+  setVisibleColumns = visibleColumns => this.setState({ visibleColumns });
+
   render() {
     const { pagination } = this.state;
 
@@ -288,6 +292,10 @@ export default class DataGrid extends Component {
         <EuiDataGrid
           aria-label="Top EUI contributors"
           columns={columns}
+          columnVisibility={{
+            visibleColumns: this.state.visibleColumns,
+            setVisibleColumns: this.setVisibleColumns,
+          }}
           rowCount={data.length}
           gridStyle={{
             border: this.state.borderSelected,

src/components/datagrid/column_selector.tsx

@@ -6,7 +6,10 @@ import React, {
   ChangeEvent,
 } from 'react';
 import classNames from 'classnames';
-import { EuiDataGridColumn } from './data_grid_types';
+import {
+  EuiDataGridColumn,
+  EuiDataGridColumnVisibility,
+} from './data_grid_types';
 // @ts-ignore-next-line
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../popover';
 import { EuiI18n } from '../i18n';
@@ -19,20 +22,21 @@ import {
   EuiDragDropContext,
   EuiDraggable,
   EuiDroppable,
+  euiDragDropReorder,
 } from '../drag_and_drop';
 import { DropResult } from 'react-beautiful-dnd';
 import { EuiIcon } from '../icon';
 
 export const useColumnSelector = (
-  availableColumns: EuiDataGridColumn[]
+  availableColumns: EuiDataGridColumn[],
+  columnVisibility: EuiDataGridColumnVisibility
 ): [ReactElement, EuiDataGridColumn[]] => {
-  const [sortedColumns, setSortedColumns] = useState(availableColumns);
+  const [sortedColumns, setSortedColumns] = useState(() =>
+    availableColumns.map(({ id }) => id)
+  );
 
-  const [visibleColumns, setVisibleColumns] = useState(availableColumns);
-  const visibleColumnIds = visibleColumns.reduce((visibleColumnIds, { id }) => {
-    visibleColumnIds.add(id);
-    return visibleColumnIds;
-  }, new Set());
+  const { visibleColumns, setVisibleColumns } = columnVisibility;
+  const visibleColumnIds = new Set(visibleColumns);
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -41,14 +45,14 @@ export const useColumnSelector = (
     destination,
   }: DropResult) {
     const destinationIndex = destination!.index;
-    const nextSortedColumns = [...sortedColumns];
-
-    nextSortedColumns[sourceIndex] = sortedColumns[destinationIndex];
-    nextSortedColumns[destinationIndex] = sortedColumns[sourceIndex];
-
+    const nextSortedColumns = euiDragDropReorder(
+      sortedColumns,
+      sourceIndex,
+      destinationIndex
+    );
     setSortedColumns(nextSortedColumns);
 
-    const nextVisibleColumns = nextSortedColumns.filter(({ id }) =>
+    const nextVisibleColumns = nextSortedColumns.filter(id =>
       visibleColumnIds.has(id)
     );
     setVisibleColumns(nextVisibleColumns);
@@ -63,7 +67,7 @@ export const useColumnSelector = (
   });
 
   const filteredColumns = sortedColumns.filter(
-    ({ id }) => id.toLowerCase().indexOf(columnSearchText.toLowerCase()) !== -1
+    id => id.toLowerCase().indexOf(columnSearchText.toLowerCase()) !== -1
   );
   const isDragEnabled = columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
 
@@ -124,7 +128,7 @@ export const useColumnSelector = (
             isDropDisabled={!isDragEnabled}
             className="euiDataGridColumnSelector">
             <Fragment>
-              {filteredColumns.map(({ id }, index) => (
+              {filteredColumns.map((id, index) => (
                 <EuiDraggable
                   key={id}
                   draggableId={id}
@@ -146,7 +150,7 @@ export const useColumnSelector = (
                               currentTarget: { checked },
                             }: React.FormEvent<HTMLInputElement>) => {
                               const nextVisibleColumns = sortedColumns.filter(
-                                ({ id: columnId }) =>
+                                columnId =>
                                   checked
                                     ? visibleColumnIds.has(columnId) ||
                                       id === columnId
@@ -194,5 +198,11 @@ export const useColumnSelector = (
     </EuiPopover>
   );
 
-  return [columnSelector, visibleColumns];
+  const orderedVisibleColumns = visibleColumns
+    .map<EuiDataGridColumn>(
+      columnId =>
+        availableColumns.find(({ id }) => id === columnId) as EuiDataGridColumn // cast to avoid `undefined`, it filters those out next
+    )
+    .filter(column => column != null);
+  return [columnSelector, orderedVisibleColumns];
 };

src/components/datagrid/column_sorting.tsx

@@ -12,7 +12,11 @@ import { EuiI18n } from '../i18n';
 import { EuiText } from '../text';
 import { EuiButtonEmpty } from '../button';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
-import { EuiDragDropContext, EuiDroppable } from '../drag_and_drop';
+import {
+  EuiDragDropContext,
+  EuiDroppable,
+  euiDragDropReorder,
+} from '../drag_and_drop';
 import { DropResult } from 'react-beautiful-dnd';
 import { EuiIcon } from '../icon';
 import { EuiDataGridColumnSortingDraggable } from './column_sorting_draggable';
@@ -23,7 +27,7 @@ export const useColumnSorting = (
   columns: EuiDataGridColumn[],
   sorting: EuiDataGridSorting | undefined,
   schema: EuiDataGridSchema
-): [ReactNode] => {
+): ReactNode => {
   const [isOpen, setIsOpen] = useState(false);
   const [avilableColumnsisOpen, setAvailableColumnsIsOpen] = useState(false);
   const defaultSchemaColor: string = palettes.euiPaletteColorBlind.colors[4];
@@ -74,10 +78,11 @@ export const useColumnSorting = (
     destination,
   }: DropResult) {
     const destinationIndex = destination!.index;
-    const nextColumns = [...sorting!.columns];
-
-    nextColumns[sourceIndex] = sorting!.columns[destinationIndex];
-    nextColumns[destinationIndex] = sorting!.columns[sourceIndex];
+    const nextColumns = euiDragDropReorder(
+      sorting!.columns,
+      sourceIndex,
+      destinationIndex
+    );
 
     sorting!.onSort(nextColumns);
   }
@@ -250,5 +255,5 @@ export const useColumnSorting = (
     </EuiPopover>
   );
 
-  return [columnSorting];
+  return columnSorting;
 };