From b2392dd41a0e27712e5313f3f386c9d80d284662 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Wed, 21 Oct 2020 16:57:46 +0200
Subject: [PATCH 01/22] [DataGrid] Add fluid columns width support

---
 .../data-grid/columns/ColumnFluidWidthGrid.js | 34 ++++++++++++
 .../columns/ColumnFluidWidthGrid.tsx          | 34 ++++++++++++
 .../components/data-grid/columns/columns.md   | 20 +++++++
 .../grid/_modules_/grid/GridComponent.tsx     |  7 ++-
 .../_modules_/grid/hooks/root/useColumns.ts   | 54 +++++++++++++++++--
 .../_modules_/grid/models/colDef/colDef.ts    |  4 ++
 6 files changed, 149 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.js
 create mode 100644 docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.tsx

diff --git a/docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.js b/docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.js
new file mode 100644
index 000000000000..727d20e150b7
--- /dev/null
+++ b/docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+
+const rows = [
+  {
+    id: 1,
+    username: 'defunkt',
+    age: 38,
+  },
+];
+
+export default function ColumnFluidWidthGrid() {
+  return (
+    <div style={{ height: 250, width: '100%' }}>
+      <DataGrid
+        columns={[
+          {
+            field: 'id',
+            flex: 1,
+          },
+          {
+            field: 'username',
+            width: 300,
+          },
+          {
+            field: 'age',
+            flex: 0.2,
+          },
+        ]}
+        rows={rows}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.tsx b/docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.tsx
new file mode 100644
index 000000000000..767f6bca655c
--- /dev/null
+++ b/docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+
+const rows = [
+  {
+    id: 1,
+    username: 'defunkt',
+    age: 38,
+  },
+];
+
+export default function ColumnFluidWidthGrid() {
+  return (
+    <div style={{ height: 250, width: '100%' }}>
+      <DataGrid
+        columns={[
+          {
+            field: 'id',
+            flex: 1,
+          },
+          {
+            field: 'username',
+            width: 200,
+          },
+          {
+            field: 'age',
+            flex: 0.3,
+          },
+        ]}
+        rows={rows}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index d0ed067d9b3c..8a0838cddb04 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -49,6 +49,26 @@ To change the width of a column, use the `width` property available in `ColDef`.
 
 {{"demo": "pages/components/data-grid/columns/ColumnWidthGrid.js", "bg": "inline"}}
 
+## Column fluid width
+
+By default each column have a fixed width of 100 pixels but we can have fluid (responsive) columns by setting the `flex` propery avaibale in the `ColDef`.
+
+The `flex` propery accepts values between 0 and 1.
+
+The `flex` property works by dividing the remaining space in the grid among all flex columns in proportion to their `flex` value. For example, a grid with a total width of 500px that has three columns: the first with width: 200; the second with flex: 1; and third with flex: 0.5. The first column will be 200px wide, leaving 300px remaining. The column with flex: 1 has twice the size with flex: 0.5 which means that final sizes will be: 200px, 200px, 100px.
+
+The `flex` configuration does not work together with the `width` configuration. If you set both the `flex` and `width` inside the `ColDef` of column the `flex` will overwrite the `width`.
+
+The `flex` configuration does not work if the combined width of the columns that have `width` is more that the width of the grid itself. If that is the case a scroll bar will be visible and the columns that hava `flex` will default back to their base value of 100 pixels.
+
+{{"demo": "pages/components/data-grid/columns/ColumnFluidWidthGrid.js", "bg": "inline"}}
+
+<!--
+- https://ag-grid.com/javascript-grid-resizing/#column-flex
+- https://www.telerik.com/kendo-react-ui/components/grid/columns/width/
+- https://react-table-omega.vercel.app/docs/api/useFlexLayout
+-->
+
 ## Column resizing [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
 
 By default, `XGrid` allows all columns to be resized by dragging the right portion of the column separator.
diff --git a/packages/grid/_modules_/grid/GridComponent.tsx b/packages/grid/_modules_/grid/GridComponent.tsx
index a6447f8b6f85..4917ae3fd5b4 100644
--- a/packages/grid/_modules_/grid/GridComponent.tsx
+++ b/packages/grid/_modules_/grid/GridComponent.tsx
@@ -77,7 +77,12 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
   }, [apiRef, props.error]);
 
   useEvents(rootContainerRef, internalOptions, apiRef);
-  const internalColumns = useColumns(internalOptions, props.columns, apiRef);
+  const internalColumns = useColumns(
+    internalOptions,
+    props.columns,
+    rootContainerRef.current?.clientWidth,
+    apiRef,
+  );
   const internalRows = useRows(internalOptions, props.rows, initialised, apiRef);
   useKeyboard(internalOptions, initialised, apiRef);
   useSelection(internalOptions, props.rows, initialised, apiRef);
diff --git a/packages/grid/_modules_/grid/hooks/root/useColumns.ts b/packages/grid/_modules_/grid/hooks/root/useColumns.ts
index 4ee07d4c5e8e..33a4421c2fc6 100644
--- a/packages/grid/_modules_/grid/hooks/root/useColumns.ts
+++ b/packages/grid/_modules_/grid/hooks/root/useColumns.ts
@@ -28,15 +28,45 @@ const initialState: InternalColumns = {
   meta: { positions: [], totalWidth: 0 },
 };
 
+function mapColumns(
+  columns: Columns,
+  columnTypes: ColumnTypesRecord,
+  containerWidth: number,
+): Columns {
+  let extendedColumns = columns.map((c) => ({ ...getColDef(columnTypes, c.type), ...c }));
+  const numberOfFluidColumns = columns.filter((column) => !!column.flex).length;
+  let flexDivider = 0;
+
+  if (numberOfFluidColumns && containerWidth) {
+    extendedColumns.forEach((column) => {
+      if (!column.flex) {
+        containerWidth -= column.width!;
+      } else {
+        flexDivider += column.flex;
+      }
+    });
+  }
+
+  if (containerWidth > 0 && numberOfFluidColumns) {
+    const flexMultiplier = Math.floor(containerWidth / flexDivider);
+    extendedColumns = extendedColumns.map((c) => {
+      return { ...c, width: c.flex! ? Math.floor(flexMultiplier * c.flex!) : c.width };
+    });
+  }
+
+  return extendedColumns;
+}
+
 function hydrateColumns(
   columns: Columns,
   columnTypes: ColumnTypesRecord,
+  containerWidth: number,
   withCheckboxSelection: boolean,
   logger: Logger,
   apiRef: ApiRef,
 ): Columns {
   logger.debug('Hydrating Columns with default definitions');
-  let mappedCols = columns.map((c) => ({ ...getColDef(columnTypes, c.type), ...c }));
+  let mappedCols = mapColumns(columns, columnTypes, containerWidth);
   if (withCheckboxSelection) {
     mappedCols = [checkboxSelectionColDef, ...mappedCols];
   }
@@ -91,6 +121,7 @@ function toMeta(logger: Logger, visibleColumns: Columns): ColumnsMeta {
 const resetState = (
   columns: Columns,
   columnTypes: ColumnTypesRecord,
+  containerWidth: number,
   withCheckboxSelection: boolean,
   logger: Logger,
   apiRef: ApiRef,
@@ -99,7 +130,14 @@ const resetState = (
     return initialState;
   }
 
-  const all = hydrateColumns(columns, columnTypes, withCheckboxSelection, logger, apiRef);
+  const all = hydrateColumns(
+    columns,
+    columnTypes,
+    containerWidth,
+    withCheckboxSelection,
+    logger,
+    apiRef,
+  );
   const visible = filterVisible(logger, all);
   const meta = toMeta(logger, visible);
   const lookup = toLookup(logger, all);
@@ -149,6 +187,7 @@ const getUpdatedColumnState = (
 export function useColumns(
   options: GridOptions,
   columns: Columns,
+  containerWidth: number = 0,
   apiRef: ApiRef,
 ): InternalColumns {
   const logger = useLogger('useColumns');
@@ -176,12 +215,21 @@ export function useColumns(
     const newState = resetState(
       columns,
       options.columnTypes,
+      containerWidth,
       !!options.checkboxSelection,
       logger,
       apiRef,
     );
     updateState(newState);
-  }, [columns, options.columnTypes, options.checkboxSelection, logger, apiRef, updateState]);
+  }, [
+    columns,
+    options.columnTypes,
+    containerWidth,
+    options.checkboxSelection,
+    logger,
+    apiRef,
+    updateState,
+  ]);
 
   const getColumnFromField: (field: string) => ColDef = React.useCallback(
     (field) => stateRef.current.lookup[field],
diff --git a/packages/grid/_modules_/grid/models/colDef/colDef.ts b/packages/grid/_modules_/grid/models/colDef/colDef.ts
index 051b06bb6440..6ba277978da9 100644
--- a/packages/grid/_modules_/grid/models/colDef/colDef.ts
+++ b/packages/grid/_modules_/grid/models/colDef/colDef.ts
@@ -32,6 +32,10 @@ export interface ColDef {
    * @default 100
    */
   width?: number;
+  /**
+   * If set it idicates that a column has fluid width. Range [0 - 1].
+   */
+  flex?: number;
   /**
    * If `true`, hide the column.
    * @default false;

From e54cb9ad5e8f79727e5c025114022c7be2791255 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Wed, 21 Oct 2020 21:34:20 +0200
Subject: [PATCH 02/22] Fix doc formatting

---
 .../components/data-grid/columns/ColumnFluidWidthGrid.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.js b/docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.js
index 727d20e150b7..767f6bca655c 100644
--- a/docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.js
+++ b/docs/src/pages/components/data-grid/columns/ColumnFluidWidthGrid.js
@@ -20,11 +20,11 @@ export default function ColumnFluidWidthGrid() {
           },
           {
             field: 'username',
-            width: 300,
+            width: 200,
           },
           {
             field: 'age',
-            flex: 0.2,
+            flex: 0.3,
           },
         ]}
         rows={rows}

From c77a4755128fb262c97046ca4c53fc6884a58620 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Thu, 22 Oct 2020 11:02:23 +0200
Subject: [PATCH 03/22] Fix documentation so that it is complient to the MUI
 documentation standarts

---
 docs/src/pages/components/data-grid/columns/columns.md | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index 8a0838cddb04..0a0f7d0bb986 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -49,9 +49,9 @@ To change the width of a column, use the `width` property available in `ColDef`.
 
 {{"demo": "pages/components/data-grid/columns/ColumnWidthGrid.js", "bg": "inline"}}
 
-## Column fluid width
+### Fluid width
 
-By default each column have a fixed width of 100 pixels but we can have fluid (responsive) columns by setting the `flex` propery avaibale in the `ColDef`.
+By default each column have a fixed width of 100 pixels, but column fluidity (responsiveness) can be by achieved setting the `flex` propery avaibale in the `ColDef`.
 
 The `flex` propery accepts values between 0 and 1.
 
@@ -63,12 +63,6 @@ The `flex` configuration does not work if the combined width of the columns that
 
 {{"demo": "pages/components/data-grid/columns/ColumnFluidWidthGrid.js", "bg": "inline"}}
 
-<!--
-- https://ag-grid.com/javascript-grid-resizing/#column-flex
-- https://www.telerik.com/kendo-react-ui/components/grid/columns/width/
-- https://react-table-omega.vercel.app/docs/api/useFlexLayout
--->
-
 ## Column resizing [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
 
 By default, `XGrid` allows all columns to be resized by dragging the right portion of the column separator.

From 756932defea90e26a133dd70cb1c8d08a10d4e88 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Mon, 26 Oct 2020 16:56:38 +0100
Subject: [PATCH 04/22] Add unit tests

---
 packages/grid/data-grid/src/DataGrid.test.tsx | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)

diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx
index b348b3d728b0..d9e02390c12b 100644
--- a/packages/grid/data-grid/src/DataGrid.test.tsx
+++ b/packages/grid/data-grid/src/DataGrid.test.tsx
@@ -171,4 +171,113 @@ describe('<DataGrid />', () => {
       );
     });
   });
+
+  describe.only('column width', () => {
+    it('should set the columns width to 100px by default', () => {
+      const rows = [
+        {
+          id: 1,
+          username: 'John Doe',
+          age: 30,
+        },
+      ];
+
+      const columns = [
+        {
+          field: 'id',
+        },
+        {
+          field: 'name',
+        },
+        {
+          field: 'age',
+        },
+      ];
+
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid columns={columns} rows={rows}/>
+        </div>,
+      );
+
+      const DOMColumns = document.querySelectorAll('.MuiDataGrid-colCell');
+      DOMColumns.forEach(col => {
+        expect(col.style.width).to.equal('100px');
+      })
+    });
+
+    it('should set the columns width value to what is provided', () => {
+      const rows = [
+        {
+          id: 1,
+          username: 'John Doe',
+          age: 30,
+        },
+      ];
+
+      const colWidthValues = [50, 50, 200];
+      const columns = [
+        {
+          field: 'id',
+          width: colWidthValues[0],
+        },
+        {
+          field: 'name',
+          width: colWidthValues[1],
+        },
+        {
+          field: 'age',
+          width: colWidthValues[2],
+        },
+      ];
+
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid columns={columns} rows={rows}/>
+        </div>,
+      );
+
+      const DOMColumns = document.querySelectorAll('.MuiDataGrid-colCell');
+      DOMColumns.forEach((col, index) => {
+        expect(col.style.width).to.equal(`${colWidthValues[index]}px`);
+      });
+    });
+
+    it('should set the first column width to be twise as bit as the second one', () => {
+      if (!/jsdom/.test(window.navigator.userAgent)) {
+        const rows = [
+          {
+            id: 1,
+            username: 'John Doe',
+            age: 30,
+          },
+        ];
+
+        const columns = [
+          {
+            field: 'id',
+            flex: 1,
+          },
+          {
+            field: 'name',
+            flex: 0.5,
+          },
+        ];
+
+        render(
+          <div style={{ width: 200, height: 300 }}>
+            <DataGrid columns={columns} rows={rows}/>
+          </div>,
+        );
+
+        const firstColumn = document.querySelector('[role="columnheader"][aria-colindex="1"]');
+        const secondColumn = document.querySelector('[role="columnheader"][aria-colindex="2"]');
+
+        const firstColumnWidthVal = firstColumn.style.width.split('px')[0];
+        const secondColumnWidthVal = secondColumn.style.width.split('px')[0];
+
+        expect(parseInt(firstColumnWidthVal)).to.equal(2 * parseInt(secondColumnWidthVal));
+      }
+    });
+  })
 });

From 2d23e7df6ef1de42c15247273459f206661fd658 Mon Sep 17 00:00:00 2001
From: Danail Hadjiatanasov <hadjiatanasov@gmail.com>
Date: Tue, 27 Oct 2020 17:32:37 +0100
Subject: [PATCH 05/22] Update
 packages/grid/_modules_/grid/hooks/root/useColumns.ts

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 packages/grid/_modules_/grid/hooks/root/useColumns.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/grid/_modules_/grid/hooks/root/useColumns.ts b/packages/grid/_modules_/grid/hooks/root/useColumns.ts
index 33a4421c2fc6..399e567096fd 100644
--- a/packages/grid/_modules_/grid/hooks/root/useColumns.ts
+++ b/packages/grid/_modules_/grid/hooks/root/useColumns.ts
@@ -48,7 +48,7 @@ function mapColumns(
   }
 
   if (containerWidth > 0 && numberOfFluidColumns) {
-    const flexMultiplier = Math.floor(containerWidth / flexDivider);
+    const flexMultiplier = containerWidth / flexDivider;
     extendedColumns = extendedColumns.map((c) => {
       return { ...c, width: c.flex! ? Math.floor(flexMultiplier * c.flex!) : c.width };
     });

From 6cdced38ebc91b81493c22be72ac85481eed593a Mon Sep 17 00:00:00 2001
From: Danail Hadjiatanasov <hadjiatanasov@gmail.com>
Date: Tue, 27 Oct 2020 17:33:01 +0100
Subject: [PATCH 06/22] Update
 packages/grid/_modules_/grid/models/colDef/colDef.ts

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 packages/grid/_modules_/grid/models/colDef/colDef.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/grid/_modules_/grid/models/colDef/colDef.ts b/packages/grid/_modules_/grid/models/colDef/colDef.ts
index 6ba277978da9..0a80d794aa04 100644
--- a/packages/grid/_modules_/grid/models/colDef/colDef.ts
+++ b/packages/grid/_modules_/grid/models/colDef/colDef.ts
@@ -33,7 +33,7 @@ export interface ColDef {
    */
   width?: number;
   /**
-   * If set it idicates that a column has fluid width. Range [0 - 1].
+   * If set, it indicates that a column has fluid width. Range [0, 1].
    */
   flex?: number;
   /**

From 12fa1fad7ffed2726231c1fa0c3dac92ce9e1ea0 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Tue, 27 Oct 2020 17:40:12 +0100
Subject: [PATCH 07/22] Fix PR comments

---
 .../components/data-grid/columns/columns.md   |  2 +-
 .../styled-wrappers/GridRootStyles.ts         |  4 +++
 .../_modules_/grid/hooks/root/useColumns.ts   |  7 ++--
 .../_modules_/grid/models/colDef/colDef.ts    |  2 +-
 packages/grid/data-grid/src/DataGrid.test.tsx | 12 +++----
 packages/storybook/.storybook/main.js         | 33 ++++++++++---------
 packages/storybook/.storybook/preview.js      |  5 +--
 7 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index 0a0f7d0bb986..6e7170594403 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -53,7 +53,7 @@ To change the width of a column, use the `width` property available in `ColDef`.
 
 By default each column have a fixed width of 100 pixels, but column fluidity (responsiveness) can be by achieved setting the `flex` propery avaibale in the `ColDef`.
 
-The `flex` propery accepts values between 0 and 1.
+The `flex` propery accepts values between 0 and ∞.
 
 The `flex` property works by dividing the remaining space in the grid among all flex columns in proportion to their `flex` value. For example, a grid with a total width of 500px that has three columns: the first with width: 200; the second with flex: 1; and third with flex: 0.5. The first column will be 200px wide, leaving 300px remaining. The column with flex: 1 has twice the size with flex: 0.5 which means that final sizes will be: 200px, 200px, 100px.
 
diff --git a/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts b/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts
index fbe307c282bb..4e0f7baebd8a 100644
--- a/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts
+++ b/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts
@@ -126,6 +126,10 @@ export const useStyles = makeStyles(
           cursor: 'col-resize',
           '&:hover, &.Mui-resizing': {
             color: theme.palette.text.primary,
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+              color: borderColor,
+            },
           },
         },
         '& .MuiDataGrid-iconSeparator': {
diff --git a/packages/grid/_modules_/grid/hooks/root/useColumns.ts b/packages/grid/_modules_/grid/hooks/root/useColumns.ts
index 399e567096fd..e01cb1784c29 100644
--- a/packages/grid/_modules_/grid/hooks/root/useColumns.ts
+++ b/packages/grid/_modules_/grid/hooks/root/useColumns.ts
@@ -49,8 +49,11 @@ function mapColumns(
 
   if (containerWidth > 0 && numberOfFluidColumns) {
     const flexMultiplier = containerWidth / flexDivider;
-    extendedColumns = extendedColumns.map((c) => {
-      return { ...c, width: c.flex! ? Math.floor(flexMultiplier * c.flex!) : c.width };
+    extendedColumns = extendedColumns.map((column) => {
+      return {
+        ...column,
+        width: column.flex! ? Math.floor(flexMultiplier * column.flex!) : column.width,
+      };
     });
   }
 
diff --git a/packages/grid/_modules_/grid/models/colDef/colDef.ts b/packages/grid/_modules_/grid/models/colDef/colDef.ts
index 0a80d794aa04..d693a2a0c5fe 100644
--- a/packages/grid/_modules_/grid/models/colDef/colDef.ts
+++ b/packages/grid/_modules_/grid/models/colDef/colDef.ts
@@ -33,7 +33,7 @@ export interface ColDef {
    */
   width?: number;
   /**
-   * If set, it indicates that a column has fluid width. Range [0, 1].
+   * If set, it indicates that a column has fluid width. Range [0, ∞].
    */
   flex?: number;
   /**
diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx
index d9e02390c12b..bc67178407e1 100644
--- a/packages/grid/data-grid/src/DataGrid.test.tsx
+++ b/packages/grid/data-grid/src/DataGrid.test.tsx
@@ -196,14 +196,14 @@ describe('<DataGrid />', () => {
 
       render(
         <div style={{ width: 300, height: 300 }}>
-          <DataGrid columns={columns} rows={rows}/>
+          <DataGrid columns={columns} rows={rows} />
         </div>,
       );
 
       const DOMColumns = document.querySelectorAll('.MuiDataGrid-colCell');
-      DOMColumns.forEach(col => {
+      DOMColumns.forEach((col) => {
         expect(col.style.width).to.equal('100px');
-      })
+      });
     });
 
     it('should set the columns width value to what is provided', () => {
@@ -233,7 +233,7 @@ describe('<DataGrid />', () => {
 
       render(
         <div style={{ width: 300, height: 300 }}>
-          <DataGrid columns={columns} rows={rows}/>
+          <DataGrid columns={columns} rows={rows} />
         </div>,
       );
 
@@ -266,7 +266,7 @@ describe('<DataGrid />', () => {
 
         render(
           <div style={{ width: 200, height: 300 }}>
-            <DataGrid columns={columns} rows={rows}/>
+            <DataGrid columns={columns} rows={rows} />
           </div>,
         );
 
@@ -279,5 +279,5 @@ describe('<DataGrid />', () => {
         expect(parseInt(firstColumnWidthVal)).to.equal(2 * parseInt(secondColumnWidthVal));
       }
     });
-  })
+  });
 });
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
index 045404e9c4cb..9e566c2cd1b5 100644
--- a/packages/storybook/.storybook/main.js
+++ b/packages/storybook/.storybook/main.js
@@ -1,16 +1,16 @@
 const path = require('path');
 const webpack = require('webpack');
 
-const env = process.env.NODE_ENV || 'development'
+const env = process.env.NODE_ENV || 'development';
 /* eslint-disable */
-const __DEV__ = env === 'development'
-const __PROD__ = env === 'production'
+const __DEV__ = env === 'development';
+const __PROD__ = env === 'production';
 /* eslint-enable */
 
 if (!(__DEV__ || __PROD__)) {
-  throw new Error(`Unknown env: ${env}.`)
+  throw new Error(`Unknown env: ${env}.`);
 }
-console.log(`Loading config for ${env}`)
+console.log(`Loading config for ${env}`);
 const maxAssetSize = 1024 * 1024;
 
 module.exports = {
@@ -25,16 +25,16 @@ module.exports = {
   ],
   typescript: {
     check: __DEV__, // Netlify is breaking the deploy with this settings on. So deactivate on release
-    reactDocgen: false
+    reactDocgen: false,
   },
-  webpackFinal: async config => {
+  webpackFinal: async (config) => {
     config.parallelism = 1;
     config.module.rules.push({
       test: /\.(ts|tsx)$/,
       use: [
         {
           loader: require.resolve('ts-loader'),
-        }
+        },
       ],
     });
     if (__DEV__) {
@@ -42,8 +42,8 @@ module.exports = {
         test: /\.(ts|tsx)$/,
         use: ['source-map-loader'],
         enforce: 'pre',
-        exclude:   /node_modules/,
-        include: path.resolve(__dirname, '../../../packages/grid/')
+        exclude: /node_modules/,
+        include: path.resolve(__dirname, '../../../packages/grid/'),
       });
     }
 
@@ -54,7 +54,7 @@ module.exports = {
           loader: require.resolve('@storybook/source-loader'),
           options: {
             parser: 'typescript',
-            prettierConfig: {printWidth: 80, singleQuote: true},
+            prettierConfig: { printWidth: 80, singleQuote: true },
             tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
           },
         },
@@ -68,7 +68,7 @@ module.exports = {
       options: {
         search: '__RELEASE_INFO__',
         replace: 'MTU5NjMxOTIwMDAwMA==', // 2020-08-02
-      }
+      },
     });
 
     config.optimization = {
@@ -76,17 +76,20 @@ module.exports = {
         chunks: 'all',
         minSize: 30 * 1024,
         maxSize: maxAssetSize,
-      }
+      },
     };
     config.performance = {
-      maxAssetSize: maxAssetSize
+      maxAssetSize: maxAssetSize,
     };
     config.resolve = {
       ...config.resolve,
       extensions: ['.js', '.ts', '.tsx'],
       alias: {
         '@material-ui/data-grid': path.resolve(__dirname, '../../../packages/grid/data-grid/src'),
-        '@material-ui/x-grid-data-generator': path.resolve(__dirname, '../../../packages/x-grid-data-generator/src'),
+        '@material-ui/x-grid-data-generator': path.resolve(
+          __dirname,
+          '../../../packages/x-grid-data-generator/src',
+        ),
         '@material-ui/x-grid': path.resolve(__dirname, '../../../packages/grid/x-grid/src'),
         '@material-ui/x-license': path.resolve(__dirname, '../../../packages/x-license/src'),
       },
diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
index 118231c4caee..1bcc7455cbdc 100644
--- a/packages/storybook/.storybook/preview.js
+++ b/packages/storybook/.storybook/preview.js
@@ -10,7 +10,7 @@ LicenseInfo.setLicenseKey(
 
 configureActions({
   depth: 3,
-  limit: 10
+  limit: 10,
 });
 
 addParameters({
@@ -20,7 +20,8 @@ addParameters({
      * @type {Boolean}
      */
     isToolshown: true,
-    storySort: (a, b) => (a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })),
+    storySort: (a, b) =>
+      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
   },
   viewport: {
     viewports: INITIAL_VIEWPORTS,

From 9b042c6b082421a15891ebe709d9780188d62afe Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Wed, 28 Oct 2020 17:02:16 +0100
Subject: [PATCH 08/22] Fix unit tests

---
 packages/grid/data-grid/src/DataGrid.test.tsx | 69 ++++++++++---------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx
index 9d325dedd2a4..070bef3900fd 100644
--- a/packages/grid/data-grid/src/DataGrid.test.tsx
+++ b/packages/grid/data-grid/src/DataGrid.test.tsx
@@ -175,6 +175,13 @@ describe('<DataGrid />', () => {
   });
 
   describe('column width', () => {
+    before(function beforeHook() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        // Need layouting
+        this.skip();
+      }
+    });
+
     it('should set the columns width to 100px by default', () => {
       const rows = [
         {
@@ -246,42 +253,40 @@ describe('<DataGrid />', () => {
     });
 
     it('should set the first column width to be twise as bit as the second one', () => {
-      if (!/jsdom/.test(window.navigator.userAgent)) {
-        const rows = [
-          {
-            id: 1,
-            username: 'John Doe',
-            age: 30,
-          },
-        ];
+      const rows = [
+        {
+          id: 1,
+          username: 'John Doe',
+          age: 30,
+        },
+      ];
 
-        const columns = [
-          {
-            field: 'id',
-            flex: 1,
-          },
-          {
-            field: 'name',
-            flex: 0.5,
-          },
-        ];
+      const columns = [
+        {
+          field: 'id',
+          flex: 1,
+        },
+        {
+          field: 'name',
+          flex: 0.5,
+        },
+      ];
 
-        render(
-          <div style={{ width: 200, height: 300 }}>
-            <DataGrid columns={columns} rows={rows} />
-          </div>,
-        );
+      render(
+        <div style={{ width: 200, height: 300 }}>
+          <DataGrid columns={columns} rows={rows} />
+        </div>,
+      );
 
-        const firstColumn = document.querySelector('[role="columnheader"][aria-colindex="1"]');
-        const secondColumn: HTMLElement | null = document.querySelector(
-          '[role="columnheader"][aria-colindex="2"]',
-        );
-        const secondColumnWidthVal = secondColumn!.style.width.split('px')[0];
+      const firstColumn = document.querySelector('[role="columnheader"][aria-colindex="1"]');
+      const secondColumn: HTMLElement | null = document.querySelector(
+        '[role="columnheader"][aria-colindex="2"]',
+      );
+      const secondColumnWidthVal = secondColumn!.style.width.split('px')[0];
 
-        expect(firstColumn).toHaveInlineStyle({
-          width: `${2 * parseInt(secondColumnWidthVal, 10)}px`,
-        });
-      }
+      expect(firstColumn).toHaveInlineStyle({
+        width: `${2 * parseInt(secondColumnWidthVal, 10)}px`,
+      });
     });
   });
 });

From e92df8968de231fdc87ed279ba8c3c200de841e8 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Wed, 28 Oct 2020 17:24:07 +0100
Subject: [PATCH 09/22] Resolve TS issues

---
 packages/grid/data-grid/src/DataGrid.test.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx
index 070bef3900fd..c74a29e2cf6f 100644
--- a/packages/grid/data-grid/src/DataGrid.test.tsx
+++ b/packages/grid/data-grid/src/DataGrid.test.tsx
@@ -104,6 +104,7 @@ describe('<DataGrid />', () => {
             </div>,
           );
           clock.tick(100);
+          // @ts-expect-error need to migrate helpers to TypeScript
         }).toWarnDev('useResizeContainer: The parent of the grid has an empty height.');
       });
 
@@ -117,6 +118,7 @@ describe('<DataGrid />', () => {
             </div>,
           );
           clock.tick(100);
+          // @ts-expect-error need to migrate helpers to TypeScript
         }).toWarnDev('useResizeContainer: The parent of the grid has an empty width.');
       });
     });
