elastic · cee-chen · Nov 10, 2021 · Oct 27, 2021 · Oct 27, 2021 · Oct 27, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,12 @@
 ## [`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))
+
 **Bug fixes**
 
 - Fixed an `EuiDataGrid` race condition where grid rows had incorrect heights if loaded in before CSS ([#5284](https://github.com/elastic/eui/pull/5284))
 - Fixed an accessibility issue where `EuiDataGrid` cells weren't owned by `role=row` elements ([#5285](https://github.com/elastic/eui/pull/5285))
+- Fixed persistent `EuiDataGrid` full screen `<body>` class ([#5354](https://github.com/elastic/eui/pull/5354))
 
 ## [`41.0.0`](https://github.com/elastic/eui/tree/v41.0.0)
 

diff --git a/src-docs/src/views/datagrid/additional_controls.js b/src-docs/src/views/datagrid/additional_controls.js
diff --git a/src-docs/src/views/datagrid/additional_controls.tsx b/src-docs/src/views/datagrid/additional_controls.tsx
@@ -0,0 +1,197 @@
+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 = () => {
+    setPopover(false);
+    window.alert('This is not a real control.');
+  };
+
+  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: (
+              <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}
+                    >
+                      CSV
+                    </EuiContextMenuItem>,
+                    <EuiContextMenuItem
+                      key="jsonedit"
+                      onClick={alertAndClosePopover}
+                    >
+                      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={() => {
+                      window.alert('This is not a real control.');
+                    }}
+                  />
+                </EuiToolTip>
+                <EuiToolTip content="Inspect grid data">
+                  <EuiButtonIcon
+                    aria-label="Inspect grid data"
+                    size="xs"
+                    iconType="inspect"
+                    onClick={() => setIsFlyoutVisible(true)}
+                  />
+                </EuiToolTip>
+              </Fragment>
+            ),
+          },
+        }}
+      />
+      {flyout}
+    </>
+  );
+};