[DataGrid] Make column resizing and autosizing available in Community…

… plan (#12420)
mui · Mar 12, 2024 · b721c3d · b721c3d
1 parent 88d5387
commit b721c3d
Show file tree

Hide file tree

Showing 40 changed files with 377 additions and 127 deletions.
diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.js b/docs/data/data-grid/column-dimensions/ColumnAutosizing.js
@@ -5,8 +5,11 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Rating from '@mui/material/Rating';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
-import { useGridApiRef } from '@mui/x-data-grid';
-import { DataGridPro, DEFAULT_GRID_AUTOSIZE_OPTIONS } from '@mui/x-data-grid-pro';
+import {
+  DataGrid,
+  useGridApiRef,
+  DEFAULT_GRID_AUTOSIZE_OPTIONS,
+} from '@mui/x-data-grid';
 import { randomRating, randomTraderName } from '@mui/x-data-grid-generator';
 
 function renderRating(params) {
@@ -127,7 +130,7 @@ export default function ColumnAutosizing() {
         />
       </Stack>
       <div style={{ height: 400, width: '100%' }}>
-        <DataGridPro
+        <DataGrid
           apiRef={apiRef}
           density="compact"
           {...data}

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx
@@ -5,12 +5,11 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Rating from '@mui/material/Rating';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
-import { useGridApiRef } from '@mui/x-data-grid';
 import {
-  DataGridPro,
-  GridApiPro,
+  DataGrid,
+  useGridApiRef,
   DEFAULT_GRID_AUTOSIZE_OPTIONS,
-} from '@mui/x-data-grid-pro';
+} from '@mui/x-data-grid';
 import { randomRating, randomTraderName } from '@mui/x-data-grid-generator';
 
 function renderRating(params: any) {
@@ -52,7 +51,7 @@ function useData(length: number) {
 }
 
 export default function ColumnAutosizing() {
-  const apiRef = useGridApiRef<GridApiPro>();
+  const apiRef = useGridApiRef();
   const data = useData(100);
 
   const [includeHeaders, setIncludeHeaders] = React.useState(
@@ -130,7 +129,7 @@ export default function ColumnAutosizing() {
         />
       </Stack>
       <div style={{ height: 400, width: '100%' }}>
-        <DataGridPro
+        <DataGrid
           apiRef={apiRef}
           density="compact"
           {...data}

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js
@@ -2,8 +2,7 @@ import * as React from 'react';
 import Button from '@mui/material/Button';
 import Rating from '@mui/material/Rating';
 import Stack from '@mui/material/Stack';
-import { useGridApiRef } from '@mui/x-data-grid';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
 import {
   randomInt,
   randomRating,

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import Button from '@mui/material/Button';
 import Rating from '@mui/material/Rating';
 import Stack from '@mui/material/Stack';
-import { useGridApiRef } from '@mui/x-data-grid';
-import { DataGridPro, GridApiPro, GridColDef } from '@mui/x-data-grid-pro';
+import { DataGridPro, useGridApiRef, GridColDef } from '@mui/x-data-grid-pro';
 import {
   randomInt,
   randomRating,
@@ -53,7 +52,7 @@ function getFakeData(length: number): Promise<{ rows: GridData['rows'] }> {
 }
 
 export default function ColumnAutosizingAsync() {
-  const apiRef = useGridApiRef<GridApiPro>();
+  const apiRef = useGridApiRef();
   const [isLoading, setIsLoading] = React.useState(false);
   const [rows] = React.useState([]);
 

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Button from '@mui/material/Button';
-import { DataGridPro, gridClasses, useGridApiRef } from '@mui/x-data-grid-pro';
+import { DataGrid, gridClasses, useGridApiRef } from '@mui/x-data-grid';
 import { randomInt, randomArrayItem } from '@mui/x-data-grid-generator';
 
 const lines = [
@@ -46,7 +46,7 @@ export default function ColumnAutosizingDynamicRowHeight() {
         Autosize Columns
       </Button>
       <div style={{ height: 400, width: '100%' }}>
-        <DataGridPro
+        <DataGrid
           apiRef={apiRef}
           rows={rows}
           columns={columns}

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import Button from '@mui/material/Button';
 import {
-  DataGridPro,
+  DataGrid,
   GridColDef,
   gridClasses,
   useGridApiRef,
   GridAutosizeOptions,
-} from '@mui/x-data-grid-pro';
+} from '@mui/x-data-grid';
 import { randomInt, randomArrayItem } from '@mui/x-data-grid-generator';
 
 const lines = [
@@ -52,7 +52,7 @@ export default function ColumnAutosizingDynamicRowHeight() {
         Autosize Columns
       </Button>
       <div style={{ height: 400, width: '100%' }}>
-        <DataGridPro
+        <DataGrid
           apiRef={apiRef}
           rows={rows}
           columns={columns}

diff --git a/docs/data/data-grid/column-dimensions/ColumnSizingGrid.js b/docs/data/data-grid/column-dimensions/ColumnSizingGrid.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGrid } from '@mui/x-data-grid';
 
 const rows = [
   {
@@ -12,7 +12,7 @@ const rows = [
 export default function ColumnSizingGrid() {
   return (
     <div style={{ height: 250, width: '100%' }}>
-      <DataGridPro
+      <DataGrid
         columns={[
           { field: 'id' },
           { field: 'username', width: 125, minWidth: 150, maxWidth: 200 },

diff --git a/docs/data/data-grid/column-dimensions/ColumnSizingGrid.tsx b/docs/data/data-grid/column-dimensions/ColumnSizingGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGrid } from '@mui/x-data-grid';
 
 const rows = [
   {
@@ -12,7 +12,7 @@ const rows = [
 export default function ColumnSizingGrid() {
   return (
     <div style={{ height: 250, width: '100%' }}>
-      <DataGridPro
+      <DataGrid
         columns={[
           { field: 'id' },
           { field: 'username', width: 125, minWidth: 150, maxWidth: 200 },

diff --git a/docs/data/data-grid/column-dimensions/ColumnSizingGrid.tsx.preview b/docs/data/data-grid/column-dimensions/ColumnSizingGrid.tsx.preview
@@ -1,4 +1,4 @@
-<DataGridPro
+<DataGrid
   columns={[
     { field: 'id' },
     { field: 'username', width: 125, minWidth: 150, maxWidth: 200 },

diff --git a/docs/data/data-grid/column-dimensions/column-dimensions.md b/docs/data/data-grid/column-dimensions/column-dimensions.md
@@ -40,9 +40,9 @@ Before using fluid width, note that:
 
 {{"demo": "ColumnFluidWidthGrid.js", "bg": "inline"}}
 
-## Resizing [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+## Resizing
 
-By default, `DataGridPro` allows all columns to be resized by dragging the right portion of the column separator.
+By default, Data Grid allows all columns to be resized by dragging the right portion of the column separator.
 
 To prevent the resizing of a column, set `resizable: false` in the `GridColDef`.
 Alternatively, to disable all columns resize, set the prop `disableColumnResize={true}`.
@@ -58,9 +58,9 @@ 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')
+## Autosizing
 
-`DataGridPro` allows to autosize the columns' dimensions based on their content. Autosizing is enabled by default. To turn it off, pass the `disableAutosize` prop to the datagrid.
+Data Grid allows to autosize the columns' dimensions based on their content. Autosizing is enabled by default. To turn it off, pass the `disableAutosize` prop to the Data Grid.
 
 Autosizing can be used by one of the following methods:
 
@@ -75,7 +75,7 @@ Note that for the separator double-click method, the `autosizeOptions.columns` w
 In all the cases, the `colDef.minWidth` and `colDef.maxWidth` options will be respected.
 
 ```tsx
-<DataGridPro
+<DataGrid
   {...otherProps}
   autosizeOptions={{
     columns: ['name', 'status', 'createdBy'],
@@ -88,12 +88,12 @@ In all the cases, the `colDef.minWidth` and `colDef.maxWidth` options will be re
 {{"demo": "ColumnAutosizing.js", "disableAd": true, "bg": "inline"}}
 
 :::warning
-The data grid can only autosize based on the currently rendered cells.
+The Data Grid can only autosize based on the currently rendered cells.
 
 DOM access is required to accurately calculate dimensions, so unmounted cells (when [virtualization](/x/react-data-grid/virtualization/) is on) cannot be sized. If you need a bigger row sample, [open an issue](https://github.com/mui/mui-x/issues) to discuss it further.
 :::
 
-### Autosizing asynchronously [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+### Autosizing asynchronously
 
 The `autosizeColumns` method from the `apiRef` can be used as well to adjust the column size on specified events, for example when receiving row data from the server.
 

diff --git a/docs/data/data-grid/overview/overview.md b/docs/data/data-grid/overview/overview.md
@@ -74,6 +74,8 @@ Please see [the Licensing page](/x/introduction/licensing/) for details.
 - Built with and exclusively for React ⚛️
 - High performance 🚀
 - [Column groups](/x/react-data-grid/column-groups/)
+- [Column resizing](/x/react-data-grid/column-dimensions/#resizing)
+- [Column autosizing](/x/react-data-grid/column-dimensions/#autosizing)
 - [Filtering](/x/react-data-grid/filtering/), [multi-filters](/x/react-data-grid/filtering/multi-filters/) <span class="plan-pro"></span>, and [header filters](/x/react-data-grid/filtering/header-filters/) <span class="plan-pro"></span>
 - [Pagination](/x/react-data-grid/pagination/)
 - [Row & Cell editing](/x/react-data-grid/editing/)
@@ -86,7 +88,6 @@ Please see [the Licensing page](/x/introduction/licensing/) for details.
 - [Excel export](/x/react-data-grid/export/#excel-export) <span class="plan-premium"></span>
 - [Tree data](/x/react-data-grid/tree-data/) <span class="plan-pro"></span>
 - [Master detail](/x/react-data-grid/master-detail/) <span class="plan-pro"></span>
-- [Resizable columns](/x/react-data-grid/column-dimensions/#resizing) <span class="plan-pro"></span>
 - [100% customizable](/x/react-data-grid/style/)
 - Server-side data
 - [Column hiding](/x/react-data-grid/column-visibility/)

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -13,6 +13,13 @@
     "aria-labelledby": { "type": { "name": "string" } },
     "autoHeight": { "type": { "name": "bool" }, "default": "false" },
     "autoPageSize": { "type": { "name": "bool" }, "default": "false" },
+    "autosizeOnMount": { "type": { "name": "bool" }, "default": "false" },
+    "autosizeOptions": {
+      "type": {
+        "name": "shape",
+        "description": "{ columns?: Array&lt;string&gt;, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }"
+      }
+    },
     "cellModesModel": { "type": { "name": "object" } },
     "checkboxSelection": { "type": { "name": "bool" }, "default": "false" },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
@@ -28,8 +35,10 @@
       },
       "default": "\"standard\""
     },
+    "disableAutosize": { "type": { "name": "bool" }, "default": "false" },
     "disableColumnFilter": { "type": { "name": "bool" }, "default": "false" },
     "disableColumnMenu": { "type": { "name": "bool" }, "default": "false" },
+    "disableColumnResize": { "type": { "name": "bool" }, "default": "false" },
     "disableColumnSelector": { "type": { "name": "bool" }, "default": "false" },
     "disableColumnSorting": { "type": { "name": "bool" }, "default": "false" },
     "disableDensitySelector": { "type": { "name": "bool" }, "default": "false" },
@@ -248,13 +257,27 @@
         "describedArgs": ["params", "event", "details"]
       }
     },
+    "onColumnResize": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void",
+        "describedArgs": ["params", "event", "details"]
+      }
+    },
     "onColumnVisibilityModelChange": {
       "type": { "name": "func" },
       "signature": {
         "type": "function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void",
         "describedArgs": ["model", "details"]
       }
     },
+    "onColumnWidthChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void",
+        "describedArgs": ["params", "event", "details"]
+      }
+    },
     "onFilterModelChange": {
       "type": { "name": "func" },
       "signature": {

diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md
@@ -27,7 +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?: GridAutosizeOptions) =&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">autosizeColumns</span>                                                                                                                | <span class="prop-type">(options?: GridAutosizeOptions) =&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.                                                                                                                                                                         |

diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -14,6 +14,10 @@
     "autoPageSize": {
       "description": "If <code>true</code>, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar."
     },
+    "autosizeOnMount": {
+      "description": "If <code>true</code>, columns are autosized after the datagrid is mounted."
+    },
+    "autosizeOptions": { "description": "The options for autosize when user-initiated." },
     "cellModesModel": { "description": "Controls the modes of the cells." },
     "checkboxSelection": {
       "description": "If <code>true</code>, the Data Grid will display an extra column with checkboxes for selecting rows."
@@ -38,8 +42,12 @@
       "description": "Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the <code>hide</code> property in <a href='/x/api/data-grid/grid-col-def/'>GridColDef</a>."
     },
     "density": { "description": "Set the density of the Data Grid." },
+    "disableAutosize": {
+      "description": "If <code>true</code>, column autosizing on header separator double-click is disabled."
+    },
     "disableColumnFilter": { "description": "If <code>true</code>, column filters are disabled." },
     "disableColumnMenu": { "description": "If <code>true</code>, the column menu is disabled." },
+    "disableColumnResize": { "description": "If <code>true</code>, resizing columns is disabled." },
     "disableColumnSelector": {
       "description": "If <code>true</code>, hiding/showing columns is disabled."
     },
@@ -264,13 +272,29 @@
         "details": "Additional details for this callback."
       }
     },
+    "onColumnResize": {
+      "description": "Callback fired while a column is being resized.",
+      "typeDescriptions": {
+        "params": "With all properties from GridColumnResizeParams.",
+        "event": "The event object.",
+        "details": "Additional details for this callback."
+      }
+    },
     "onColumnVisibilityModelChange": {
       "description": "Callback fired when the column visibility model changes.",
       "typeDescriptions": {
         "model": "The new model.",
         "details": "Additional details for this callback."
       }
     },
+    "onColumnWidthChange": {
+      "description": "Callback fired when the width of a column is changed.",
+      "typeDescriptions": {
+        "params": "With all properties from GridColumnResizeParams.",
+        "event": "The event object.",
+        "details": "Additional details for this callback."
+      }
+    },
     "onFilterModelChange": {
       "description": "Callback fired when the Filter model changes before the filters are applied.",
       "typeDescriptions": {

diff --git a/packages/x-data-grid-premium/src/models/gridApiPremium.ts b/packages/x-data-grid-premium/src/models/gridApiPremium.ts
@@ -2,7 +2,6 @@ import { GridPrivateOnlyApiCommon } from '@mui/x-data-grid/internals';
 import {
   GridApiCommon,
   GridColumnPinningApi,
-  GridColumnResizeApi,
   GridDetailPanelApi,
   GridDetailPanelPrivateApi,
   GridRowPinningApi,
@@ -23,7 +22,6 @@ export interface GridApiPremium
   extends GridApiCommon<GridStatePremium, GridInitialStatePremium>,
     GridRowProApi,
     GridColumnPinningApi,
-    GridColumnResizeApi,
     GridDetailPanelApi,
     GridRowGroupingApi,
     GridExcelExportApi,