[DataGridPro] Autosize columns

docs/data/data-grid/column-dimensions/ColumnAutosizing.js

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Button, Checkbox, FormControlLabel, Stack, TextField } from '@mui/material';
+import { useGridApiRef } from '@mui/x-data-grid';
+import { DataGridPro, DEFAULT_GRID_AUTOSIZE_OPTIONS } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function ColumnAutosizing() {
+  const apiRef = useGridApiRef();
+  const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 1000 });
+  const [sampleLength, setSampleLength] = React.useState(
+    DEFAULT_GRID_AUTOSIZE_OPTIONS.sampleLength,
+  );
+  const [includeHeaders, setIncludeHeaders] = React.useState(
+    DEFAULT_GRID_AUTOSIZE_OPTIONS.includeHeaders,
+  );
+  const [excludeOutliers, setExcludeOutliers] = React.useState(
+    DEFAULT_GRID_AUTOSIZE_OPTIONS.excludeOutliers,
+  );
+  const [outliersFactor, setOutliersFactor] = React.useState(
+    DEFAULT_GRID_AUTOSIZE_OPTIONS.outliersFactor,
+  );
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Stack
+        spacing={2}
+        direction="row"
+        alignItems="center"
+        sx={{ marginBottom: '1em' }}
+      >
+        <div>
+          <Button
+            variant="outlined"
+            onClick={() =>
+              apiRef.current.autosizeColumns({
+                sampleLength,
+                includeHeaders,
+                excludeOutliers,
+                outliersFactor,
+              })
+            }
+          >
+            Autosize columns
+          </Button>
+        </div>
+        <TextField
+          inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
+          label="Sample length"
+          value={sampleLength}
+          onChange={(ev) => setSampleLength(parseInt(ev.target.value))}
+          sx={{ width: '12ch' }}
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={includeHeaders}
+              onChange={(ev) => setIncludeHeaders(ev.target.checked)}
+            />
+          }
+          label="Include headers"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={excludeOutliers}
+              onChange={(ev) => setExcludeOutliers(ev.target.checked)}
+            />
+          }
+          label="Exclude outliers"
+        />
+        <TextField
+          inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
+          label="Outliers factor"
+          value={outliersFactor}
+          onChange={(ev) => setOutliersFactor(parseInt(ev.target.value))}
+          sx={{ width: '12ch' }}
+        />
+      </Stack>
+      <div style={{ height: 400, width: '100%' }}>
+        <DataGridPro apiRef={apiRef} density="compact" {...data} />
+      </div>
+    </div>
+  );
+}

docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { Button, Checkbox, FormControlLabel, Stack, TextField } from '@mui/material';
+import { useGridApiRef } from '@mui/x-data-grid';
+import {
+  DataGridPro,
+  GridApiPro,
+  DEFAULT_GRID_AUTOSIZE_OPTIONS,
+} from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function ColumnAutosizing() {
+  const apiRef = useGridApiRef<GridApiPro>();
+  const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 1000 });
+  const [sampleLength, setSampleLength] = React.useState(
+    DEFAULT_GRID_AUTOSIZE_OPTIONS.sampleLength,
+  );
+  const [includeHeaders, setIncludeHeaders] = React.useState(
+    DEFAULT_GRID_AUTOSIZE_OPTIONS.includeHeaders,
+  );
+  const [excludeOutliers, setExcludeOutliers] = React.useState(
+    DEFAULT_GRID_AUTOSIZE_OPTIONS.excludeOutliers,
+  );
+  const [outliersFactor, setOutliersFactor] = React.useState(
+    DEFAULT_GRID_AUTOSIZE_OPTIONS.outliersFactor,
+  );
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Stack
+        spacing={2}
+        direction="row"
+        alignItems="center"
+        sx={{ marginBottom: '1em' }}
+      >
+        <div>
+          <Button
+            variant="outlined"
+            onClick={() =>
+              apiRef.current.autosizeColumns({
+                sampleLength,
+                includeHeaders,
+                excludeOutliers,
+                outliersFactor,
+              })
+            }
+          >
+            Autosize columns
+          </Button>
+        </div>
+        <TextField
+          inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
+          label="Sample length"
+          value={sampleLength}
+          onChange={(ev) => setSampleLength(parseInt(ev.target.value))}
+          sx={{ width: '12ch' }}
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={includeHeaders}
+              onChange={(ev) => setIncludeHeaders(ev.target.checked)}
+            />
+          }
+          label="Include headers"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={excludeOutliers}
+              onChange={(ev) => setExcludeOutliers(ev.target.checked)}
+            />
+          }
+          label="Exclude outliers"
+        />
+        <TextField
+          inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
+          label="Outliers factor"
+          value={outliersFactor}
+          onChange={(ev) => setOutliersFactor(parseInt(ev.target.value))}
+          sx={{ width: '12ch' }}
+        />
+      </Stack>
+      <div style={{ height: 400, width: '100%' }}>
+        <DataGridPro apiRef={apiRef} density="compact" {...data} />
+      </div>
+    </div>
+  );
+}

