EuiDataGrid column visibility & ordering

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

@@ -11,16 +11,16 @@ import {
 
 const columns = [
   {
-    name: 'name',
+    id: 'name',
   },
   {
-    name: 'avatar_url',
+    id: 'avatar_url',
   },
   {
-    name: 'url',
+    id: 'url',
   },
   {
-    name: 'contributions',
+    id: 'contributions',
   },
 ];
 
@@ -395,9 +395,7 @@ export default class DataGrid extends Component {
             rowHover: this.state.rowHoverSelected,
             header: this.state.headerSelected,
           }}
-          renderCellValue={({ rowIndex, columnName }) =>
-            data[rowIndex][columnName]
-          }
+          renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
           pagination={{
             ...pagination,
             pageSizeOptions: [5, 10, 25],

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

@@ -125,6 +125,38 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
   data-test-subj="test subject string"
   role="grid"
 >
+  <div
+    class="euiPopover euiPopover--anchorDownCenter"
+    data-test-subj="dataGridColumnSelectorPopover"
+  >
+    <div
+      class="euiPopover__anchor"
+    >
+      <button
+        class="euiButton euiButton--primary"
+        type="button"
+      >
+        <span
+          class="euiButton__content"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+          <span
+            class="euiButton__text"
+          >
+            Columns
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
   <div
     class="euiDataGrid__content"
   >
@@ -134,7 +166,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
     >
       <div
         class="euiDataGridHeaderCell"
-        data-test-subj="dataGridHeaderCell"
+        data-test-subj="dataGridHeaderCell-A"
         role="columnheader"
         style="width:100px"
       >
@@ -151,7 +183,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
       </div>
       <div
         class="euiDataGridHeaderCell"
-        data-test-subj="dataGridHeaderCell"
+        data-test-subj="dataGridHeaderCell-B"
         role="columnheader"
         style="width:100px"
       >

src/components/datagrid/column_selector.tsx

@@ -0,0 +1,99 @@
+import React, { Fragment, FunctionComponent, useState } from 'react';
+import { EuiDataGridColumn } from './data_grid_types';
+// @ts-ignore-next-line
+import { EuiPopover } from '../popover';
+// @ts-ignore-next-line
+import { EuiButton } from '../button';
+// @ts-ignore-next-line
+import { EuiSwitch } from '../form';
+import {
+  EuiDragDropContext,
+  EuiDraggable,
+  EuiDroppable,
+} from '../drag_and_drop';
+import { DropResult } from 'react-beautiful-dnd';
+import { EuiIcon } from '../icon';
+
+export const useColumnSelector = (
+  availableColumns: EuiDataGridColumn[]
+): [FunctionComponent<any>, EuiDataGridColumn[]] => {
+  const [sortedColumns, setSortedColumns] = useState(availableColumns);
+
+  const [visibleColumns, setVisibleColumns] = useState(availableColumns);
+  const visibleColumnIds = visibleColumns.reduce((visibleColumnIds, { id }) => {
+    visibleColumnIds.add(id);
+    return visibleColumnIds;
+  }, new Set());
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  function onDragEnd({
+    source: { index: sourceIndex },
+    destination,
+  }: DropResult) {
+    const destinationIndex = destination!.index;
+    const nextSortedColumns = [...sortedColumns];
+
+    nextSortedColumns[sourceIndex] = sortedColumns[destinationIndex];
+    nextSortedColumns[destinationIndex] = sortedColumns[sourceIndex];
+
+    setSortedColumns(nextSortedColumns);
+
+    const nextVisibleColumns = nextSortedColumns.filter(({ id }) =>
+      visibleColumnIds.has(id)
+    );
+    setVisibleColumns(nextVisibleColumns);
+  }
+
+  const ColumnSelector = () => (
+    <EuiPopover
+      data-test-subj="dataGridColumnSelectorPopover"
+      isOpen={isOpen}
+      closePopover={() => setIsOpen(false)}
+      button={
+        <Fragment>
+          <EuiButton iconType="apps" onClick={() => setIsOpen(!isOpen)}>
+            Columns
+          </EuiButton>
+        </Fragment>
+      }>
+      <EuiDragDropContext onDragEnd={onDragEnd}>
+        <EuiDroppable droppableId="columnOrder">
+          <div>
+            {sortedColumns.map(({ id }, index) => (
+              <EuiDraggable key={id} draggableId={id} index={index}>
+                {provided => (
+                  <Fragment>
+                    <div {...provided.dragHandleProps}>
+                      <EuiIcon type="grab" />
+                    </div>
+                    <EuiSwitch
+                      name={id}
+                      label={id}
+                      checked={visibleColumnIds.has(id)}
+                      onChange={({
+                        currentTarget: { checked },
+                      }: React.FormEvent<HTMLInputElement>) => {
+                        const nextVisibleColumns = sortedColumns.filter(
+                          ({ id: columnId }) =>
+                            checked
+                              ? visibleColumnIds.has(columnId) ||
+                                id === columnId
+                              : visibleColumnIds.has(columnId) &&
+                                id !== columnId
+                        );
+                        setVisibleColumns(nextVisibleColumns);
+                      }}
+                    />
+                  </Fragment>
+                )}
+              </EuiDraggable>
+            ))}
+          </div>
+        </EuiDroppable>
+      </EuiDragDropContext>
+    </EuiPopover>
+  );
+
+  return [ColumnSelector, visibleColumns];
+};