diff --git a/src/components/datagrid/body/data_grid_body.test.tsx b/src/components/datagrid/body/data_grid_body.test.tsx index 80ae06ffbc7..6c4ec29ffc2 100644 --- a/src/components/datagrid/body/data_grid_body.test.tsx +++ b/src/components/datagrid/body/data_grid_body.test.tsx @@ -42,6 +42,7 @@ describe('EuiDataGridBody', () => { schemaDetectors, popoverContents: providedPopoverContents, rowHeightUtils: mockRowHeightUtils, + isFullScreen: false, gridStyles: {}, gridWidth: 300, gridRef: { diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx index 1f1193267d2..5585073c02b 100644 --- a/src/components/datagrid/body/data_grid_body.tsx +++ b/src/components/datagrid/body/data_grid_body.tsx @@ -239,6 +239,7 @@ export const EuiDataGridBody: FunctionComponent = ( onColumnResize, rowHeightsOptions, virtualizationOptions, + isFullScreen, gridStyles, gridWidth, gridRef, @@ -424,6 +425,7 @@ export const EuiDataGridBody: FunctionComponent = ( unconstrainedWidth: 0, // unable to determine this until the container's size is known wrapperDimensions, wrapperRef, + isFullScreen, rowCount, }); diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index caec0d8e4ed..1b228c94281 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -441,6 +441,7 @@ export const EuiDataGrid: FunctionComponent = (props) => { interactiveCellId={interactiveCellId} rowHeightsOptions={rowHeightsOptions} virtualizationOptions={virtualizationOptions || {}} + isFullScreen={isFullScreen} gridStyles={gridStyles} gridWidth={gridWidth} gridRef={gridRef} diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index a0a64a049a9..60dc8acf6df 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -345,6 +345,7 @@ export interface EuiDataGridBodyProps { onColumnResize?: EuiDataGridOnColumnResizeHandler; virtualizationOptions?: Partial; rowHeightsOptions?: EuiDataGridRowHeightsOptions; + isFullScreen: boolean; gridStyles: EuiDataGridStyle; gridWidth: number; gridRef: MutableRefObject; diff --git a/src/components/datagrid/utils/grid_height_width.ts b/src/components/datagrid/utils/grid_height_width.ts index 22946b6d136..24aad7108bf 100644 --- a/src/components/datagrid/utils/grid_height_width.ts +++ b/src/components/datagrid/utils/grid_height_width.ts @@ -19,24 +19,32 @@ export const useFinalGridDimensions = ({ unconstrainedWidth, wrapperDimensions, wrapperRef, + isFullScreen, rowCount, }: { unconstrainedHeight: number; unconstrainedWidth: number; wrapperDimensions: { width: number; height: number }; wrapperRef: MutableRefObject; + isFullScreen: boolean; rowCount: number; }) => { // Used if the grid needs to scroll const [height, setHeight] = useState(undefined); const [width, setWidth] = useState(undefined); + // Tracking full screen height separately is necessary to correctly restore the grid back to non-full-screen height + const [fullScreenHeight, setFullScreenHeight] = useState(0); // Set the wrapper height on load, whenever the grid wrapper resizes, and whenever rowCount changes useEffect(() => { const boundingRect = wrapperRef.current!.getBoundingClientRect(); - if (boundingRect.height !== unconstrainedHeight) { - setHeight(boundingRect.height); + if (isFullScreen) { + setFullScreenHeight(boundingRect.height); + } else { + if (boundingRect.height !== unconstrainedHeight) { + setHeight(boundingRect.height); + } } if (boundingRect.width !== unconstrainedWidth) { setWidth(boundingRect.width); @@ -44,6 +52,7 @@ export const useFinalGridDimensions = ({ }, [ // Effects that should cause recalculations rowCount, + isFullScreen, wrapperDimensions, // Dependencies wrapperRef, @@ -51,14 +60,17 @@ export const useFinalGridDimensions = ({ unconstrainedWidth, ]); - const finalHeight = IS_JEST_ENVIRONMENT - ? Number.MAX_SAFE_INTEGER + const finalHeight = isFullScreen + ? fullScreenHeight : height || unconstrainedHeight; - const finalWidth = IS_JEST_ENVIRONMENT - ? Number.MAX_SAFE_INTEGER - : width || unconstrainedWidth; + const finalWidth = width || unconstrainedWidth; - return { finalHeight, finalWidth }; + return IS_JEST_ENVIRONMENT + ? { + finalHeight: Number.MAX_SAFE_INTEGER, + finalWidth: Number.MAX_SAFE_INTEGER, + } + : { finalHeight, finalWidth }; }; /**