Codemod scripts for MUI X.
npm install @mui/x-codemod> Codemod scripts for MUI X
This repository contains a collection of codemod scripts based for use with
jscodeshift that help update MUI X APIs.
``bash
npx @mui/x-codemod@latest
Applies a @mui/x-codemod to the specified paths
Positionals:
codemod The name of the codemod [string]
paths Paths forwarded to jscodeshift [string]
Options:
--version Show version number [boolean]
--help Show help [boolean]
--parser which parser for jscodeshift to use.
[string] [default: 'tsx']
--jscodeshift Pass options directly to jscodeshift [array]
Examples:
npx @mui/x-codemod@latest v8.0.0/preset-safe src
npx @mui/x-codemod@latest v6.0.0/component-rename-prop src --
--component=DataGrid --from=prop --to=newProp
`
To pass more options directly to jscodeshift, use --jscodeshift=.... For example:
`bashsingle option
npx @mui/x-codemod --jscodeshift=--run-in-band
$3
Options to recast's printer can be provided
through jscodeshift's
command line argument`bash
npx @mui/x-codemod --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
`v8.0.0
$3
A combination of all important transformers for migrating v7 to v8.
⚠️ This codemod should be run only once.
It runs codemods for all MUI X packages (Data Grid, Date and Time Pickers, Tree View, and Charts).
To run codemods for a specific package, refer to the respective section.
bash
npx @mui/x-codemod@latest v8.0.0/preset-safe
`The corresponding sub-sections are listed below
-
-
- $3
####
for Tree View v8.0.0The
preset-safe codemods for Tree View.`bash
npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe
`The list includes these transformers
- ####
Renames the Tree View component to Simple Tree View
diff
-import { TreeView } from '@mui/x-tree-view';
+import { SimpleTreeView } from '@mui/x-tree-view';-import { TreeView } from '@mui/x-tree-view/TreeView';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
return (
-
+
-
+
);
`####
Renames the
component to TreeItem (same for any subcomponents or utils like useTreeItem2 or TreeItem2Icon).`diff
-import { TreeItem2 } from '@mui/x-tree-view';
+import { TreeItem } from '@mui/x-tree-view';-import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
`$3
####
for Charts v8.0.0The
preset-safe codemods for Charts.`bash
npx @mui/x-codemod@latest v8.0.0/charts/preset-safe
`The list includes these transformers
-
-
- ####
Renames legend props to the corresponding slotProps.
diff
+ slotProps={{ legend: { hiden: true} }}
/>
`####
Replace
and column values by horizontal and vertical respectively.`diff
legend: {
- direction: "row"
+ direction: "horizontal"
}
}}
/>
`####
Replace
values "start" | "center" | "end" respectively.
This is to align with the CSS values and reflect the RTL ability of the legend component.`diff
legend: {
position: {
- horizontal: "left",
+ horizontal: "start",
}
}
}}
/>
`####
Renames
and ResponsiveChartContainerPro by ChartContainer and ChartContainerPro which have the same behavior in v8.`diff
-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';-
+
-
+
`####
Renames
to Position.`diff
-import { LegendPosition } from '@mui/x-charts/ChartsLegend';
+import { Position } from '@mui/x-charts/models';
`> [!WARNING]
> If you imported both
and ChartContainer in the same file, you might end up with duplicated import.
> Verify the git diff to remove the duplicate.
>
> `diff
> import { ChartContainer } from '@mui/x-charts/ChartContainer';
> -import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
> +import { ChartContainer } from '@mui/x-charts/ChartContainer';
> `####
Renames
and tickFontSize props to the corresponding xxxStyle prop.`diff
+ labelStyle={{
+ fontSize: 18
+ }}
- tickFontSize={20}
+ tickStyle={{
+ fontSize: 20
+ }}
/>
`####
Remove the
and move the associated onAxisClick prop to its parent.> [!WARNING]
> This codemode does not work if component got renamed or if the handler is not a direct child of the container.
`diff
+ {}}>
-
- {}} />
`####
Remove
prefix from useSeries and use*Series hooks, as they have now become stable.`diff
import {
- unstable_useSeries,
+ useSeries,
- unstable_usePieSeries,
+ usePieSeries,
- unstable_useLineSeries,
+ useLineSeries,
- unstable_useBarSeries,
+ useBarSeries,
- unstable_useScatterSeries,
+ useScatterSeries,
} from '@mui/x-charts/hooks';
import {
- unstable_useHeatmapSeries,
+ useHeatmapSeries,
} from '@mui/x-charts-pro/hooks';
`####
Renames the
prop of a SparkLineChart to color and accesses its first element.`diff
+ color={'red'}
/>
`If
is a function, it will be wrapped in another function that returns its first element.`diff
+ color={typeof fn === 'function' ? mode => fn(mode)[0] : fn[0]}
/>
`If there are cases that the codemod cannot handle, you should see a comment with a
prefix in the code.`diff
+ / mui-x-codemod: We renamed the colors prop to color, but didn't change the value. Please ensure sure this prop receives a string or a function that returns a string. /
+ color={(mode) => (mode === 'light' ? ['black'] : ['white'])}
/>
`$3
####
for Data Grid v8.0.0The
preset-safe codemods for Data Grid.`bash
npx @mui/x-codemod@latest v8.0.0/data-grid/preset-safe
`The list includes these transformers
-
-
-
-
-
- ####
Remove feature flags for stabilized
.`diff
- ariaV8: true,
- }}
/>
`bash
npx @mui/x-codemod@latest v8.0.0/data-grid/remove-stabilized-experimentalFeatures
`####
Remove props that are no longer supported.
The list includes these props:
-
-
- diff
- rowPositionsDebounceMs={100}
- resetPageOnSortFilter
/>
`bash
npx @mui/x-codemod@latest v8.0.0/data-grid/remove-props
`####
Rename props to the new ones.
The list includes these props:
-
to rowSpanning
- to dataSource
- to dataSourceCache
- to lazyLoading
- to lazyLoadingRequestThrottleMs
- to onDataSourceError
- to listView
- to listViewColumndiff
- unstable_dataSource={dataSource}
- unstable_dataSourceCache={dataSourceCache}
- unstable_lazyLoading
- unstable_lazyLoadingRequestThrottleMs={100}
- unstable_onDataSourceError={() => {}}
- unstable_listView
- unstable_listColumn={{}}
+ rowSpanning
+ dataSource={dataSource}
+ dataSourceCache={dataSourceCache}
+ lazyLoading
+ lazyLoadingRequestThrottleMs={100}
+ onDataSourceError={() => {}}
+ listView
+ listViewColumn={{}}
/>
`bash
npx @mui/x-codemod@latest v8.0.0/data-grid/rename-props
`####
This codemod renames the imports of the Data Grid components. The list includes these imports:
-
to gridRowSelectionIdsSelector
- to gridRowSelectionCountSelectordiff
-import { selectedGridRowsSelector, selectedGridRowsCountSelector } from '@mui/x-data-grid';
+import { gridRowSelectionIdsSelector, gridRowSelectionCountSelector } from '@mui/x-data-grid';
`bash
npx @mui/x-codemod@latest v8.0.0/data-grid/rename-imports
`####
Reforms the controlled
prop value to the new one.`diff
-const [rowSelectionModel, setRowSelectionModel] = React.useState([1, 2]);
+const [rowSelectionModel, setRowSelectionModel] = React.useState({
+ type: 'include',
+ ids: new Set([1, 2]),
+});
onRowSelectionModelChange={setRowSelectionModel}
/>
`bash
npx @mui/x-codemod@latest v8.0.0/data-grid/reform-row-selection-model
`####
Reorganizes the imports moved from
and @mui/x-data-grid-premium.`diff
-import { LicenseInfo } from '@mui/x-data-grid-pro';
+import { LicenseInfo } from '@mui/x-license';
`bash
npx @mui/x-codemod@latest v8.0.0/data-grid/rename-package
`####
Adds the
prop to the Data Grid components that are using slots.toolbar prop.`diff
toolbar: GridToolbar,
}}
+ showToolbar
/>
`bash
npx @mui/x-codemod@latest v8.0.0/data-grid/add-showToolbar-prop
`$3
####
for Pickers v8.0.0The
preset-safe codemods for Pickers.`bash
npx @mui/x-codemod@latest v8.0.0/pickers/preset-safe
`The list includes these transformers
- ####
> [!WARNING]
> This codemod is not idempotent. Running it multiple times will rename the imports back and forth.
> Usage of
would be replaced by AdapterDateFns and a subsequent run would rename it to AdapterDateFnsV2.- Renames
AdapterDateFns and AdapterDateFnsJalali imports to AdapterDateFnsV2 and AdapterDateFnsJalaliV2 respectfully.
`diff
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';
`- Renames
and AdapterDateFnsJalaliV3 imports to AdapterDateFns and AdapterDateFnsJalali respectfully.
`diff
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
`bash
npx @mui/x-codemod@latest v8.0.0/pickers/rename-adapter-date-fns-imports
`####
Renames:
-
to usePickerTranslations
- to usePickerContext
- to PickerValueType
- to FieldRangeSection
- to PickerChangeImportancediff
-import { usePickersTranslations, usePickersContext } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations, usePickerContext } from '@mui/x-date-pickers/hooks';
-import { FieldValueType } from '@mui/x-date-pickers';
+import { PickerValueType } from '@mui/x-date-pickers';
-import { RangeFieldSection } from '@mui/x-date-pickers-pro/models';
+import { FieldRangeSection } from '@mui/x-date-pickers-pro/models';
-import { PickerShortcutChangeImportance } from '@mui/x-date-pickers/PickersShortcuts';
+import { PickerChangeImportance } from '@mui/x-date-pickers/models'; interface MyComponentProps {
- valueType: FieldValueType;
+ valueType: PickerValueType;
foo: string;
bar: number;
}
`bash
npx @mui/x-codemod@latest v8.0.0/pickers/rename-type-imports
`v7.0.0
$3
A combination of all important transformers for migrating v6 to v7.
⚠️ This codemod should be run only once.
It runs codemods for both Data Grid and Date and Time Pickers packages.
To run codemods for a specific package, refer to the respective section.
bash
npx @mui/x-codemod@latest v7.0.0/preset-safe
`The corresponding sub-sections are listed below
-
- $3
####
for Pickers v7.0.0The
preset-safe codemods for Pickers.`bash
npx @mui/x-codemod@latest v7.0.0/pickers/preset-safe
`The list includes these transformers
-
-
- ####
Renames the
and componentsProps props to slots and slotProps, respectively.This change only affects Date and Time Picker components.
`diff
- componentsProps={{ actionBar: { actions: ['clear'] } }}
+ slots={{ toolbar: CustomToolbar }}
+ slotProps={{ actionBar: { actions: ['clear'] } }}
/>;
`bash
npx @mui/x-codemod@latest v7.0.0/pickers/rename-components-to-slots
`####
Replace the
prop with the referenceDate prop.`diff
-
`bash
npx @mui/x-codemod@latest v7.0.0/pickers/rename-default-calendar-month-to-reference-date
`####
Rename the
variable to dayCalendarClasses.`diff
-import { dayPickerClasses } from '@mui/x-date-pickers/DateCalendar';
+import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
`bash
npx @mui/x-codemod@latest v7.0.0/pickers/rename-day-picker-classes
`####
Replace types suffix
by Slots and SlotsComponentsProps by SlotProps.`diff
-DateCalendarSlotsComponent
-DateCalendarSlotsComponentsProps
+DateCalendarSlots
+DateCalendarSlotProps
`bash
npx @mui/x-codemod@latest v7.0.0/pickers/rename-slots-types
`$3
####
for Data Grid v7.0.0The
preset-safe codemods for Data Grid.`bash
npx @mui/x-codemod@latest v7.0.0/data-grid/preset-safe
`The list includes these transformers
-
- ####
Renames the
and componentsProps props to slots and slotProps, respectively.This change only affects Data Grid components.
`diff
- componentsProps={{ toolbar: { showQuickFilter: true }}}
+ slots={{ toolbar: CustomToolbar }}
+ slotProps={{ toolbar: { showQuickFilter: true }}}
/>;
`bash
npx @mui/x-codemod@latest v7.0.0/data-grid/rename-components-to-slots
`####
Rename props related to
feature.`diff
- unstable_cellSelectionModel={{ 0: { id: true, currencyPair: true, price1M: false } }}
- unstable_onCellSelectionModelChange={() => {}}
+ cellSelection
+ cellSelectionModel={{ 0: { id: true, currencyPair: true, price1M: false } }}
+ onCellSelectionModelChange={() => {}}
/>;
`bash
npx @mui/x-codemod@latest v7.0.0/data-grid/rename-cell-selection-props
`####
Remove feature flags for stabilized
.`diff
- lazyLoading: true,
- ariaV7: true,
- clipboardPaste: true,
- columnGrouping: true,
- }}
/>
`bash
npx @mui/x-codemod@latest v7.0.0/data-grid/remove-stabilized-experimentalFeatures
`$3
####
for Tree View v7.0.0The
preset-safe codemods for Tree View.`bash
npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe
`The list includes these transformers
-
-
-
-
-
- ####
Renames the Tree View component to Simple Tree View
diff
-import { TreeView } from '@mui/x-tree-view';
+import { SimpleTreeView } from '@mui/x-tree-view';-import { TreeView } from '@mui/x-tree-view/TreeView';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
return (
-
+
-
+
);
`####
Renames the
hook to useTreeItemStatediff
-import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';
+import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem'; const CustomContent = React.forwardRef((props, ref) => {
- const { disabled } = useTreeItem(props.itemId);
+ const { disabled } = useTreeItemState(props.itemId);
// Render some UI
});
function App() {
return (
)
}
`####
Rename the expansion props
diff
+ onExpandedItemsChange={handleExpansionChange}- expanded={expandedItems}
+ expandedItems={expandedItems}
- defaultExpanded={defaultExpandedItems}
+ defaultExpandedItems={defaultExpandedItems}
/>
`####
Rename the selection props
diff
+ onSelectedItemsChange={handleSelectionChange}- selected={selectedItems}
+ selectedItems={selectedItems}
- defaultSelected={defaultSelectedItems}
+ defaultSelectedItems={defaultSelectedItems}
/>
`####
Replace the
and TransitionProps components with the groupTransition slot:`diff
+ slots={{ groupTransition: Fade }}- TransitionProps={{ timeout: 600 }}
+ slotProps={{ groupTransition: { timeout: 600 } }}
/>
`####
Replace the
callback with onItemFocus:`diff
+ onItemFocus={onItemFocus}
/>
`####
Rename nodeId to itemId
diff
+ itemId='unique-id'
`v6.0.0
$3
A combination of all important transformers for migrating v5 to v6.
⚠️ This codemod should be run only once.
It runs codemods for both Data Grid and Date and Time Pickers packages.
To run codemods for a specific package, refer to the respective section.
bash
npx @mui/x-codemod@latest v6.0.0/preset-safe
`The corresponding sub-sections are listed below
- $3
####
for Pickers v6.0.0The
preset-safe codemods for Pickers.`bash
npx @mui/x-codemod@latest v6.0.0/pickers/preset-safe
`The list includes these transformers
-
-
-
-
-
-
-
-
-
-
- ####
Import the adapters from
instead of @date-io.`diff
-import AdapterJalaali from '@date-io/jalaali';
+import { AdapterMomentJalaali } from '@mui/x-date-pickers/AdapterMomentJalaali';
`####
Renames the view components.
diff
-
+-
+
-
+
-
+
-
+
-
+
`####
Renames the
prop of the view components into value.`diff
-
+-
+
-
+
-
+
`####
Renames the
prop of the LocalizationProvider component into adapterLocale.`diff
- locale="fr"
+ adapterLocale="fr"
>
{children}
`bash
npx @mui/x-codemod@latest v6.0.0/pickers/localization-provider-rename-locale
`####
Replace props used for localization such as
to their corresponding localeText key on all the Date and Time Pickers components.`diff
+ localeText={{
+ cancelButtonLabel: "Cancelar"
+ }}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/pickers/text-props-to-localeText
`If you were always using the same text value in all your components, consider moving those translation from the component to the
by hand.`diff
+ localeText={{ cancelButtonLabel: "Cancelar" }}
>
/>
/>
`You can find more details about Date and Time breaking changes in the migration guide.
####
Replace props used for
in DateTime pickers by componentsProps.tabs properties.`diff
- dateRangeIcon={
- timeIcon={
+ componentsProps={{
+ tabs: {
+ hidden: false,
+ dateIcon:
+ timeIcon:
+ }
+ }}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/pickers/replace-tabs-props
`####
Replace props used to customize the
in pickers by slots properties and localeText.`diff
+ components={{ Toolbar: MyToolbar }}
- toolbarPlaceholder="__"
- toolbarFormat="DD / MM / YYYY"
- showToolbar
+ componentsProps={{
+ toolbar: {
+ toolbarPlaceholder: "__",
+ toolbarFormat: "DD / MM / YYYY",
+ hidden: false,
+ }
+ }}
- toolbarTitle="Title"
+ localeText={{ toolbarTitle: "Title" }}
`bash
npx @mui/x-codemod@latest v6.0.0/pickers/replace-toolbar-props-by-slot
`####
Replace customization props by their equivalent
and componentsProps properties.`diff
+ componentsProps={{ popper: { onClick: handleClick }}}
/>
+ components={{ DesktopTransition: Fade }}
/>
+ componentsProps={{ dialog: { backgroundColor: 'red' }}}
/>
+ componentsProps={{ desktopPaper: { backgroundColor: 'red' }}}
/>
+ componentsProps={{ desktopTrapFocus: { isEnabled: () => false }}}
/>
+ componentsProps={{ textField: { InputProps: { color: 'primary' }}}}
/>
+ componentsProps={{ inputAdornment: { position: 'start' }}}
/>
+ componentsProps={{ openPickerButton: { ref: buttonRef }}}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/pickers/migrate-to-components-componentsProps
`####
Replace
and RightArrowButton slots for navigation buttons by PreviousIconButton and NextIconButton.`diff
- LeftArrowButton: CustomButton,
+ PreviousIconButton: CustomButton,
- RightArrowButton: CustomButton,
+ NextIconButton: CustomButton,
}} componentsProps={{
- leftArrowButton: {},
+ previousIconButton: {},
- rightArrowButton: {},
+ nextIconButton: {},
}}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/pickers/replace-arrows-button-slot
`####
Replace
by shouldDisableClock.`diff
+ shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/pickers/rename-should-disable-time
`####
Replace
prop with format.`diff
+ format="YYYY"
/>
`bash
npx @mui/x-codemod@latest v6.0.0/pickers/rename-inputFormat-prop
`####
Rename toolbar related translation keys, removing
part from them to better fit their usage.`diff
- datePickerDefaultToolbarTitle: 'Date Picker',
+ datePickerToolbarTitle: 'Date Picker',
- timePickerDefaultToolbarTitle: 'Time Picker',
+ timePickerToolbarTitle: 'Time Picker',
- dateTimePickerDefaultToolbarTitle: 'Date Time Picker',
+ dateTimePickerToolbarTitle: 'Date Time Picker',
- dateRangePickerDefaultToolbarTitle: 'Date Range Picker',
+ dateRangePickerToolbarTitle: 'Date Range Picker',
}}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/pickers/rename-default-toolbar-title-localeText
`####
Renames the
and componentsProps props to slots and slotProps, respectively.This change only affects Date and Time Pickers components.
`diff
- componentsProps={{ actionBar: { actions: ['clear'] } }}
+ slots={{ toolbar: CustomToolbar }}
+ slotProps={{ actionBar: { actions: ['clear'] } }}
/>;
`bash
npx @mui/x-codemod@latest v6.0.0/pickers/rename-components-to-slots
`$3
####
for Data Grid v6.0.0The
preset-safe codemods for Data Grid.`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/preset-safe
`The list includes these transformers
-
-
-
-
-
-
-
- ####
Replace column menu items that have been renamed.
diff
-
+
-
+
-
+
-
+
-
+
`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/column-menu-components-rename
`If you are using
and GridRowGroupableColumnMenuItems for grouping, consider fixing them manually as these imports are replaced by GridColumnMenuGroupingItem and may require some extra work to port.####
row-selection-props-renameData Grid props that have been renamed.
diff
+ rowSelectionModel={model}
- onSelectionModelChange={handler}
+ onRowSelectionModelChange={handler}
- disableSelectionOnClick
+ disableRowSelectionOnClick
- disableMultipleSelection
+ disableMultipleRowSelection
- showCellRightBorder
+ showCellVerticalBorder
- showColumnRightBorder
+ showColumnVerticalBorder
/>
`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/row-selection-props-rename
`####
Rename
prop to pageSizeOptions.`diff
+ pageSizeOptions={[5, 10, 20]}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/rename-rowsPerPageOptions-prop
`####
Remove
prop which is no longer supported.`diff
/>
`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/remove-disableExtendRowFullWidth-prop
`####
Rename
related props to logicOperators and rename classes.`diff
const [filterModel, setFilterModel] = React.useState({
items: [],
- linkOperator: GridLinkOperator.Or,
- quickFilterLogicOperator: GridLinkOperator.Or,
+ logicOperator: GridLogicOperator.Or,
+ quickFilterLogicOperator: GridLogicOperator.Or,
});
- apiRef.current.setFilterLinkOperator('and')
- const localeText = apiRef.current.getLocaleText('filterPanelLinkOperator')
+ apiRef.current.setFilterLogicOperator('and')
+ const localeText = apiRef.current.getLocaleText('filterPanelLogicOperator')
filter: {
filterModel: {
items: [],
- linkOperator: GridLinkOperator.Or,
- quickFilterLogicOperator: GridLinkOperator.Or,
+ logicOperator: GridLogicOperator.Or,
+ quickFilterLogicOperator: GridLogicOperator.Or,
},
},
}}
filterModel={filterModel}
componentsProps={{
filter: {
- linkOperators: [GridLinkOperator.And],
+ logicOperators: [GridLogicOperator.And],
filterFormProps: {
- linkOperatorInputProps: {
+ logicOperatorInputProps: {
variant: 'outlined',
size: 'small',
},
},
},
}}
sx={{
- '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 },
- '& .MuiDataGrid-withBorder': { borderColor: '#456' },
+ '& .MuiDataGrid-filterFormLogicOperatorInput': { mr: 2 },
+ '& .MuiDataGrid-withBorderColor': { borderColor: '#456' },
}}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/rename-linkOperators-logicOperators
`####
Rename filter item props to the new values.
diff
rows={rows}
initialState={{
filter: {
filterModel: {
items: [
{
- columnField: 'column',
- operatorValue: 'contains',
+ field: 'column',
+ operator: 'contains',
value: 'a',
},
],
},
},
}}
filterModel={{
items: [
{
- columnField: 'column',
- operatorValue: 'contains',
+ field: 'column',
+ operator: 'contains',
value: 'a',
},
],
}}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/rename-filter-item-props
`####
Rename selectors and events.
diff
function App() {
- useGridApiEventHandler(apiRef, 'selectionChange', handleEvent);
- apiRef.current.subscribeEvent('selectionChange', handleEvent);
- const selection = useGridSelector(apiRef, gridSelectionStateSelector);
- const sortedRowIds = useGridSelector(apiRef, gridVisibleSortedRowIdsSelector);
- const sortedRowEntries = useGridSelector(apiRef, gridVisibleSortedRowEntriesSelector);
- const rowCount = useGridSelector(apiRef, gridVisibleRowCountSelector);
- const sortedTopLevelRowEntries = useGridSelector(apiRef, gridVisibleSortedTopLevelRowEntriesSelector);
- const topLevelRowCount = useGridSelector(apiRef, gridVisibleTopLevelRowCountSelector);
- const allGridColumnsFields = useGridSelector(apiRef, allGridColumnsFieldsSelector);
- const allGridColumns = useGridSelector(apiRef, allGridColumnsSelector);
- const visibleGridColumns = useGridSelector(apiRef, visibleGridColumnsSelector);
- const filterableGridColumns = useGridSelector(apiRef, filterableGridColumnsSelector);
- const getGridNumericColumn = useGridSelector(apiRef, getGridNumericColumnOperators);
+ useGridApiEventHandler(apiRef, 'rowSelectionChange', handleEvent);
+ apiRef.current.subscribeEvent('rowSelectionChange', handleEvent);
+ const selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
+ const sortedRowIds = useGridSelector(apiRef, gridExpandedSortedRowIdsSelector);
+ const sortedRowEntries = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
+ const rowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
+ const sortedTopLevelRowEntries = useGridSelector(apiRef, gridFilteredSortedTopLevelRowEntriesSelector);
+ const topLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
+ const allGridColumnsFields = useGridSelector(apiRef, gridColumnFieldsSelector);
+ const allGridColumns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+ const visibleGridColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+ const filterableGridColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+ const getGridNumericColumn = useGridSelector(apiRef, getGridNumericOperators);
}
`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/rename-selectors-and-events
`####
Remove feature flags for stabilized
.`diff
- newEditingApi: true,
- }}
/>
`diff
- newEditingApi: true,
columnGrouping: true,
}}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/remove-stabilized-experimentalFeatures
`####
Replace
prop with componentsProps.cell.onBlur.`diff
+ componentsProps={{
+ cell: {
+ onBlur: handleBlur,
+ },
+ }}
/>
`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/replace-onCellFocusOut-prop
`####
Renames the
and componentsProps props to slots and slotProps, respectively.This change only affects Data Grid components.
`diff
- componentsProps={{ actionBar: { actions: ['clear'] } }}
+ slots={{ toolbar: CustomToolbar }}
+ slotProps={{ actionBar: { actions: ['clear'] } }}
/>;
`bash
npx @mui/x-codemod@latest v6.0.0/data-grid/rename-components-to-slots
``You can find more details about Data Grid breaking change in the migration guide.