[EuiDataGrid] Introduce renderCustomToolbar, additionalDisplaySettings and allowResetButton customization options

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

@@ -23,13 +23,15 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
+  EuiFormRow,
   EuiLink,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiPopover,
+  EuiRange,
   EuiScreenReaderOnly,
   EuiText,
   EuiTitle,
@@ -406,12 +408,31 @@ export default () => {
     console.log(eventData);
   });
 
+  const customDisplaySetting = (
+    <EuiFormRow label="Random Sample Size" display="columnCompressed">
+      <EuiRange
+        compressed
+        fullWidth
+        showInput
+        min={1}
+        max={100}
+        step={1}
+        value={10}
+        data-test-subj="randomSampleSize"
+      />
+    </EuiFormRow>
+  );
   return (
     <DataContext.Provider value={raw_data}>
       <EuiDataGrid
         aria-label="Data grid demo"
         columns={columns}
         columnVisibility={{ visibleColumns, setVisibleColumns }}
+        toolbarVisibility={{
+          showDisplaySelector: {
+            additionalDisplaySettings: customDisplaySetting,
+          },
+        }}
         trailingControlColumns={trailingControlColumns}
         rowCount={raw_data.length}
         renderCellValue={RenderCellValue}

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

@@ -52,6 +52,7 @@ const DataGridStyle = ({
   showFullScreenSelector,
   allowDensity,
   allowRowHeight,
+  allowResetButton,
   allowHideColumns,
   allowOrderingColumns,
 }) => {
@@ -98,13 +99,15 @@ const DataGridStyle = ({
   const toggleDisplaySelector = useMemo(() => {
     if (
       showDisplaySelector === true &&
-      (allowDensity === false || allowRowHeight === false)
+      (allowDensity === false ||
+        allowRowHeight === false ||
+        allowResetButton === false)
     ) {
-      return { allowDensity, allowRowHeight };
+      return { allowDensity, allowRowHeight, allowResetButton };
     } else {
       return showDisplaySelector;
     }
-  }, [showDisplaySelector, allowDensity, allowRowHeight]);
+  }, [showDisplaySelector, allowDensity, allowRowHeight, allowResetButton]);
 
   const toolbarVisibilityOptions = {
     showColumnSelector: toggleColumnSelector,

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

@@ -13,6 +13,8 @@ const gridSnippets = {
   showDisplaySelector: `showDisplaySelector: {
   allowDensity: false;
   allowRowHeight: false;
+  allowResetButton: false;
+  additionalDisplaySettings: <EuiButtonEmpty size="xs" />;
 }`,
   showSortSelector: 'showSortSelector: false',
   showFullScreenSelector: 'showFullScreenSelector: false',

src-docs/src/views/datagrid/toolbar/datagrid_custom_toolbar.tsx

@@ -0,0 +1,175 @@
+import React, { useCallback, useState } from 'react';
+import { faker } from '@faker-js/faker';
+
+import {
+  EuiDataGrid,
+  EuiDataGridColumnCellActionProps,
+  EuiDataGridPaginationProps,
+  EuiDataGridSorting,
+  EuiDataGridColumnSortingConfig,
+  EuiDataGridToolbarProps,
+  EuiFormRow,
+  EuiRange,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../../src';
+
+const raw_data: Array<{ [key: string]: string }> = [];
+
+for (let i = 1; i < 100; i++) {
+  raw_data.push({
+    name: `${faker.name.lastName()}, ${faker.name.firstName()}`,
+    email: faker.internet.email(),
+    location: `${faker.address.city()}, ${faker.address.country()}`,
+    date: `${faker.date.past()}`,
+    amount: faker.commerce.price(1, 1000, 2, '$'),
+  });
+}
+
+const columns = [
+  {
+    id: 'name',
+    displayAsText: 'Name',
+    cellActions: [
+      ({ Component }: EuiDataGridColumnCellActionProps) => (
+        <Component
+          onClick={() => alert('action')}
+          iconType="faceHappy"
+          aria-label="Some action"
+        >
+          Some action
+        </Component>
+      ),
+    ],
+  },
+  {
+    id: 'email',
+    displayAsText: 'Email address',
+    initialWidth: 130,
+  },
+  {
+    id: 'location',
+    displayAsText: 'Location',
+  },
+  {
+    id: 'date',
+    displayAsText: 'Date',
+  },
+  {
+    id: 'amount',
+    displayAsText: 'Amount',
+  },
+];
+
+export default () => {
+  // Column visibility
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  );
+
+  // Pagination
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
+  const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
+    (pageIndex) => {
+      setPagination((pagination) => ({ ...pagination, pageIndex }));
+    },
+    []
+  );
+  const onChangePageSize = useCallback<
+    EuiDataGridPaginationProps['onChangeItemsPerPage']
+  >((pageSize) => {
+    setPagination((pagination) => ({ ...pagination, pageSize }));
+  }, []);
+
+  // Sorting
+  const [sortingColumns, setSortingColumns] = useState<
+    EuiDataGridColumnSortingConfig[]
+  >([]);
+  const onSort = useCallback<EuiDataGridSorting['onSort']>((sortingColumns) => {
+    setSortingColumns(sortingColumns);
+  }, []);
+
+  const [exampleSettingValue, setExampleSettingValue] = useState<number>(10);
+
+  // Some additional custom settings to show in Display popover
+  const additionalDisplaySettings = (
+    <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>
+  );
+
+  // Custom toolbar renderer
+  const renderCustomToolbar: EuiDataGridToolbarProps['renderCustomToolbar'] = ({
+    hasRoomForGridControls,
+    columnControl,
+    columnSortingControl,
+    displayControl,
+    fullScreenControl,
+    keyboardShortcutsControl,
+  }) => {
+    return (
+      <EuiFlexGroup
+        responsive={false}
+        gutterSize="s"
+        justifyContent="spaceBetween"
+        alignItems="center"
+      >
+        <EuiFlexItem grow={false}>
+          {hasRoomForGridControls && `Custom left side`}
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+            <EuiFlexItem grow={false}>{columnControl}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{columnSortingControl}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{keyboardShortcutsControl}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{displayControl}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{fullScreenControl}</EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  return (
+    <>
+      <EuiDataGrid
+        aria-label="Data grid custom toolbar demo"
+        columns={columns}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        sorting={{ columns: sortingColumns, onSort }}
+        inMemory={{ level: 'sorting' }}
+        pagination={{
+          ...pagination,
+          onChangePage: onChangePage,
+          onChangeItemsPerPage: onChangePageSize,
+        }}
+        rowCount={raw_data.length}
+        renderCellValue={({ rowIndex, columnId }) =>
+          raw_data[rowIndex][columnId]
+        }
+        height={undefined}
+        gridStyle={{ border: 'none', header: 'underline' }}
+        renderCustomToolbar={renderCustomToolbar}
+        toolbarVisibility={{
+          showDisplaySelector: {
+            allowResetButton: false,
+            additionalDisplaySettings,
+          },
+        }}
+      />
+    </>
+  );
+};

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

@@ -9,6 +9,9 @@ const dataGridToolbarVisibilitySource = require('!!raw-loader!./_grid');
 import DataGridControls from './additional_controls';
 const dataGridControlsSource = require('!!raw-loader!./additional_controls');
 
+import DataGridCustomToolbar from './datagrid_custom_toolbar';
+const dataGridCustomToolbarSource = require('!!raw-loader!./datagrid_custom_toolbar');
+
 import ToolbarPropsTable from './_props';
 
 import {
@@ -17,6 +20,8 @@ import {
   EuiDataGridToolBarVisibilityColumnSelectorOptions,
   EuiDataGridToolBarVisibilityDisplaySelectorOptions,
   EuiDataGridToolBarAdditionalControlsLeftOptions,
+  EuiDataGridToolbarProps,
+  EuiDataGridCustomToolbarProps,
 } from '!!prop-loader!../../../../../src/components/datagrid/data_grid_types';
 
 /* eslint-disable local/css-logical-properties */
@@ -185,6 +190,45 @@ export const DataGridToolbarExample = {
       },
       demo: <DataGridControls />,
     },
+    {
+      title: 'Custom toolbar layout',
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: dataGridCustomToolbarSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            For advanced use cases, the <EuiCode>renderCustomToolbar</EuiCode>
+            prop for <EuiCode>EuiDataGrid</EuiCode> may be used to take complete
+            control over the whole toolbar element (by returning a react
+            element). This may be useful where a custom layout (e.g., all
+            buttons on the right side) is required. The default individual
+            controls will be available as function parameters.
+          </p>
+        </>
+      ),
+      demo: <DataGridCustomToolbar />,
+      props: {
+        EuiDataGridToolbarProps,
+        EuiDataGridCustomToolbarProps,
+      },
+      snippet: `<EuiDataGrid
+  aria-label="Data grid with a custom toolbar and additional content in the display settings popover "
+  columns={columns}
+  columnVisibility={{ visibleColumns, setVisibleColumns }}
+  rowCount={rowCount}
+  renderCustomToolbar={({ displayControl }) => <div>Custom toolbar content {displayControl}</div>}
+  toolbarVisibility={{
+    showDisplaySelector: {
+      allowResetButton: false,
+      additionalDisplaySettings: <div>Custom settings content</div>
+    }
+}}
+/>`,
+    },
     {
       title: 'Toolbar props',
       text: (

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

@@ -46,6 +46,7 @@ const DataGrid = () => {
   const [showDisplaySelector, setShowDisplaySelector] = useState(true);
   const [allowDensity, setAllowDensity] = useState(true);
   const [allowRowHeight, setAllowRowHeight] = useState(true);
+  const [allowResetButton, setAllowResetButton] = useState(true);
   const [showColumnSelector, setShowColumnSelector] = useState(true);
   const [allowHideColumns, setAllowHideColumns] = useState(true);
   const [allowOrderingColumns, setAllowOrderingColumns] = useState(true);
@@ -76,6 +77,9 @@ const DataGrid = () => {
   const onAllowRowHeightChange = (optionId) => {
     setAllowRowHeight(optionId === 'true');
   };
+  const onAllowResetButtonChange = (optionId) => {
+    setAllowResetButton(optionId === 'true');
+  };
 
   const onShowKeyboardShortcutsChange = (optionId) => {
     setShowKeyboardShortcuts(optionId === 'true');
@@ -234,6 +238,12 @@ const DataGrid = () => {
                       onChange: onAllowRowHeightChange,
                     })}
                   </li>
+                  <li>
+                    {createItem('Show reset button', {
+                      idSelected: allowResetButton.toString(),
+                      onChange: onAllowResetButtonChange,
+                    })}
+                  </li>
                 </ul>
               )}
 
@@ -266,6 +276,7 @@ const DataGrid = () => {
         showFullScreenSelector={showFullScreenSelector}
         allowDensity={allowDensity}
         allowRowHeight={allowRowHeight}
+        allowResetButton={allowResetButton}
         allowHideColumns={allowHideColumns}
         allowOrderingColumns={allowOrderingColumns}
       />

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

@@ -556,7 +556,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                     aria-hidden="true"
                     class="euiButtonIcon__icon"
                     color="inherit"
-                    data-euiicon-type="tableDensityNormal"
+                    data-euiicon-type="controlsHorizontal"
                   />
                 </button>
               </span>
@@ -1037,7 +1037,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                     aria-hidden="true"
                     class="euiButtonIcon__icon"
                     color="inherit"
-                    data-euiicon-type="tableDensityNormal"
+                    data-euiicon-type="controlsHorizontal"
                   />
                 </button>
               </span>
@@ -1841,7 +1841,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                     aria-hidden="true"
                     class="euiButtonIcon__icon"
                     color="inherit"
-                    data-euiicon-type="tableDensityNormal"
+                    data-euiicon-type="controlsHorizontal"
                   />
                 </button>
               </span>
@@ -2321,7 +2321,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                     aria-hidden="true"
                     class="euiButtonIcon__icon"
                     color="inherit"
-                    data-euiicon-type="tableDensityNormal"
+                    data-euiicon-type="controlsHorizontal"
                   />
                 </button>
               </span>