docs/data/data-grid/column-dimensions/column-dimensions.md

@@ -58,6 +58,14 @@ To capture changes in the width of a column there are two callbacks that are cal
 - `onColumnResize`: Called while a column is being resized.
 - `onColumnWidthChange`: Called after the width of a column is changed, but not during resizing.
 
+## Autosizing [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+
+The `DataGridPro` also allows for auto-sizing the columns' dimensions based on their content. Be aware that it can only
+calculate the column widths of a limited set of rows, namely those that are currently rendered by the virtualization
+engine.
+
+{{"demo": "ColumnAutosizing.js", "disableAd": true, "bg": "inline"}}
+
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -1062,6 +1062,7 @@
       "aggregationColumnHeader--alignRight",
       "aggregationColumnHeaderLabel",
       "autoHeight",
+      "autosizing",
       "booleanCell",
       "cell--editable",
       "cell--editing",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -983,6 +983,7 @@
       "aggregationColumnHeader--alignRight",
       "aggregationColumnHeaderLabel",
       "autoHeight",
+      "autosizing",
       "booleanCell",
       "cell--editable",
       "cell--editing",

docs/pages/x/api/data-grid/data-grid.json

@@ -840,6 +840,7 @@
       "aggregationColumnHeader--alignRight",
       "aggregationColumnHeaderLabel",
       "autoHeight",
+      "autosizing",
       "booleanCell",
       "cell--editable",
       "cell--editing",

docs/pages/x/api/data-grid/grid-api.md

@@ -27,6 +27,7 @@ import { GridApi } from '@mui/x-data-grid';
 | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | <span class="prop-name">addRowGroupingCriteria [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span>           | <span class="prop-type">(groupingCriteriaField: string, groupingIndex?: number) =&gt; void</span>                                                                                                        | Adds the field to the row grouping model.                                                                                                                                                                                       |
 | <span class="prop-name">applySorting</span>                                                                                                                        | <span class="prop-type">() =&gt; void</span>                                                                                                                                                             | Applies the current sort model to the rows.                                                                                                                                                                                     |
+| <span class="prop-name">autosizeColumns [<span class="plan-pro" title="Pro plan"></span>](/x/introduction/licensing/#pro-plan)</span>                              | <span class="prop-type">(options?: { columns?: GridColDef[]; includeHeader?: boolean }) =&gt; Promise&lt;void&gt;</span>                                                                                 | Auto-size the columns of the grid based on the cells' content and the space available.                                                                                                                                          |
 | <span class="prop-name">deleteFilterItem</span>                                                                                                                    | <span class="prop-type">(item: GridFilterItem) =&gt; void</span>                                                                                                                                         | Deletes a [GridFilterItem](/x/api/data-grid/grid-filter-item/).                                                                                                                                                                 |
 | <span class="prop-name">exportDataAsCsv</span>                                                                                                                     | <span class="prop-type">(options?: GridCsvExportOptions) =&gt; void</span>                                                                                                                               | Downloads and exports a CSV of the grid's data.                                                                                                                                                                                 |
 | <span class="prop-name">exportDataAsExcel [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span>                | <span class="prop-type">(options?: GridExcelExportOptions) =&gt; Promise&lt;void&gt;</span>                                                                                                              | Downloads and exports an Excel file of the grid's data.                                                                                                                                                                         |

docs/translations/api-docs/data-grid/data-grid-premium.json

@@ -972,6 +972,10 @@
       "nodeName": "the root element",
       "conditions": "<code>autoHeight={true}</code>"
     },
+    "autosizing": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the cell element while it is being autosized"
+    },
     "booleanCell": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the icon of the boolean cell"

docs/translations/api-docs/data-grid/data-grid-pro.json

@@ -870,6 +870,10 @@
       "nodeName": "the root element",
       "conditions": "<code>autoHeight={true}</code>"
     },
