adding api for additional display controls on the datagrid

elastic · Sep 1, 2023 · e14fb4c · e14fb4c
1 parent b6ecfe0
commit e14fb4c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/src-docs/src/views/datagrid/basics/datagrid.js b/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}

diff --git 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
@@ -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 {