Add minSizeForControls to euiDataGrid

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `minSizeForControls` to `euiDataGrid` as prop to control the min size for grid controls ([#3527](https://github.com/elastic/eui/pull/3527))
 - Passed `getSelectedOptionForSearchValue` to `EuiComboBoxOptionsList` as prop ([#3501](https://github.com/elastic/eui/pull/3501))
 - Added `appendIconComponentCache` function to allow manual pre-emptive loading of source elements into the `EuiIcon` cache ([#3481](https://github.com/elastic/eui/pull/3481))
 - Added `initialSelected` to `EuiTableSelectionType` properties to set initial selected checkboxes for `EuiBasicTable` ([#3418](https://github.com/elastic/eui/pull/3418))

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

@@ -183,7 +183,9 @@ export const DataGridStylingExample = {
       text: (
         <p>
           When wrapped inside a container, like a dashboard panel, the grid will
-          start hiding controls and adopt a more strict flex layout
+          start hiding controls and adopt a more strict flex layout.
+          Use the `minSizeForControls` prop to control the min width to
+          enables/disables grid controls based on available width.
         </p>
       ),
       components: { DataGridContainer },

src/components/datagrid/data_grid.tsx

@@ -140,6 +140,11 @@ type CommonGridProps = CommonProps &
      * A callback for when a column's size changes. Callback receives `{ columnId: string, width: number }`.
      */
     onColumnResize?: EuiDataGridOnColumnResizeHandler;
+    /**
+     * Defines a control for the min size when the grid only shows the full screen button.
+     * Default to `MINIMUM_WIDTH_FOR_GRID_CONTROLS`.
+     */
+    minSizeForControls?: number;
   };
 
 // This structure forces either aria-label or aria-labelledby to be defined
@@ -326,12 +331,13 @@ function useColumnWidths(
 
 function useOnResize(
   setHasRoomForGridControls: (hasRoomForGridControls: boolean) => void,
-  isFullScreen: boolean
+  isFullScreen: boolean,
+  minSizeForControls: number
 ) {
   return useCallback(
     ({ width }: { width: number }) => {
       setHasRoomForGridControls(
-        width > MINIMUM_WIDTH_FOR_GRID_CONTROLS || isFullScreen
+        width > minSizeForControls || isFullScreen
       );
     },
     [setHasRoomForGridControls, isFullScreen]
@@ -593,11 +599,14 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
   );
 
   // enables/disables grid controls based on available width
+  const minSizeForControls = typeof props.minSizeForControls === 'undefined' ?
+    MINIMUM_WIDTH_FOR_GRID_CONTROLS :
+    props.minSizeForControls;
   const onResize = useOnResize(nextHasRoomForGridControls => {
     if (nextHasRoomForGridControls !== hasRoomForGridControls) {
       setHasRoomForGridControls(nextHasRoomForGridControls);
     }
-  }, isFullScreen);
+  }, isFullScreen, minSizeForControls);
 
   const handleGridKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     switch (e.keyCode) {