[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,16 +147,241 @@ const data = [
   },
 ];
 
-export default () => {
-  return (
-    <div>
-      <EuiDataGrid
-        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: 'horizontalOnly',
+        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.rowHighlightOptions = [
+      {
+        id: 'none',
+        label: 'None',
+      },
+      {
+        id: 'minimal',
+        label: 'Minimal',
+      },
+    ];
+
+    this.headerOptions = [
+      {
+        id: 'minimal',
+        label: 'Minimal',
+      },
+      {
+        id: 'underline',
+        label: 'Underline',
+      },
+    ];
+
+    this.state = {
+      borderSelected: 'all',
+      fontSizeSelected: 'm',
+      cellPaddingSelected: 'm',
+      stripes: false,
+      stripesSelected: 'false',
+      rowHighlightSelected: 'minimal',
+      isPopoverOpen: false,
+      headerSelected: 'minimal',
+    };
+  }
+
+  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,
+    });
+  };
+
+  onRowHighlightChange = optionId => {
+    this.setState({
+      rowHighlightSelected: 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="Row highlight">
+              <EuiButtonGroup
+                legend="Row highlight"
+                options={this.rowHighlightOptions}
+                idSelected={this.state.rowHighlightSelected}
+                onChange={this.onRowHighlightChange}
+              />
+            </EuiFormRow>
+
+            <EuiFormRow label="Header">
+              <EuiButtonGroup
+                legend="Header"
+                options={this.headerOptions}
+                idSelected={this.state.headerSelected}
+                onChange={this.onHeaderChange}
+              />
+            </EuiFormRow>
+          </div>
+        </EuiPopover>
+
+        <EuiSpacer />
+
+        <EuiDataGrid
+          columns={columns}
+          rowCount={data.length}
+          gridStyle={{
+            border: this.state.borderSelected,
+            fontSize: this.state.fontSizeSelected,
+            cellPadding: this.state.cellPaddingSelected,
+            stripes: this.state.stripes,
+            rowHighlight: this.state.rowHighlightSelected,
+            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--headerMinimal euiDataGrid--rowHighlightMinimal testClass1 testClass2"
   data-test-subj="test subject string"
 >
   <div

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

@@ -3,8 +3,8 @@
   min-width: 100%;
 }
 
-.euiDataGridRowCell {
-  @include euiFontSizeXS;
+@include euiDataGridRowCell {
+  @include euiFontSizeS;
   @include euiTextTruncate;
 
   padding: $euiSizeM / 2;
@@ -18,3 +18,63 @@
     border-left: $euiBorderThin;
   }
 }
+
+// Row highlights
+@include euiDataGridStyles(rowHighlightMinimal) {
+  .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(bordersHorizontalOnly) {
+  @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: $euiSizeXS;
+  }
+}
+
+@include euiDataGridStyles(paddingLarge) {
+  @include euiDataGridRowCell {
+    padding: $euiSizeS;
+  }
+}