[Data Grid] - Styling built into data grid, full screen mode

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

@@ -229,7 +229,7 @@ export default class DataGrid extends Component {
  ];
 
  this.state = {
- borderSelected: 'all',
+ borderSelected: 'none',
  fontSizeSelected: 'm',
  cellPaddingSelected: 'm',
  stripes: false,

src-docs/src/views/icon/icons.js

@@ -164,6 +164,9 @@ const iconTypes = [
  'submodule',
  'symlink',
  'tableOfContents',
+ 'tableDensityComfortable',
+ 'tableDensityCompact',
+ 'tableDensityNormal',
  'tag',
  'tear',
  'temperature',

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

@@ -119,7 +119,9 @@ exports[`EuiDataGrid pagination renders 1`] = `
 `;
 
 exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
-Array [
+<div
+ class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--rowHoverHighlight testClass1 testClass2"
+>
  <div
  class="euiDataGrid__controls"
  >
@@ -131,7 +133,7 @@ Array [
  class="euiPopover__anchor"
  >
  <button
- class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
+ class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
  type="button"
  >
  <span
@@ -149,16 +151,70 @@ Array [
  <span
  class="euiButtonEmpty__text"
  >
- Columns
+ Fields
  </span>
  </span>
  </button>
  </div>
  </div>
- </div>,
+ <div
+ class="euiPopover euiPopover--anchorDownCenter"
+ data-test-subj="dataGridColumnSelectorPopover"
+ >
+ <div
+ class="euiPopover__anchor"
+ >
+ <button
+ class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+ type="button"
+ >
+ <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"
+ >
+ Density
+ </span>
+ </span>
+ </button>
+ </div>
+ </div>
+ <button
+ class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+ type="button"
+ >
+ <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"
+ >
+ Full screen
+ </span>
+ </span>
+ </button>
+ </div>
  <div
  aria-label="aria-label"
- class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--rowHoverHighlight testClass1 testClass2"
  data-test-subj="test subject string"
  role="grid"
  >
@@ -270,6 +326,6 @@ Array [
  <div
  class="euiSpacer euiSpacer--s"
  />
- </div>,
-]
+ </div>
+</div>
 `;

src/components/datagrid/_data_grid.scss

@@ -1,11 +1,22 @@
+.euiDataGrid--fullScreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: $euiZModal;
+ background: $euiColorEmptyShade;
+}
+
 .euiDataGrid__content {
  @include euiScrollBar;
+
  font-feature-settings: 'tnum' 1; // Tabular numbers
  overflow-x: auto;
  scroll-padding: 0;
  max-width: 100%;
  width: 100%;
- background: $euiColorLightestShade;
+ background: $euiPageBackgroundColor;
 }
 
 .euiDataGrid__controls {
@@ -16,4 +27,5 @@
  border-top: $euiBorderThin;
  border-right: $euiBorderThin;
  border-left: $euiBorderThin;
+ padding: $euiSizeXS;
 }

src/components/datagrid/column_selector.tsx

@@ -58,10 +58,11 @@ export const useColumnSelector = (
  button={
  <Fragment>
  <EuiButtonEmpty
- size="s"
- iconType="list"
+ size="xs"
+ iconType="kqlField"
+ color="text"
  onClick={() => setIsOpen(!isOpen)}>
- Columns
+ Fields
  </EuiButtonEmpty>
  </Fragment>
  }>

src/components/datagrid/data_grid.tsx

@@ -6,7 +6,6 @@ import React, {
  useState,
  useRef,
  useEffect,
- Fragment,
 } from 'react';
 import classNames from 'classnames';
 import { EuiDataGridHeaderRow } from './data_grid_header_row';
@@ -15,31 +14,24 @@ import {
  EuiDataGridColumn,
  EuiDataGridColumnWidths,
  EuiDataGridPaginationProps,
+ EuiDataGridStyle,
+ EuiDataGridStyleBorders,
+ EuiDataGridStyleCellPaddings,
+ EuiDataGridStyleFontSizes,
+ EuiDataGridStyleHeader,
+ EuiDataGridStyleRowHover,
 } from './data_grid_types';
 import { EuiDataGridCellProps } from './data_grid_cell';
 import { keyCodes } from '../../services';
 import { EuiSpacer } from '../spacer';
+// @ts-ignore-next-line
+import { EuiButtonEmpty } from '../button';
 import { EuiDataGridBody } from './data_grid_body';
 import { useColumnSelector } from './column_selector';
+import { useStyleSelector } from './style_selector';
 // @ts-ignore-next-line
 import { EuiTablePagination } from '../table/table_pagination';
 
-// Types for styling options, passed down through the `gridStyle` prop
-type EuiDataGridStyleFontSizes = 's' | 'm' | 'l';
-type EuiDataGridStyleBorders = 'all' | 'horizontal' | 'none';
-type EuiDataGridStyleHeader = 'shade' | 'underline';
-type EuiDataGridStyleRowHover = 'highlight' | 'none';
-type EuiDataGridStyleCellPaddings = 's' | 'm' | 'l';
-
-interface EuiDataGridStyle {
- fontSize?: EuiDataGridStyleFontSizes;
- border?: EuiDataGridStyleBorders;
- stripes?: boolean;
- header?: EuiDataGridStyleHeader;
- rowHover?: EuiDataGridStyleRowHover;
- cellPadding?: EuiDataGridStyleCellPaddings;
-}
-
 type CommonGridProps = CommonProps &
  HTMLAttributes<HTMLDivElement> & {
  columns: EuiDataGridColumn[];
@@ -153,6 +145,8 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
  }
  }, []);
 
+ const [isFullScreen, setIsFullScreen] = useState(false);
+
  const [focusedCell, setFocusedCell] = useState<[number, number]>(ORIGIN);
  const onCellFocus = useCallback(
  (x: number, y: number) => {
@@ -200,37 +194,42 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
  rowCount,
  renderCellValue,
  className,
- gridStyle = {},
+ gridStyle,
  pagination,
  ...rest
  } = props;
 
- const fontSize = gridStyle.fontSize || 'm';
- const border = gridStyle.border || 'all';
- const header = gridStyle.header || 'shade';
- const rowHover = gridStyle.rowHover || 'highlight';
- const stripes = gridStyle.stripes ? true : false;
- const cellPadding = gridStyle.cellPadding || 'm';
+ const [ColumnSelector, visibleColumns] = useColumnSelector(columns);
+ const [StyleSelector, gridStyles] = useStyleSelector(gridStyle);
 
  const classes = classNames(
  'euiDataGrid',
- fontSizesToClassMap[fontSize],
- bordersToClassMap[border],
- headerToClassMap[header],
- rowHoverToClassMap[rowHover],
- cellPaddingsToClassMap[cellPadding],
+ fontSizesToClassMap[gridStyles.fontSize || 'm'],
+ bordersToClassMap[gridStyles.border || 'all'],
+ headerToClassMap[gridStyles.header || 'shade'],
+ rowHoverToClassMap[gridStyles.rowHover || 'highlight'],
+ cellPaddingsToClassMap[gridStyles.cellPadding || 'm'],
+ {
+ 'euiDataGrid--stripes': gridStyles.stripes || false,
+ },
  {
- 'euiDataGrid--stripes': stripes,
+ 'euiDataGrid--fullScreen': isFullScreen,
  },
  className
  );
 
- const [ColumnSelector, visibleColumns] = useColumnSelector(columns);
-
  return (
- <Fragment>
+ <div className={classes}>
  <div className="euiDataGrid__controls">
  <ColumnSelector />
+ <StyleSelector />
+ <EuiButtonEmpty
+ size="xs"
+ iconType="fullScreen"
+ color="text"
+ onClick={() => setIsFullScreen(!isFullScreen)}>
+ Full screen
+ </EuiButtonEmpty>
  </div>
  {/* Unsure why this element causes errors as focus follows spec */}
  {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
@@ -239,8 +238,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
  onKeyDown={handleKeyDown}
  ref={gridRef}
  // {...label}
- {...rest}
- className={classes}>
+ {...rest}>
  <div className="euiDataGrid__content">
  <EuiDataGridHeaderRow
  columns={visibleColumns}
@@ -260,6 +258,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
  <EuiSpacer size="s" />
  {renderPagination(props)}
  </div>
- </Fragment>
+ </div>
  );
 };

src/components/datagrid/data_grid_types.ts

@@ -16,3 +16,18 @@ export interface EuiDataGridPaginationProps {
  onChangeItemsPerPage: (itemsPerPage: number) => void;
  onChangePage: (pageIndex: number) => void;
 }
+// Types for styling options, passed down through the `gridStyle` prop
+export type EuiDataGridStyleFontSizes = 's' | 'm' | 'l';
+export type EuiDataGridStyleBorders = 'all' | 'horizontal' | 'none';
+export type EuiDataGridStyleHeader = 'shade' | 'underline';
+export type EuiDataGridStyleRowHover = 'highlight' | 'none';
+export type EuiDataGridStyleCellPaddings = 's' | 'm' | 'l';
+
+export interface EuiDataGridStyle {
+ fontSize: EuiDataGridStyleFontSizes;
+ border: EuiDataGridStyleBorders;
+ stripes: boolean;
+ header: EuiDataGridStyleHeader;
+ rowHover: EuiDataGridStyleRowHover;
+ cellPadding: EuiDataGridStyleCellPaddings;
+}