From e14fb4cd4e60b45b538dce2d52e9d07a831a1a9f Mon Sep 17 00:00:00 2001
From: Tim Schnell <timductive@gmail.com>
Date: Wed, 30 Aug 2023 13:51:02 -0500
Subject: [PATCH] adding api for additional display controls on the datagrid

---
 .../src/views/datagrid/basics/datagrid.js     | 21 +++++++++++++++++++
 .../datagrid/controls/display_selector.tsx    |  7 +++++++
 src/components/datagrid/data_grid_types.ts    |  4 ++++
 3 files changed, 32 insertions(+)

diff --git a/src-docs/src/views/datagrid/basics/datagrid.js b/src-docs/src/views/datagrid/basics/datagrid.js
index a8898bb14b7..3efb5211d04 100644
--- a/src-docs/src/views/datagrid/basics/datagrid.js
+++ b/src-docs/src/views/datagrid/basics/datagrid.js
@@ -23,6 +23,7 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
+  EuiFormRow,
   EuiLink,
   EuiModal,
   EuiModalBody,
@@ -30,6 +31,7 @@ import {
   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}
diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
index b89276b6e53..2eab2cc5aab 100644
--- a/src/components/datagrid/controls/display_selector.tsx
+++ b/src/components/datagrid/controls/display_selector.tsx
@@ -108,6 +108,11 @@ export const useDataGridDisplaySelector = (
     'allowRowHeight'
   );
 
+  const additionalDisplaySettings =
+    typeof showDisplaySelector === 'boolean'
+      ? null
+      : showDisplaySelector?.additionalDisplaySettings ?? null;
+
   // Track styles specified by the user at run time
   const [userGridStyles, setUserGridStyles] = useState({});
   const [userRowHeightsOptions, setUserRowHeightsOptions] = useState({});
@@ -354,6 +359,8 @@ export const useDataGridDisplaySelector = (
             )}
           </EuiI18n>
         )}
+        {additionalDisplaySettings}
+
         {showResetButton && (
           <EuiPopoverFooter>
             <EuiFlexGroup justifyContent="flexEnd" responsive={false}>
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 7bdf0d5ba8b..3b3cc5a1371 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -846,6 +846,10 @@ export interface EuiDataGridToolBarVisibilityDisplaySelectorOptions {
    * When `false`, removes the ability to change row height display through the UI
    */
   allowRowHeight?: boolean;
+  /**
+   * If passed an object it will append the additional option to the bottom of the display settings
+   */
+  additionalDisplaySettings?: ReactNode;
 }
 
 export interface EuiDataGridToolBarVisibilityOptions {