EuiDataGrid column visibility & ordering (#2207)

* Show/hide and re-order datagrid columns * Column visability & ordering tests * column styling * column sizing and bars * blergh * tests * feedback * Fix linting
elastic · Aug 9, 2019 · 1bfb3a7 · 1bfb3a7
1 parent 8a26ef5
commit 1bfb3a7
Show file tree

Hide file tree

Showing 18 changed files with 795 additions and 288 deletions.
diff --git a/src-docs/src/views/datagrid/datagrid.js b/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',
   },
 ];
 
@@ -323,6 +323,7 @@ export default class DataGrid extends Component {
           button={button}
           isOpen={this.state.isPopoverOpen}
           anchorPosition="rightUp"
+          zIndex={2}
           closePopover={this.closePopover.bind(this)}>
           <div>
             <EuiFormRow label="Border">
@@ -395,9 +396,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],

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -119,129 +119,157 @@ exports[`EuiDataGrid pagination renders 1`] = `
 `;
 
 exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--rowHoverHighlight testClass1 testClass2"
-  data-test-subj="test subject string"
-  role="grid"
->
+Array [
   <div
-    class="euiDataGrid__content"
+    class="euiDataGrid__controls"
   >
     <div
-      class="euiDataGridHeader"
-      data-test-subj="dataGridHeader"
+      class="euiPopover euiPopover--anchorDownLeft"
+      data-test-subj="dataGridColumnSelectorPopover"
     >
       <div
-        class="euiDataGridHeaderCell"
-        data-test-subj="dataGridHeaderCell"
-        role="columnheader"
-        style="width:100px"
+        class="euiPopover__anchor"
       >
-        <div
-          class="euiDataGridColumnResizer"
-          data-test-subj="dataGridColumnResizer"
-          style="margin-right:0px"
-        />
-        <div
-          class="euiDataGridHeaderCell__content"
+        <button
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
+          type="button"
         >
-          A
-        </div>
+          <span
+            class="euiButtonEmpty__content"
+          >
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonEmpty__icon"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              Columns
+            </span>
+          </span>
+        </button>
       </div>
+    </div>
+  </div>,
+  <div
+    aria-label="aria-label"
+    class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--rowHoverHighlight testClass1 testClass2"
+    data-test-subj="test subject string"
+    role="grid"
+  >
+    <div
+      class="euiDataGrid__content"
+    >
       <div
-        class="euiDataGridHeaderCell"
-        data-test-subj="dataGridHeaderCell"
-        role="columnheader"
-        style="width:100px"
+        class="euiDataGridHeader"
+        data-test-subj="dataGridHeader"
       >
         <div
-          class="euiDataGridColumnResizer"
-          data-test-subj="dataGridColumnResizer"
-          style="margin-right:0px"
-        />
+          class="euiDataGridHeaderCell"
+          data-test-subj="dataGridHeaderCell-A"
+          role="columnheader"
+          style="width:undefinedpx"
+        >
+          <div
+            class="euiDataGridHeaderCell__content"
+          >
+            A
+          </div>
+        </div>
         <div
-          class="euiDataGridHeaderCell__content"
+          class="euiDataGridHeaderCell"
+          data-test-subj="dataGridHeaderCell-B"
+          role="columnheader"
+          style="width:undefinedpx"
         >
-          B
+          <div
+            class="euiDataGridHeaderCell__content"
+          >
+            B
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="euiDataGridRow"
-      data-test-subj="dataGridRow"
-      role="row"
-    >
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        role="gridcell"
-        style="width:100px"
-        tabindex="0"
-      >
-        0, A
-      </div>
       <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        role="gridcell"
-        style="width:100px"
-        tabindex="-1"
+        class="euiDataGridRow"
+        data-test-subj="dataGridRow"
+        role="row"
       >
-        0, B
+        <div
+          class="euiDataGridRowCell"
+          data-test-subj="dataGridRowCell"
+          role="gridcell"
+          style="width:undefinedpx"
+          tabindex="0"
+        >
+          0, A
+        </div>
+        <div
+          class="euiDataGridRowCell"
+          data-test-subj="dataGridRowCell"
+          role="gridcell"
+          style="width:undefinedpx"
+          tabindex="-1"
+        >
+          0, B
+        </div>
       </div>
-    </div>
-    <div
-      class="euiDataGridRow"
-      data-test-subj="dataGridRow"
-      role="row"
-    >
       <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        role="gridcell"
-        style="width:100px"
-        tabindex="-1"
+        class="euiDataGridRow"
+        data-test-subj="dataGridRow"
+        role="row"
       >
-        1, A
+        <div
+          class="euiDataGridRowCell"
+          data-test-subj="dataGridRowCell"
+          role="gridcell"
+          style="width:undefinedpx"
+          tabindex="-1"
+        >
+          1, A
+        </div>
+        <div
+          class="euiDataGridRowCell"
+          data-test-subj="dataGridRowCell"
+          role="gridcell"
+          style="width:undefinedpx"
+          tabindex="-1"
+        >
+          1, B
+        </div>
       </div>
       <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        role="gridcell"
-        style="width:100px"
-        tabindex="-1"
+        class="euiDataGridRow"
+        data-test-subj="dataGridRow"
+        role="row"
       >
-        1, B
+        <div
+          class="euiDataGridRowCell"
+          data-test-subj="dataGridRowCell"
+          role="gridcell"
+          style="width:undefinedpx"
+          tabindex="-1"
+        >
+          2, A
+        </div>
+        <div
+          class="euiDataGridRowCell"
+          data-test-subj="dataGridRowCell"
+          role="gridcell"
+          style="width:undefinedpx"
+          tabindex="-1"
+        >
+          2, B
+        </div>
       </div>
     </div>
     <div
-      class="euiDataGridRow"
-      data-test-subj="dataGridRow"
-      role="row"
-    >
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        role="gridcell"
-        style="width:100px"
-        tabindex="-1"
-      >
-        2, A
-      </div>
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        role="gridcell"
-        style="width:100px"
-        tabindex="-1"
-      >
-        2, B
-      </div>
-    </div>
-  </div>
-  <div
-    class="euiSpacer euiSpacer--s"
-  />
-</div>
+      class="euiSpacer euiSpacer--s"
+    />
+  </div>,
+]
 `;
diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
@@ -2,6 +2,18 @@
   @include euiScrollBar;
   font-feature-settings: 'tnum' 1; // Tabular numbers
   overflow-x: auto;
+  scroll-padding: 0;
   max-width: 100%;
   width: 100%;
+  background: $euiColorLightestShade;
+}
+
+.euiDataGrid__controls {
+  @include euiBottomShadowSmall;
+
+  position: relative;
+  z-index: 2;
+  border-top: $euiBorderThin;
+  border-right: $euiBorderThin;
+  border-left: $euiBorderThin;
 }
diff --git a/src/components/datagrid/_data_grid_column_resizer.scss b/src/components/datagrid/_data_grid_column_resizer.scss
@@ -28,6 +28,21 @@
       user-select: none;
     }
   }
+}
+
+// This is important. Because the resizer sits in the negative space to the right of the column
+// it can cause the full grid to be a few pixels longer than it actually is. So for the last one
+// we don't use negative positioning and the borders from the cell will match the container.
+@include euiDataGridHeaderCell {
+  &:last-child {
 
+    .euiDataGridColumnResizer {
+      right: 0;
 
+      &:after {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
 }
diff --git a/src/components/datagrid/_data_grid_column_selector.scss b/src/components/datagrid/_data_grid_column_selector.scss
@@ -0,0 +1,21 @@
+// sass-lint:disable-block no-empty-rulesets
+.euiDataGridColumnSelector {
+  // sass-lint:disable-block no-important
+  // background: $euiColorEmptyShade !important; // No need for droppable coloring
+}
+
+.euiDataGridColumnSelector__item {
+  background: $euiColorEmptyShade;
+  padding: $euiSizeXS;
+
+  &-isDragging {
+    @include euiBottomShadow;
+  }
+}
+
+// TODO: Find a better solution for how to deal with fix position draggables inside the transformed popover
+.euiDataGridColumnSelectorPopover {
+  // sass-lint:disable-block no-important
+  transform: none !important;
+  margin-top: -$euiSizeS;
+}
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
@@ -13,6 +13,7 @@
   overflow: hidden;
   white-space: nowrap;
   flex: 0 0 auto;
+  background: $euiColorEmptyShade;
 
   &:first-of-type {
     border-left: $euiBorderThin;

diff --git a/src/components/datagrid/_index.scss b/src/components/datagrid/_index.scss
@@ -4,3 +4,4 @@
 @import 'data_grid_header_row';
 @import 'data_grid_column_resizer';
 @import 'data_grid_data_row';
+@import 'data_grid_column_selector';