@@ -137,6 +139,7 @@ describe('<DataGrid />', () => {
           'prop',
           'MockedDataGrid',
         );
+        // @ts-expect-error need to migrate helpers to TypeScript
       }).toErrorDev('Material-UI: `<DataGrid pagination={false} />` is not a valid prop.');
     });
 
@@ -162,6 +165,7 @@ describe('<DataGrid />', () => {
             <DataGrid {...defaultProps} rows={rows} />
           </ErrorBoundary>,
         );
+        // @ts-expect-error need to migrate helpers to TypeScript
       }).toErrorDev([
         'The data grid component requires all rows to have a unique id property',
         'The above error occurred in the <ForwardRef(GridComponent)> component',

From ff5e9631069c0267ed5cef22e01e264ff81867a1 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Wed, 28 Oct 2020 17:55:07 +0100
Subject: [PATCH 10/22] Add // @ts-expect-error need to migrate helpers to
 TypeScript before toHaveInlineStyle

---
 packages/grid/data-grid/src/DataGrid.test.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx
index c74a29e2cf6f..649f26d5a47a 100644
--- a/packages/grid/data-grid/src/DataGrid.test.tsx
+++ b/packages/grid/data-grid/src/DataGrid.test.tsx
@@ -215,6 +215,7 @@ describe('<DataGrid />', () => {
 
       const DOMColumns = document.querySelectorAll('.MuiDataGrid-colCell');
       DOMColumns.forEach((col) => {
+        // @ts-expect-error need to migrate helpers to TypeScript
         expect(col).toHaveInlineStyle({ width: '100px' });
       });
     });
@@ -252,6 +253,7 @@ describe('<DataGrid />', () => {
 
       const DOMColumns = document.querySelectorAll('.MuiDataGrid-colCell');
       DOMColumns.forEach((col, index) => {
+        // @ts-expect-error need to migrate helpers to TypeScript
         expect(col).toHaveInlineStyle({ width: `${colWidthValues[index]}px` });
       });
     });
@@ -287,7 +289,7 @@ describe('<DataGrid />', () => {
         '[role="columnheader"][aria-colindex="2"]',
       );
       const secondColumnWidthVal = secondColumn!.style.width.split('px')[0];
-
+      // @ts-expect-error need to migrate helpers to TypeScript
       expect(firstColumn).toHaveInlineStyle({
         width: `${2 * parseInt(secondColumnWidthVal, 10)}px`,
       });

From 5805baaa030a6a69486a3f556b562587d9702ddb Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Fri, 30 Oct 2020 15:53:28 +0100
Subject: [PATCH 11/22] Add storybook examples

---
 .../components/data-grid/columns/columns.md   |   2 +-
 .../src/stories/grid-fluid.stories.tsx        | 126 ++++++++++++++++++
 2 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 packages/storybook/src/stories/grid-fluid.stories.tsx

diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index 6e7170594403..736a50ebaf87 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -59,7 +59,7 @@ The `flex` property works by dividing the remaining space in the grid among all
 
 The `flex` configuration does not work together with the `width` configuration. If you set both the `flex` and `width` inside the `ColDef` of column the `flex` will overwrite the `width`.
 
-The `flex` configuration does not work if the combined width of the columns that have `width` is more that the width of the grid itself. If that is the case a scroll bar will be visible and the columns that hava `flex` will default back to their base value of 100 pixels.
+The `flex` configuration does not work if the combined width of the columns that have `width` is more than the width of the grid itself. If that is the case a scroll bar will be visible and the columns that hava `flex` will default back to their base value of 100 pixels.
 
 {{"demo": "pages/components/data-grid/columns/ColumnFluidWidthGrid.js", "bg": "inline"}}
 
diff --git a/packages/storybook/src/stories/grid-fluid.stories.tsx b/packages/storybook/src/stories/grid-fluid.stories.tsx
new file mode 100644
index 000000000000..b359c2f39efb
--- /dev/null
+++ b/packages/storybook/src/stories/grid-fluid.stories.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { XGrid } from '@material-ui/x-grid';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withA11y } from '@storybook/addon-a11y';
+import '../style/grid-stories.css';
+
+export default {
+  title: 'X-Grid Tests/Fluid Column Width',
+  component: XGrid,
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    options: { selectedPanel: 'storybook/storysource/panel' },
+    docs: {
+      page: null,
+    },
+  },
+};
+export const FewColumns = () => {
+  const rows = [
+    {
+      id: 1,
+      '2M': '2',
+      '3M': '3',
+    },
+  ];
+  const columns = [
+    {
+      field: 'id',
+      flex: 3,
+    },
+    {
+      field: '2M',
+      width: 200,
+    },
+    {
+      field: '3M',
+      flex: 1,
+    },
+  ];
+
+  return (
+    <div className="grid-container">
+      <XGrid rows={rows} columns={columns} />
+    </div>
+  );
+};
+
+export const SeveralColumn = () => {
+  const rows = [
+    {
+      id: 1,
+      '2M': '2',
+      '3M': '3',
+      '4M': '4',
+      '5M': '5',
+      '6M': '6',
+      '7M': '7',
+    },
+  ];
+  const columns = [
+    {
+      field: 'id',
+      flex: 3,
+    },
+    {
+      field: '2M',
+      width: 200,
+    },
+    {
+      field: '3M',
+      flex: 1,
+    },
+    {
+      field: '4M',
+      flex: 1,
+    },
+    {
+      field: '5M',
+      flex: 2,
+    },
+    {
+      field: '6M',
+      flex: 1,
+    },
+    {
+      field: '7M',
+      flex: 1,
+    },
+  ];
+
+  return (
+    <div className="grid-container">
+      <XGrid rows={rows} columns={columns} />
+    </div>
+  );
+};
+
+export const FlexWithColumnWidth2000 = () => {
+  const rows = [
+    {
+      id: 1,
+      '2M': '2',
+      '3M': '3',
+    },
+  ];
+  const columns = [
+    {
+      field: 'id',
+      flex: 3,
+    },
+    {
+      field: '2M',
+      width: 2000,
+    },
+    {
+      field: '3M',
+      flex: 1,
+    },
+  ];
+
+  return (
+    <div className="grid-container">
+      <XGrid rows={rows} columns={columns} />
+    </div>
+  );
+};

From 6e5401cbf0e7740a80a10bb16d366e8951f2b60f Mon Sep 17 00:00:00 2001
From: Danail Hadjiatanasov <hadjiatanasov@gmail.com>
Date: Mon, 2 Nov 2020 11:44:23 +0100
Subject: [PATCH 12/22] Update
 docs/src/pages/components/data-grid/columns/columns.md

Co-authored-by: Matt <github@nospam.33m.co>
---
 docs/src/pages/components/data-grid/columns/columns.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index 736a50ebaf87..74cebabe92cb 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -51,7 +51,7 @@ To change the width of a column, use the `width` property available in `ColDef`.
 
 ### Fluid width
 
-By default each column have a fixed width of 100 pixels, but column fluidity (responsiveness) can be by achieved setting the `flex` propery avaibale in the `ColDef`.
+Each column has a fixed width of 100 pixels by default, but column fluidity (responsiveness) can be by achieved by setting the `flex` property in `ColDef`.
 
 The `flex` propery accepts values between 0 and ∞.
 

From bf768d35e0fe186eff69c039a075d01994910aa1 Mon Sep 17 00:00:00 2001
From: Danail Hadjiatanasov <hadjiatanasov@gmail.com>
Date: Mon, 2 Nov 2020 11:44:39 +0100
Subject: [PATCH 13/22] Update
 docs/src/pages/components/data-grid/columns/columns.md

Co-authored-by: Matt <github@nospam.33m.co>
---
 docs/src/pages/components/data-grid/columns/columns.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index 74cebabe92cb..637a844fd8d8 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -53,7 +53,7 @@ To change the width of a column, use the `width` property available in `ColDef`.
 
 Each column has a fixed width of 100 pixels by default, but column fluidity (responsiveness) can be by achieved by setting the `flex` property in `ColDef`.
 
-The `flex` propery accepts values between 0 and ∞.
+The `flex` property accepts a value between 0 and ∞.
 
 The `flex` property works by dividing the remaining space in the grid among all flex columns in proportion to their `flex` value. For example, a grid with a total width of 500px that has three columns: the first with width: 200; the second with flex: 1; and third with flex: 0.5. The first column will be 200px wide, leaving 300px remaining. The column with flex: 1 has twice the size with flex: 0.5 which means that final sizes will be: 200px, 200px, 100px.
 

From 94404aa96085f26e98374f65ab0e81f1b753b7d7 Mon Sep 17 00:00:00 2001
From: Danail Hadjiatanasov <hadjiatanasov@gmail.com>
Date: Mon, 2 Nov 2020 11:44:50 +0100
Subject: [PATCH 14/22] Update
 docs/src/pages/components/data-grid/columns/columns.md

Co-authored-by: Matt <github@nospam.33m.co>
---
 docs/src/pages/components/data-grid/columns/columns.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index 637a844fd8d8..34f6611f4aa9 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -55,7 +55,9 @@ Each column has a fixed width of 100 pixels by default, but column fluidity (res
 
 The `flex` property accepts a value between 0 and ∞.
 
-The `flex` property works by dividing the remaining space in the grid among all flex columns in proportion to their `flex` value. For example, a grid with a total width of 500px that has three columns: the first with width: 200; the second with flex: 1; and third with flex: 0.5. The first column will be 200px wide, leaving 300px remaining. The column with flex: 1 has twice the size with flex: 0.5 which means that final sizes will be: 200px, 200px, 100px.
+The `flex` property works by dividing the remaining space in the grid among all flex columns in proportion to their `flex` value. 
+For example, consider a grid with a total width of 500px that has three columns: the first with `width: 200`; the second with `flex: 1`; and third with `flex: 0.5`. 
+The first column will be 200px wide, leaving 300px remaining. The column with `flex: 1` is twice the size of `flex: 0.5`, which means that final sizes will be: 200px, 200px, 100px.
 
 The `flex` configuration does not work together with the `width` configuration. If you set both the `flex` and `width` inside the `ColDef` of column the `flex` will overwrite the `width`.
 

From 4c6a988824c57b815ef26fc44ad919c22fd78852 Mon Sep 17 00:00:00 2001
From: Danail Hadjiatanasov <hadjiatanasov@gmail.com>
Date: Mon, 2 Nov 2020 11:45:01 +0100
Subject: [PATCH 15/22] Update
 docs/src/pages/components/data-grid/columns/columns.md

Co-authored-by: Matt <github@nospam.33m.co>
---
 docs/src/pages/components/data-grid/columns/columns.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index 34f6611f4aa9..14d78c50f29a 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -59,7 +59,7 @@ The `flex` property works by dividing the remaining space in the grid among all
 For example, consider a grid with a total width of 500px that has three columns: the first with `width: 200`; the second with `flex: 1`; and third with `flex: 0.5`. 
 The first column will be 200px wide, leaving 300px remaining. The column with `flex: 1` is twice the size of `flex: 0.5`, which means that final sizes will be: 200px, 200px, 100px.
 
-The `flex` configuration does not work together with the `width` configuration. If you set both the `flex` and `width` inside the `ColDef` of column the `flex` will overwrite the `width`.
+Note that `flex` doesn't work together with `width`. If you set both `flex` and `width` in `ColDef`, `flex` will override `width`.
 
 The `flex` configuration does not work if the combined width of the columns that have `width` is more than the width of the grid itself. If that is the case a scroll bar will be visible and the columns that hava `flex` will default back to their base value of 100 pixels.
 

From 04f336aac681ba4502def58ebad1f6bd60f02fe7 Mon Sep 17 00:00:00 2001
From: Danail Hadjiatanasov <hadjiatanasov@gmail.com>
Date: Mon, 2 Nov 2020 11:45:10 +0100
Subject: [PATCH 16/22] Update
 docs/src/pages/components/data-grid/columns/columns.md

Co-authored-by: Matt <github@nospam.33m.co>
---
 docs/src/pages/components/data-grid/columns/columns.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index 14d78c50f29a..b92d069f459f 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -61,7 +61,7 @@ The first column will be 200px wide, leaving 300px remaining. The column with `f
 
 Note that `flex` doesn't work together with `width`. If you set both `flex` and `width` in `ColDef`, `flex` will override `width`.
 
-The `flex` configuration does not work if the combined width of the columns that have `width` is more than the width of the grid itself. If that is the case a scroll bar will be visible and the columns that hava `flex` will default back to their base value of 100 pixels.
+In addition, `flex` does not work if the combined width of the columns that have `width` is more than the width of the grid itself. If that is the case a scroll bar will be visible and the columns that have `flex` will default back to their base value of 100px.
 
 {{"demo": "pages/components/data-grid/columns/ColumnFluidWidthGrid.js", "bg": "inline"}}
 

From b358751299f3afdb8b9b597bce25793d9493cbcc Mon Sep 17 00:00:00 2001
From: Danail Hadjiatanasov <hadjiatanasov@gmail.com>
Date: Mon, 2 Nov 2020 11:45:21 +0100
Subject: [PATCH 17/22] Update packages/grid/data-grid/src/DataGrid.test.tsx

Co-authored-by: Matt <github@nospam.33m.co>
---
 packages/grid/data-grid/src/DataGrid.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx
index 649f26d5a47a..56824e0486f0 100644
--- a/packages/grid/data-grid/src/DataGrid.test.tsx
+++ b/packages/grid/data-grid/src/DataGrid.test.tsx
@@ -258,7 +258,7 @@ describe('<DataGrid />', () => {
       });
     });
 
-    it('should set the first column width to be twise as bit as the second one', () => {
+    it('should set the first column to be twice as wide as the second one', () => {
       const rows = [
         {
           id: 1,

From 221956471e81d5d6414a80fd2c287253fe164a70 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Mon, 2 Nov 2020 12:23:28 +0100
Subject: [PATCH 18/22] Fix storybook flex col width examples

---
 packages/grid/data-grid/src/DataGrid.test.tsx |   8 +-
 .../src/stories/grid-columns.stories.tsx      |  51 +++++++
 .../src/stories/grid-fluid.stories.tsx        | 126 ------------------
 3 files changed, 55 insertions(+), 130 deletions(-)
 delete mode 100644 packages/storybook/src/stories/grid-fluid.stories.tsx

diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx
index 56824e0486f0..448f1e5e78b5 100644
--- a/packages/grid/data-grid/src/DataGrid.test.tsx
+++ b/packages/grid/data-grid/src/DataGrid.test.tsx
@@ -207,13 +207,13 @@ describe('<DataGrid />', () => {
         },
       ];
 
-      render(
+      const { getAllByRole } = render(
         <div style={{ width: 300, height: 300 }}>
           <DataGrid columns={columns} rows={rows} />
         </div>,
       );
 
-      const DOMColumns = document.querySelectorAll('.MuiDataGrid-colCell');
+      const DOMColumns = getAllByRole('columnheader');
       DOMColumns.forEach((col) => {
         // @ts-expect-error need to migrate helpers to TypeScript
         expect(col).toHaveInlineStyle({ width: '100px' });
@@ -245,13 +245,13 @@ describe('<DataGrid />', () => {
         },
       ];
 
-      render(
+      const { getAllByRole } = render(
         <div style={{ width: 300, height: 300 }}>
           <DataGrid columns={columns} rows={rows} />
         </div>,
       );
 
-      const DOMColumns = document.querySelectorAll('.MuiDataGrid-colCell');
+      const DOMColumns = getAllByRole('columnheader');
       DOMColumns.forEach((col, index) => {
         // @ts-expect-error need to migrate helpers to TypeScript
         expect(col).toHaveInlineStyle({ width: `${colWidthValues[index]}px` });
diff --git a/packages/storybook/src/stories/grid-columns.stories.tsx b/packages/storybook/src/stories/grid-columns.stories.tsx
index 04499fee39c8..462d60b3100d 100644
--- a/packages/storybook/src/stories/grid-columns.stories.tsx
+++ b/packages/storybook/src/stories/grid-columns.stories.tsx
@@ -221,3 +221,54 @@ export function NewColumnTypes() {
     </div>
   );
 }
+
+export const FewFlexColumns = () => {
+  const data = useData(20, 3);
+  const transformColSizes = React.useCallback(
+    (columns: ColDef[]) =>
+      columns.map((col, index) =>
+        index % 2 === 0 ? { ...col, flex: index + 1 } : { ...col, width: 200 },
+      ),
+    [],
+  );
+
+  return (
+    <div className="grid-container">
+      <XGrid rows={data.rows} columns={transformColSizes(data.columns)} />
+    </div>
+  );
+};
+
+export const SeveralFlexColumn = () => {
+  const data = useData(20, 7);
+  const transformColSizes = React.useCallback(
+    (columns: ColDef[]) =>
+      columns.map((col, index) =>
+        index % 3 !== 0 ? { ...col, flex: index } : { ...col, flex: 1 },
+      ),
+    [],
+  );
+
+  return (
+    <div className="grid-container">
+      <XGrid rows={data.rows} columns={transformColSizes(data.columns)} />
+    </div>
+  );
+};
+
+export const FlexColumnWidth2000 = () => {
+  const data = useData(20, 3);
+  const transformColSizes = React.useCallback(
+    (columns: ColDef[]) =>
+      columns.map((col, index) =>
+        index % 2 !== 0 ? { ...col, width: 2000 } : { ...col, flex: index + 1 },
+      ),
+    [],
+  );
+
+  return (
+    <div className="grid-container">
+      <XGrid rows={data.rows} columns={transformColSizes(data.columns)} />
+    </div>
+  );
+};
diff --git a/packages/storybook/src/stories/grid-fluid.stories.tsx b/packages/storybook/src/stories/grid-fluid.stories.tsx
deleted file mode 100644
index b359c2f39efb..000000000000
--- a/packages/storybook/src/stories/grid-fluid.stories.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import * as React from 'react';
-import { XGrid } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
-import { withA11y } from '@storybook/addon-a11y';
-import '../style/grid-stories.css';
-
-export default {
-  title: 'X-Grid Tests/Fluid Column Width',
-  component: XGrid,
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    options: { selectedPanel: 'storybook/storysource/panel' },
-    docs: {
-      page: null,
-    },
-  },
-};
-export const FewColumns = () => {
-  const rows = [
-    {
-      id: 1,
-      '2M': '2',
-      '3M': '3',
-    },
-  ];
-  const columns = [
-    {
-      field: 'id',
-      flex: 3,
-    },
-    {
-      field: '2M',
-      width: 200,
-    },
-    {
-      field: '3M',
-      flex: 1,
-    },
-  ];
-
-  return (
-    <div className="grid-container">
-      <XGrid rows={rows} columns={columns} />
-    </div>
-  );
-};
-
-export const SeveralColumn = () => {
-  const rows = [
-    {
-      id: 1,
-      '2M': '2',
-      '3M': '3',
-      '4M': '4',
-      '5M': '5',
-      '6M': '6',
-      '7M': '7',
-    },
-  ];
-  const columns = [
-    {
-      field: 'id',
-      flex: 3,
-    },
-    {
-      field: '2M',
-      width: 200,
-    },
-    {
-      field: '3M',
-      flex: 1,
-    },
-    {
-      field: '4M',
-      flex: 1,
-    },
-    {
-      field: '5M',
-      flex: 2,
-    },
-    {
-      field: '6M',
-      flex: 1,
-    },
-    {
-      field: '7M',
-      flex: 1,
-    },
-  ];
-
-  return (
-    <div className="grid-container">
-      <XGrid rows={rows} columns={columns} />
-    </div>
-  );
-};
-
-export const FlexWithColumnWidth2000 = () => {
-  const rows = [
-    {
-      id: 1,
-      '2M': '2',
-      '3M': '3',
-    },
-  ];
-  const columns = [
-    {
-      field: 'id',
-      flex: 3,
-    },
-    {
-      field: '2M',
-      width: 2000,
-    },
-    {
-      field: '3M',
-      flex: 1,
-    },
-  ];
-
-  return (
-    <div className="grid-container">
-      <XGrid rows={rows} columns={columns} />
-    </div>
-  );
-};

From 401b7eda53b8c49cc07345ba25c1449dbb5da79c Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 2 Nov 2020 14:13:37 +0100
Subject: [PATCH 19/22] rerun ci


From 2bd46a05aa0f3461031c01d1ed8b6512b3a04f79 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Mon, 2 Nov 2020 14:47:44 +0100
Subject: [PATCH 20/22] Fix formatting

---
 docs/src/pages/components/data-grid/columns/columns.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index b92d069f459f..abb55ad1fd9c 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -55,8 +55,8 @@ Each column has a fixed width of 100 pixels by default, but column fluidity (res
 
 The `flex` property accepts a value between 0 and ∞.
 
-The `flex` property works by dividing the remaining space in the grid among all flex columns in proportion to their `flex` value. 
-For example, consider a grid with a total width of 500px that has three columns: the first with `width: 200`; the second with `flex: 1`; and third with `flex: 0.5`. 
+The `flex` property works by dividing the remaining space in the grid among all flex columns in proportion to their `flex` value.
+For example, consider a grid with a total width of 500px that has three columns: the first with `width: 200`; the second with `flex: 1`; and third with `flex: 0.5`.
 The first column will be 200px wide, leaving 300px remaining. The column with `flex: 1` is twice the size of `flex: 0.5`, which means that final sizes will be: 200px, 200px, 100px.
 
 Note that `flex` doesn't work together with `width`. If you set both `flex` and `width` in `ColDef`, `flex` will override `width`.

From 9672852acf4f16e44c3cf9fab0bdbb125c49c7e1 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Mon, 2 Nov 2020 19:58:44 +0000
Subject: [PATCH 21/22] Update
 docs/src/pages/components/data-grid/columns/columns.md

---
 docs/src/pages/components/data-grid/columns/columns.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/data-grid/columns/columns.md b/docs/src/pages/components/data-grid/columns/columns.md
index abb55ad1fd9c..f8c112880071 100644
--- a/docs/src/pages/components/data-grid/columns/columns.md
+++ b/docs/src/pages/components/data-grid/columns/columns.md
@@ -61,7 +61,7 @@ The first column will be 200px wide, leaving 300px remaining. The column with `f
 
 Note that `flex` doesn't work together with `width`. If you set both `flex` and `width` in `ColDef`, `flex` will override `width`.
 
-In addition, `flex` does not work if the combined width of the columns that have `width` is more than the width of the grid itself. If that is the case a scroll bar will be visible and the columns that have `flex` will default back to their base value of 100px.
+In addition, `flex` does not work if the combined width of the columns that have `width` is more than the width of the grid itself. If that is the case a scroll bar will be visible, and the columns that have `flex` will default back to their base value of 100px.
 
 {{"demo": "pages/components/data-grid/columns/ColumnFluidWidthGrid.js", "bg": "inline"}}
 

From d300dfea16437badb51c519689949216555a0124 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Tue, 3 Nov 2020 12:56:33 +0100
Subject: [PATCH 22/22] Trigger CI