From e3042668d82443bcad0f68e513965d06b2a36c2e Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Tue, 6 Feb 2024 14:49:28 -0300 Subject: [PATCH] [docs][Data Grid] Add quick fixes to the migration guide (#11806) Co-authored-by: Andrew Cherniavskii --- .../migration-data-grid-v6.md | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 8ec34302b4d7..80cd8e720821 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -61,12 +61,13 @@ You can either run it on a specific file, folder, or your entire codebase when c ```bash // Data Grid specific npx @mui/x-codemod@next v7.0.0/data-grid/preset-safe + // Target other MUI X components as well npx @mui/x-codemod@next v7.0.0/preset-safe ``` :::info -If you want to run the codemods one by one, check out the codemods included in the [preset-safe codemod for data grid](https://github.com/mui/mui-x/blob/HEAD/packages/x-codemod/README.md#preset-safe-for-data-grid-v700) for more details. +If you want to run the codemods one by one, check out the codemods included in the [preset-safe codemod for the Data Grid](https://github.com/mui/mui-x/blob/HEAD/packages/x-codemod/README.md#preset-safe-for-data-grid-v700) for more details. ::: Breaking changes that are handled by `preset-safe` codemod are denoted by a ✅ emoji in the table of contents on the right side of the screen or next to the specific point that is handled by it. @@ -97,7 +98,8 @@ Below are described the steps you need to make to migrate from v6 to v7. ### DOM changes -The layout of the grid has been substantially altered to use CSS sticky positioned elements. As a result, the following changes have been made: +The Data Grid's layout has been substantially altered to use CSS sticky positioned elements. +As a result, the following changes have been made: - The main element now corresponds to the virtal scroller element. - Headers are now contained in the virtual scroller. @@ -134,24 +136,28 @@ The layout of the grid has been substantially altered to use CSS sticky position ### Behavioral changes -- The disabled column specific features like `hiding`, `sorting`, `filtering`, `pinning`, `row grouping`, etc could now be controlled programmatically using `initialState`, respective controlled models, or the [API object](/x/react-data-grid/api-object/). +The disabled column specific features like `hiding`, `sorting`, `filtering`, `pinning`, `row grouping`, etc., can now be controlled programmatically using `initialState`, respective controlled models, or the [API object](/x/react-data-grid/api-object/). -Here's the list of affected features, colDef flags and props to disable them and the related props and API methods to control them programmatically. +Here's the list of affected features, column definition flags and props to disable them, and the related props and API methods to control them programmatically. {{"demo": "ColDefChangesGridNoSnap.js", "bg": "inline", "hideToolbar": true}} ### State access -- Some selectors now require passing `instanceId` as a second argument: - ```diff - - gridColumnFieldsSelector(apiRef.current.state); - + gridColumnFieldsSelector(apiRef.current.state, apiRef.current.instanceId); - ``` - However, it's preferable to pass the `apiRef` as the first argument instead: - ```js - gridColumnFieldsSelector(apiRef); - ``` - See [Direct state access](/x/react-data-grid/state/#direct-selector-access) for more info. +Some selectors now require passing `instanceId` as a second argument: + +```diff +- gridColumnFieldsSelector(apiRef.current.state); ++ gridColumnFieldsSelector(apiRef.current.state, apiRef.current.instanceId); +``` + +However, it's preferable to pass the `apiRef` as the first argument instead: + +```js +gridColumnFieldsSelector(apiRef); +``` + +See the [Direct state access](/x/react-data-grid/state/#direct-selector-access) page for more info. | +- You can now style a row's hover state using just `:hover` instead of `.Mui-hovered`. +- The `.MuiDataGrid--pinnedColumns-(left\|right)` class for pinned columns has been removed. ### Changes to the public API