[DataGrid] Improve warning and docs for layouting

docs/src/pages/components/data-grid/rendering/rendering.md

@@ -181,6 +181,11 @@ const columns: Columns = [
 
 By default, the grid has no intrinsic dimensions. It occupies the space its parent leaves.
 
+> ⚠️ When using % (**percentage**) for your height or width.<br> ><br>
+> You need to make sure the container you are putting the grid into also has an intrinsic dimension.
+> The browsers fit the element according to a percentage of the parent dimension.
+> If the parent has no dimensions, then the % will be zero.
+
 ### Flex layout
 
 It's recommended to use a flex container to render the grid. This allows a flexible layout, resizes well, and works on all devices.

packages/grid/_modules_/grid/GridComponent.tsx

@@ -128,6 +128,18 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
           ].join('\n'),
         );
       }
+      if (size.width === 0) {
+        gridLogger.warn(
+          [
+            'The parent of the grid has an empty width.',
+            'You need to make sure the container has an intrinsic width.',
+            'The grid displays with a width of 0px.',
+            '',
+            'You can find a solution in the docs:',
+            'https://material-ui.com/components/data-grid/rendering/#layout',
+          ].join('\n'),
+        );
+      }
 
       gridLogger.info('resized...', size);
       apiRef!.current.resize();

packages/grid/_modules_/grid/components/AutoSizer.tsx

@@ -18,12 +18,12 @@ export interface AutoSizerProps extends Omit<React.HTMLAttributes<HTMLDivElement
   children: (size: AutoSizerSize) => React.ReactNode;
   /**
    * Default height to use for initial render; useful for SSR.
-   * @default 0
+   * @default null
    */
   defaultHeight?: number;
   /**
    * Default width to use for initial render; useful for SSR.
-   * @default 0
+   * @default null
    */
   defaultWidth?: number;
   /**
@@ -55,8 +55,8 @@ export const AutoSizer = React.forwardRef<HTMLDivElement, AutoSizerProps>(functi
 ) {
   const {
     children,
-    defaultHeight = 0,
-    defaultWidth = 0,
+    defaultHeight = null,
+    defaultWidth = null,
     disableHeight = false,
     disableWidth = false,
     nonce,
@@ -65,7 +65,7 @@ export const AutoSizer = React.forwardRef<HTMLDivElement, AutoSizerProps>(functi
     ...other
   } = props;
 
-  const [state, setState] = React.useState({
+  const [state, setState] = React.useState<{ height: number | null; width: number | null }>({
     height: defaultHeight,
     width: defaultWidth,
   });
@@ -153,7 +153,7 @@ export const AutoSizer = React.forwardRef<HTMLDivElement, AutoSizerProps>(functi
       }}
       {...other}
     >
-      {state.height === 0 && state.width === 0 ? null : children(childParams)}
+      {state.height === null && state.width === null ? null : children(childParams)}
     </div>
   );
 });

packages/grid/data-grid/src/DataGrid.test.tsx

@@ -104,6 +104,19 @@ describe('<DataGrid />', () => {
           clock.tick(100);
         }).toWarnDev('Material-UI Data Grid: The parent of the grid has an empty height.');
       });
+
+      it('should warn if the container has no intrinsic width', () => {
+        expect(() => {
+          render(
+            <div style={{ width: 0 }}>
+              <div style={{ width: '100%', height: 300 }}>
+                <DataGrid {...defaultProps} />
+              </div>
+            </div>,
+          );
+          clock.tick(100);
+        }).toWarnDev('Material-UI Data Grid: The parent of the grid has an empty width.');
+      });
     });
   });