[Data Grid] Grid style options

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

@@ -1,6 +1,13 @@
-import React from 'react';
+import React, { Component } from 'react';
 
-import { EuiDataGrid } from '../../../../src/components/';
+import {
+  EuiDataGrid,
+  EuiButtonGroup,
+  EuiSpacer,
+  EuiFormRow,
+  EuiPopover,
+  EuiButton,
+} from '../../../../src/components/';
 
 const columns = [
   {
@@ -140,17 +147,242 @@ const data = [
   },
 ];
 
-export default () => {
-  return (
-    <div>
-      <EuiDataGrid
-        aria-label="Top EUI contributors"
-        columns={columns}
-        rowCount={data.length}
-        renderCellValue={({ rowIndex, columnName }) =>
-          data[rowIndex][columnName]
-        }
-      />
-    </div>
-  );
-};
+export default class extends Component {
+  constructor(props) {
+    super(props);
+    this.borderOptions = [
+      {
+        id: 'all',
+        label: 'All',
+      },
+      {
+        id: 'horizontal',
+        label: 'Horizontal only',
+      },
+      {
+        id: 'none',
+        label: 'None',
+      },
+    ];
+
+    this.fontSizeOptions = [
+      {
+        id: 's',
+        label: 'Small',
+      },
+      {
+        id: 'm',
+        label: 'Medium',
+      },
+      {
+        id: 'l',
+        label: 'Large',
+      },
+    ];
+
+    this.cellPaddingOptions = [
+      {
+        id: 's',
+        label: 'Small',
+      },
+      {
+        id: 'm',
+        label: 'Medium',
+      },
+      {
+        id: 'l',
+        label: 'Large',
+      },
+    ];
+
+    this.stripeOptions = [
+      {
+        id: 'true',
+        label: 'Stripes on',
+      },
+      {
+        id: 'false',
+        label: 'Stripes off',
+      },
+    ];
+
+    this.rowHoverOptions = [
+      {
+        id: 'none',
+        label: 'None',
+      },
+      {
+        id: 'highlight',
+        label: 'Highlight',
+      },
+    ];
+
+    this.headerOptions = [
+      {
+        id: 'shade',
+        label: 'Shade',
+      },
+      {
+        id: 'underline',
+        label: 'Underline',
+      },
+    ];
+
+    this.state = {
+      borderSelected: 'all',
+      fontSizeSelected: 'm',
+      cellPaddingSelected: 'm',
+      stripes: false,
+      stripesSelected: 'false',
+      rowHoverSelected: 'highlight',
+      isPopoverOpen: false,
+      headerSelected: 'shade',
+    };
+  }
+
+  onBorderChange = optionId => {
+    this.setState({
+      borderSelected: optionId,
+    });
+  };
+
+  onFontSizeChange = optionId => {
+    this.setState({
+      fontSizeSelected: optionId,
+    });
+  };
+
+  onCellPaddingChange = optionId => {
+    this.setState({
+      cellPaddingSelected: optionId,
+    });
+  };
+
+  onStripesChange = optionId => {
+    this.setState({
+      stripesSelected: optionId,
+      stripes: !this.state.stripes,
+    });
+  };
+
+  onRowHoverChange = optionId => {
+    this.setState({
+      rowHoverSelected: optionId,
+    });
+  };
+
+  onHeaderChange = optionId => {
+    this.setState({
+      headerSelected: optionId,
+    });
+  };
+
+  onPopoverButtonClick() {
+    this.setState({
+      isPopoverOpen: !this.state.isPopoverOpen,
+    });
+  }
+
+  closePopover() {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  }
+
+  render() {
+    const button = (
+      <EuiButton
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.onPopoverButtonClick.bind(this)}>
+        Table styling
+      </EuiButton>
+    );
+
+    return (
+      <div>
+        <EuiPopover
+          id="popover"
+          button={button}
+          isOpen={this.state.isPopoverOpen}
+          anchorPosition="rightUp"
+          closePopover={this.closePopover.bind(this)}>
+          <div>
+            <EuiFormRow label="Border">
+              <EuiButtonGroup
+                legend="Border"
+                options={this.borderOptions}
+                idSelected={this.state.borderSelected}
+                onChange={this.onBorderChange}
+              />
+            </EuiFormRow>
+
+            <EuiFormRow label="Cell padding">
+              <EuiButtonGroup
+                legend="Cell padding"
+                options={this.cellPaddingOptions}
+                idSelected={this.state.cellPaddingSelected}
+                onChange={this.onCellPaddingChange}
+              />
+            </EuiFormRow>
+
+            <EuiFormRow label="Font size">
+              <EuiButtonGroup
+                legend="Fornt size"
+                options={this.fontSizeOptions}
+                idSelected={this.state.fontSizeSelected}
+                onChange={this.onFontSizeChange}
+              />
+            </EuiFormRow>
+
+            <EuiFormRow label="Stripes">
+              <EuiButtonGroup
+                legend="Stripes"
+                options={this.stripeOptions}
+                idSelected={this.state.stripesSelected}
+                onChange={this.onStripesChange}
+              />
+            </EuiFormRow>
+
+            <EuiFormRow label="Hover row">
+              <EuiButtonGroup
+                legend="Hover row"
+                options={this.rowHoverOptions}
+                idSelected={this.state.rowHoverSelected}
+                onChange={this.onRowHoverChange}
+              />
+            </EuiFormRow>
+
+            <EuiFormRow label="Header">
+              <EuiButtonGroup
+                legend="Header"
+                options={this.headerOptions}
+                idSelected={this.state.headerSelected}
+                onChange={this.onHeaderChange}
+              />
+            </EuiFormRow>
+          </div>
+        </EuiPopover>
+
+        <EuiSpacer />
+
+        <EuiDataGrid
+          aria-label="Top EUI contributors"
+          columns={columns}
+          rowCount={data.length}
+          gridStyle={{
+            border: this.state.borderSelected,
+            fontSize: this.state.fontSizeSelected,
+            cellPadding: this.state.cellPaddingSelected,
+            stripes: this.state.stripes,
+            rowHover: this.state.rowHoverSelected,
+            header: this.state.headerSelected,
+          }}
+          renderCellValue={({ rowIndex, columnName }) =>
+            data[rowIndex][columnName]
+          }
+        />
+      </div>
+    );
+  }
+}

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

