[EuiDataGrid] Display selector / toolbar control enhancements

packages/eui/changelogs/upcoming/8080.md

@@ -0,0 +1,3 @@
+- `EuiDataGrid` now supports a new `toolbarVisibility.showDisplaySelector.customRender` function that allows completely customizing the rendering of the display selector popover
+- `EuiDataGrid`'s row height/lines per row setting has been streamlined in both UI and UX
+- `EuiDataGrid` now accepts consumer-passed display setting updates even after users have changed their display preferences via UI

packages/eui/src-docs/src/views/datagrid/toolbar/_props.tsx

@@ -7,14 +7,17 @@ import { DataGridPropsTable } from '../_props_table';
 /* eslint-disable local/css-logical-properties */
 const gridSnippets = {
   showColumnSelector: `showColumnSelector: {
-  allowHide: false;
-  allowReorder: false;
+  allowHide: false,
+  allowReorder: false,
 }`,
   showDisplaySelector: `showDisplaySelector: {
-  allowDensity: false;
-  allowRowHeight: false;
-  allowResetButton: false;
-  additionalDisplaySettings: <EuiButtonEmpty size="xs" />;
+  allowDensity: false,
+  allowRowHeight: false,
+  allowResetButton: false,
+  additionalDisplaySettings: <EuiButtonEmpty size="xs" />,
+  customRender: ({ densityControl, rowHeightControl, resetButton, additionalDisplaySettings }) => (
+    <>Completely custom display settings</>
+  ),
 }`,
   showSortSelector: 'showSortSelector: false',
   showFullScreenSelector: 'showFullScreenSelector: false',

packages/eui/src-docs/src/views/datagrid/toolbar/additional_controls.tsx

@@ -17,6 +17,8 @@ import {
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiPopover,
+  EuiFormRow,
+  EuiRange,
   EuiDataGridPaginationProps,
   RenderCellValue,
 } from '../../../../../src';
@@ -54,6 +56,29 @@ for (let i = 1; i < 20; i++) {
 const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
   data[rowIndex][columnId];
 
+// Some additional custom settings to show in the Display popover
+const AdditionalDisplaySettings = () => {
+  const [exampleSettingValue, setExampleSettingValue] = useState<number>(10);
+
+  return (
+    <EuiFormRow label="Example additional setting" display="columnCompressed">
+      <EuiRange
+        compressed
+        fullWidth
+        showInput
+        min={1}
+        max={100}
+        step={1}
+        value={exampleSettingValue}
+        data-test-subj="exampleAdditionalSetting"
+        onChange={(event) => {
+          setExampleSettingValue(Number(event.currentTarget.value));
+        }}
+      />
+    </EuiFormRow>
+  );
+};
+
 export default () => {
   const [pagination, setPagination] = useState({ pageIndex: 0 });
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
@@ -209,6 +234,10 @@ export default () => {
               </Fragment>
             ),
           },
+          showDisplaySelector: {
+            allowResetButton: false,
+            additionalDisplaySettings: <AdditionalDisplaySettings />,
+          },
         }}
       />
       {flyout}

packages/eui/src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js

@@ -34,60 +34,64 @@ const controlsSnippet = `<EuiDataGrid
   columnVisibility={{ visibleColumns, setVisibleColumns }}
   rowCount={rowCount}
   toolbarVisibility={{
-  // Use of a fragment for multiple items will insure proper margins
-  additionalControls: {
-    left: {
-      prepend: (
-        <>
-          <EuiButtonEmpty
-            size="xs"
-            onClick={() => {}}>
-            New button
-          </EuiButtonEmpty>
-          <EuiButtonEmpty
-            size="xs"
-            onClick={() => {}}>
-            Another button
-          </EuiButtonEmpty>
-        </>
-      ),
-      append: (
+    // Use of a fragment for multiple items will insure proper margins
+    additionalControls: {
+      left: {
+        prepend: (
+          <>
+            <EuiButtonEmpty
+              size="xs"
+              onClick={() => {}}>
+              New button
+            </EuiButtonEmpty>
+            <EuiButtonEmpty
+              size="xs"
+              onClick={() => {}}>
+              Another button
+            </EuiButtonEmpty>
+          </>
+        ),
+        append: (
+          <>
+            <EuiButtonEmpty
+              size="xs"
+              onClick={() => {}}>
+              New button
+            </EuiButtonEmpty>
+            <EuiButtonEmpty
+              size="xs"
+              onClick={() => {}}>
+              Another button
+            </EuiButtonEmpty>
+          </>
+        ),
+      },
+      right: (
         <>
-          <EuiButtonEmpty
-            size="xs"
-            onClick={() => {}}>
-            New button
-          </EuiButtonEmpty>
-          <EuiButtonEmpty
-            size="xs"
-            onClick={() => {}}>
-            Another button
-          </EuiButtonEmpty>
+          <EuiToolTip content="Right-side button">
+            <EuiButtonIcon
+              aria-label="Right-side button"
+              size="xs"
+              iconType="refresh"
+              onClick={() => {}}
+            />
+          </EuiToolTip>
+          <EuiToolTip content="Another right-side button">
+            <EuiButtonIcon
+              aria-label="Another right-side button"
+              size="xs"
+              iconType="inspect"
+              onClick={() => {}}
+            />
+          </EuiToolTip>
         </>
       ),
     },
-    right: (
-      <>
-        <EuiToolTip content="Right-side button">
-          <EuiButtonIcon
-            aria-label="Right-side button"
-            size="xs"
-            iconType="refresh"
-            onClick={() => {}}
-          />
-        </EuiToolTip>
-        <EuiToolTip content="Another right-side button">
-          <EuiButtonIcon
-            aria-label="Another right-side button"
-            size="xs"
-            iconType="inspect"
-            onClick={() => {}}
-          />
-        </EuiToolTip>
-      </>
-    )
-  }
-}}
+    // Additional controls can also be passed to the display settings popover
+    showDisplaySelector: {
+      additionalDisplaySettings: <div>Custom settings content</div>,
+    },
+  }}
 />
 `;
 
