[DataGrid] Add fluid columns width support

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>
+  );
+}

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>
+  );
+}

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.

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);

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],

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;