@@ -3,7 +3,7 @@
 exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 euiDataGrid"
+  class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--rowHoverHighlight testClass1 testClass2"
   data-test-subj="test subject string"
   role="grid"
 >

src/components/datagrid/_data_grid_column_resizer.scss

@@ -23,5 +23,11 @@
   &:hover,
   &:active {
     opacity: 1;
+
+    ~ .euiDataGridHeaderCell__content {
+      user-select: none;
+    }
   }
+
+
 }

src/components/datagrid/_data_grid_data_row.scss

@@ -1,13 +1,13 @@
 .euiDataGridRow {
   display: inline-flex;
-  min-width: 100%;
+  min-width: 100%; // Needed to prevent wraps. Inline flex is tricky
 }
 
-.euiDataGridRowCell {
-  @include euiFontSizeXS;
+@include euiDataGridRowCell {
+  @include euiFontSizeS;
   @include euiTextTruncate;
 
-  padding: $euiSizeM / 2;
+  padding: $euiDataGridCellPaddingM;
   border-right: $euiBorderThin;
   border-bottom: $euiBorderThin;
   overflow: hidden;
@@ -20,5 +20,66 @@
 
   &:focus {
     @include euiFocusRing;
+    z-index: 2; // Needed so it sits above potentional striping in the next row
   }
 }
+
+// Row highlights
+@include euiDataGridStyles(rowHoverHighlight) {
+  .euiDataGridRow:hover {
+    @include euiDataGridRowCell {
+      // sass-lint:disable-block no-important
+      // Needed to overtake striping
+      background-color: $euiColorHighlight !important;
+    }
+  }
+}
+
+// Stripes
+@include euiDataGridStyles(stripes) {
+  .euiDataGridRow:nth-child(odd) {
+    @include euiDataGridRowCell {
+      background: $euiColorLightestShade;
+    }
+  }
+}
+
+// Border alternates
+@include euiDataGridStyles(bordersNone) {
+  @include euiDataGridRowCell {
+    border: none;
+  }
+}
+
+@include euiDataGridStyles(bordersHorizontal) {
+  @include euiDataGridRowCell {
+    border-right: none;
+    border-left: none;
+  }
+}
+
+// Font alternates
+@include euiDataGridStyles(fontSizeSmall) {
+  @include euiDataGridRowCell {
+    @include euiFontSizeXS;
+  }
+}
+
+@include euiDataGridStyles(fontSizeLarge) {
+  @include euiDataGridRowCell {
+    @include euiFontSize;
+  }
+}
+
+// Padding alternates
+@include euiDataGridStyles(paddingSmall) {
+  @include euiDataGridRowCell {
+    padding: $euiDataGridCellPaddingS;
+  }
+}
+
+@include euiDataGridStyles(paddingLarge) {
+  @include euiDataGridRowCell {
+    padding: $euiDataGridCellPaddingL;
+  }
+}