@@ -246,8 +250,7 @@ export const DataGridToolbarExample = {
   renderCustomToolbar={({ displayControl }) => <div>Custom toolbar content {displayControl}</div>}
   toolbarVisibility={{
     showDisplaySelector: {
-      allowResetButton: false,
-      additionalDisplaySettings: <div>Custom settings content</div>
+      customRender: ({ densityControl }) => <div>Custom display selector {densityControl}</div>
     }
   }}
 />`,

packages/eui/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { css } from '@emotion/react';
 import { faker } from '@faker-js/faker';
 
@@ -8,12 +8,18 @@ import {
   EuiDataGridColumnSortingConfig,
   EuiDataGridToolbarProps,
   EuiDataGridToolbarControl,
+  EuiDataGridStyle,
+  EuiDataGridStyleBorders,
+  EuiDataGridDisplaySelectorCustomRender,
+  EuiSpacer,
+  EuiHorizontalRule,
   EuiFormRow,
-  EuiRange,
+  EuiButtonGroup,
   EuiFlexGroup,
   EuiFlexItem,
   euiScreenReaderOnly,
   RenderCellValue,
+  EuiSwitch,
 } from '../../../../../src';
 
 const raw_data: Array<{ [key: string]: string }> = [];
@@ -57,6 +63,7 @@ const renderCustomToolbar: EuiDataGridToolbarProps['renderCustomToolbar'] = ({
       justifyContent="spaceBetween"
       alignItems="center"
       css={mobileStyles}
+      className="euiDataGrid__controls"
     >
       <EuiFlexItem grow={false}>
         {hasRoomForGridControls && (
@@ -86,29 +93,6 @@ const renderCustomToolbar: EuiDataGridToolbarProps['renderCustomToolbar'] = ({
 const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
   raw_data[rowIndex][columnId];
 
-// Some additional custom settings to show in the Display popover
-const AdditionalDisplaySettings = () => {
-  const [exampleSettingValue, setExampleSettingValue] = useState<number>(10);
-
-  return (
-    <EuiFormRow label="Example additional setting" display="columnCompressed">
-      <EuiRange
-        compressed
-        fullWidth
-        showInput
-        min={1}
-        max={100}
-        step={1}
-        value={exampleSettingValue}
-        data-test-subj="exampleAdditionalSetting"
-        onChange={(event) => {
-          setExampleSettingValue(Number(event.currentTarget.value));
-        }}
-      />
-    </EuiFormRow>
-  );
-};
-
 export default () => {
   // Column visibility
   const [visibleColumns, setVisibleColumns] = useState(() =>
@@ -123,6 +107,51 @@ export default () => {
     setSortingColumns(sortingColumns);
   }, []);
 
+  // Custom display settings
+  const [borders, setGridBorders] = useState<EuiDataGridStyleBorders>('none');
+  const [rowStripes, setRowStripes] = useState(false);
+  const gridStyle: EuiDataGridStyle = useMemo(
+    () => ({
+      border: borders,
+      header: borders === 'none' ? 'underline' : 'shade',
+      stripes: rowStripes,
+    }),
+    [borders, rowStripes]
+  );
+  const customDisplayControls: EuiDataGridDisplaySelectorCustomRender =
+    useCallback(
+      ({ densityControl, rowHeightControl }) => {
+        return (
+          <>
+            <EuiSpacer size="xs" />
+            <EuiSwitch
+              label="Show row stripes"
+              checked={rowStripes}
+              onChange={() => setRowStripes(!rowStripes)}
+            />
+            <EuiHorizontalRule margin="s" />
+            {densityControl}
+            <EuiFormRow label="Border" display="columnCompressed">
+              <EuiButtonGroup
+                isFullWidth
+                buttonSize="compressed"
+                legend="Border"
+                options={[
+                  { id: 'all', label: 'All' },
+                  { id: 'horizontal', label: 'Horizontal only' },
+                  { id: 'none', label: 'None' },
+                ]}
+                idSelected={borders}
+                onChange={(id) => setGridBorders(id as EuiDataGridStyleBorders)}
+              />
+            </EuiFormRow>
+            {rowHeightControl}
+          </>
+        );
+      },
+      [borders, rowStripes]
+    );
+
   return (
     <EuiDataGrid
       aria-label="Data grid custom toolbar demo"
@@ -131,12 +160,12 @@ export default () => {
       sorting={{ columns: sortingColumns, onSort }}
       rowCount={raw_data.length}
       renderCellValue={renderCellValue}
-      gridStyle={{ border: 'none', header: 'underline' }}
+      gridStyle={gridStyle}
       renderCustomToolbar={renderCustomToolbar}
       toolbarVisibility={{
         showDisplaySelector: {
           allowResetButton: false,
-          additionalDisplaySettings: <AdditionalDisplaySettings />,
+          customRender: customDisplayControls,
         },
       }}
     />

packages/eui/src/components/datagrid/body/data_grid_body_custom.spec.tsx

@@ -203,7 +203,7 @@ describe('EuiDataGridBodyCustomRender', () => {
     cy.get('[role="gridcell"]').first().invoke('outerHeight').should('eq', 36);
 
     cy.get('[data-test-subj="dataGridDisplaySelectorButton"]').click();
-    cy.contains('Auto fit').click();
+    cy.contains('Auto').click();
 
     cy.get('[role="gridcell"]')
       .first()