+    "autosizing": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the cell element while it is being autosized"
+    },
     "booleanCell": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the icon of the boolean cell"

docs/translations/api-docs/data-grid/data-grid.json

@@ -670,6 +670,10 @@
       "nodeName": "the root element",
       "conditions": "<code>autoHeight={true}</code>"
     },
+    "autosizing": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the cell element while it is being autosized"
+    },
     "booleanCell": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the icon of the boolean cell"

packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts

@@ -2,6 +2,7 @@ import { GridPrivateOnlyApiCommon } from '@mui/x-data-grid/internals';
 import {
   GridApiCommon,
   GridColumnPinningApi,
+  GridColumnResizeApi,
   GridDetailPanelApi,
   GridDetailPanelPrivateApi,
   GridRowPinningApi,
@@ -21,6 +22,7 @@ export interface GridApiPremium
   extends GridApiCommon<GridStatePremium, GridInitialStatePremium>,
     GridRowProApi,
     GridColumnPinningApi,
+    GridColumnResizeApi,
     GridDetailPanelApi,
     GridRowGroupingApi,
     GridExcelExportApi,
@@ -29,8 +31,7 @@ export interface GridApiPremium
     GridCellSelectionApi,
     // APIs that are private in Community plan, but public in Pro and Premium plans
     GridRowMultiSelectionApi,
-    GridColumnReorderApi,
-    GridRowProApi {}
+    GridColumnReorderApi {}
 
 export interface GridPrivateApiPremium
   extends GridApiPremium,

packages/grid/x-data-grid-pro/src/hooks/features/columnResize/gridColumnResizeApi.ts

@@ -0,0 +1,46 @@
+import { GridColDef } from '@mui/x-data-grid';
+
+export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
+  sampleLength: 40,
+  includeHeaders: false,
+  excludeOutliers: false,
+  outliersFactor: 1.5,
+};
+
+export type GridAutosizeOptions = {
+  /**
+   * The columns to autosize. By default, applies to all columns.
+   */
+  columns?: GridColDef[];
+  /**
+   * The amount of rows to sample when calculating widths. Note that this amount of rows will
+   * be rendered to the DOM, so increading this value might have a noticeable performance impact.
+   * @default 50
+   */
+  sampleLength?: number;
+  /**
+   * If true, include the header widths in the calculation
+   * @default false
+   */
+  includeHeaders?: boolean;
+  /**
+   * If true, width outliers will be ignored.
+   * @default false
+   */
+  excludeOutliers?: boolean;
+  /**
+   * The IQR factor range to detect outliers.
+   * @default 1.5
+   */
+  outliersFactor?: number;
+};
+
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */
+export interface GridColumnResizeApi {
+  /**
+   * Auto-size the columns of the grid based on the cells' content and the space available.
+   */
+  autosizeColumns: (options?: GridAutosizeOptions) => Promise<void>;
+}

packages/grid/x-data-grid-pro/src/hooks/features/columnResize/index.ts

@@ -1,2 +1,3 @@
 export * from './columnResizeSelector';
 export * from './columnResizeState';
+export * from './gridColumnResizeApi';