elastic · cee-chen · Dec 7, 2021 · Nov 10, 2021 · Nov 10, 2021 · Nov 17, 2021
@@ -1,5 +1,11 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
+- Updated the organization of `EuiDataGrid`'s toolbar/grid controls ([#5334](https://github.com/elastic/eui/pull/5334))
+- Updated `EuiDataGrid`'s full screen mode to use the `fullScreenExit` icon ([#5415](https://github.com/elastic/eui/pull/5415))
+- Added `left.append` and `left.prepend` to `EuiDataGrid`'s `toolbarVisibility.additionalControls` prop [#5394](https://github.com/elastic/eui/pull/5394))
+- Added a row height control to `EuiDataGrid`'s toolbar ([#5372](https://github.com/elastic/eui/pull/5372))
+- Added `onChange` callbacks to `EuiDataGrid`'s `gridStyle` and `rowHeightOptions` settings ([#5424](https://github.com/elastic/eui/pull/5424))
+- Added a reset button to `EuiDataGrid`'s display controls ([#5428](https://github.com/elastic/eui/pull/5428))
 - Added `timeRefresh` icon ([#5383](https://github.com/elastic/eui/pull/5383))
 - Added `responsive` and `iconOnly` props to `EuiSuperUpdateButton`  ([#5383](https://github.com/elastic/eui/pull/5383))
 - Added better auto refresh indicator to `EuiSuperDatePicker` ([#5383](https://github.com/elastic/eui/pull/5383))
@@ -14,13 +20,15 @@
 
 **Bug fixes**
 
+- Fixed persistent `EuiDataGrid` full screen `<body>` class ([#5354](https://github.com/elastic/eui/pull/5354))
 - Fixed dark mode background color of `EuiFormControlLayout` `prepend` and `append` ([#5383](https://github.com/elastic/eui/pull/5383))
 - Fixed background color of `EuiFormControlLayout` when `readOnly` ([#5383](https://github.com/elastic/eui/pull/5383))
 - Fixed the name of `data-test-subj` prop of `EuiFormControlLayout` ([#5383](https://github.com/elastic/eui/pull/5383))
 - Fixed global reset styles for plain `<button>`s ([#5452](https://github.com/elastic/eui/pull/5452))
 
 **Breaking changes**
 
+- Removed `toolbarVisibility`'s `showStyleSelector` prop of `EuiDataGrid` in favor of `showDisplaySelector`, which allows configuration of both grid density and row height ([#5372](https://github.com/elastic/eui/pull/5372))
 - Changed prop name `applyRefreshInterval` to `onRefreshChange` in `EuiRefreshInterval` ([#5383](https://github.com/elastic/eui/pull/5383))
 - Increased the size of `s`-sized `EuiLoadingSpinner`s to match `s`-sized `EuiIcon`s ([#5440](https://github.com/elastic/eui/pull/5440))
 

@@ -16,3 +16,10 @@
 import '@cypress/code-coverage/support';
 import './commands.js';
 require(THEME_IMPORT); // defined by DefinePlugin in the cypress webpack config
+
+// @see https://github.com/quasarframework/quasar/issues/2233#issuecomment-492975745
+Cypress.on('uncaught:exception', (err) => {
+  if (err.message.includes('> ResizeObserver loop limit exceeded')) {
+    return false;
+  }
+});
@@ -0,0 +1,209 @@
+import React, { useState, useCallback, Fragment } from 'react';
+
+// @ts-ignore Importing from JS
+import { fake } from 'faker';
+
+import {
+  EuiDataGrid,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiLink,
+  EuiToolTip,
+  useGeneratedHtmlId,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiText,
+  EuiTitle,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+} from '../../../../src';
+
+const columns = [
+  {
+    id: 'name',
+  },
+  {
+    id: 'email',
+  },
+  {
+    id: 'city',
+  },
+  {
+    id: 'country',
+  },
+  {
+    id: 'account',
+  },
+];
+
+const data: any[] = [];
+
+for (let i = 1; i < 20; i++) {
+  data.push({
+    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
+    email: fake('{{internet.email}}'),
+    city: (
+      <EuiLink href="http://google.com">{fake('{{address.city}}')}</EuiLink>
+    ),
+    country: fake('{{address.country}}'),
+    account: fake('{{finance.account}}'),
+  });
+}
+
+export default () => {
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const flyoutTitleId = useGeneratedHtmlId({
+    prefix: 'dataGridAdditionalControlsFlyout',
+  });
+
+  let flyout;
+  if (isFlyoutVisible) {
+    flyout = (
+      <EuiFlyout
+        onClose={() => setIsFlyoutVisible(false)}
+        aria-labelledby={flyoutTitleId}
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 id={flyoutTitleId}>Inspect</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>
+              This is not a real control, just an example of how to trigger a
+              flyout from a custom data grid control.
+            </p>
+          </EuiText>
+        </EuiFlyoutBody>
+      </EuiFlyout>
+    );
+  }
+
+  const [isPopoverOpen, setPopover] = useState(false);
+  const popoverId = useGeneratedHtmlId({
+    prefix: 'dataGridAdditionalControlsPopover',
+  });
+  const alertAndClosePopover = (position?: string) => {
+    setPopover(false);
+    window.alert(
+      `This is not a real control. It was passed into the \`${position}\` position.`
+    );
+  };
+
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  );
+
+  const setPageIndex = useCallback(
+    (pageIndex) => setPagination({ ...pagination, pageIndex }),
+    [pagination, setPagination]
+  );
+  const setPageSize = useCallback(
+    (pageSize) => setPagination({ ...pagination, pageSize, pageIndex: 0 }),
+    [pagination, setPagination]
+  );
+
+  return (
+    <>
+      <EuiDataGrid
+        aria-label="Data grid demo with additional controls"
+        columns={columns}
+        columnVisibility={{
+          visibleColumns: visibleColumns,
+          setVisibleColumns: setVisibleColumns,
+        }}
+        rowCount={data.length}
+        gridStyle={{
+          border: 'horizontal',
+          header: 'underline',
+        }}
+        renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+        pagination={{
+          ...pagination,
+          pageSizeOptions: [5, 10, 25],
+          onChangeItemsPerPage: setPageSize,
+          onChangePage: setPageIndex,
+        }}
+        toolbarVisibility={{
+          additionalControls: {
+            left: {
+              prepend: (
+                <EuiButtonEmpty
+                  size="xs"
+                  iconType="document"
+                  color="text"
+                  onClick={() => alertAndClosePopover('left.prepend')}
+                >
+                  {data.length} results
+                </EuiButtonEmpty>
+              ),
+              append: (
+                <EuiPopover
+                  id={popoverId}
+                  button={
+                    <EuiButtonEmpty
+                      size="xs"
+                      iconType="download"
+                      onClick={() => setPopover((open) => !open)}
+                    >
+                      Download
+                    </EuiButtonEmpty>
+                  }
+                  isOpen={isPopoverOpen}
+                  closePopover={() => setPopover(false)}
+                  panelPaddingSize="none"
+                >
+                  <EuiContextMenuPanel
+                    size="s"
+                    items={[
+                      <EuiContextMenuItem
+                        key="csv"
+                        onClick={() => alertAndClosePopover('left.append')}
+                      >
+                        CSV
+                      </EuiContextMenuItem>,
+                      <EuiContextMenuItem
+                        key="jsonedit"
+                        onClick={() => alertAndClosePopover('left.append')}
+                      >
+                        JSON
+                      </EuiContextMenuItem>,
+                    ]}
+                  />
+                </EuiPopover>
+              ),
+            },
+            right: (
+              <Fragment>
+                <EuiToolTip
+                  title="Updated 3 min ago"
+                  content="Click to refresh"
+                >
+                  <EuiButtonIcon
+                    aria-label="Refresh grid data"
+                    size="xs"
+                    iconType="refresh"
+                    onClick={() => alertAndClosePopover('right')}
+                  />
+                </EuiToolTip>
+                <EuiToolTip content="Inspect grid data">
+                  <EuiButtonIcon
+                    aria-label="Inspect grid data"
+                    size="xs"
+                    iconType="inspect"
+                    onClick={() => setIsFlyoutVisible(true)}
+                  />
+                </EuiToolTip>
+              </Fragment>
+            ),
+          },
+        }}
+      />
+      {flyout}
+    </>
+  );
+};