@mui/x-codemod
Advanced tools
Changelog
7.7.0
Jun 13, 2024
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
Changelog
7.6.0
May 30, 2024
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
Changelog
7.0.0
Mar 22, 2024
We're excited to announce the first v7 stable release! 🎉🚀
This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements. Migration guides are available with a complete list of the breaking changes:
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
viewRenderers
on DateTimePicker
(#12441) @LukasTydensity
for the Data Grid (#12332) @MBilalShafiThe density
is a controlled prop now, if you were previously passing the density
prop to the Data Grid, you will need to do one of the following:
initialState.density
to initialize it. <DataGrid
- density="compact"
+ initialState={{ density: "compact" }}
/>
onDensityChange
callback to update the density
prop accordingly for it to work as expected.+ const [density, setDensity] = React.useState<GridDensity>('compact');
<DataGrid
- density="compact"
+ density={density}
+ onDensityChange={(newDensity) => setDensity(newDensity)}
/>
The selector gridDensityValueSelector
was removed, use the gridDensitySelector
instead.
The props rowBuffer
and columnBuffer
were renamed to rowBufferPx
and columnBufferPx
.
Their value is now a pixel value rather than a number of items. Their default value is now 150
.
The props rowThreshold
and columnThreshold
have been removed.
If you had the rowThreshold
prop set to 0
to force new rows to be rendered more often – this is no longer necessary.
Changelog
7.0.0-beta.7
Mar 14, 2024
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
lazyLoading
feature flag was removed from the experimentalFeatures
prop.columnHeader--showColumnBorder
class was replaced by columnHeader--withLeftBorder
and columnHeader--withRightBorder
.columnHeadersInner
, columnHeadersInner--scrollable
, and columnHeaderDropZone
classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.pinnedColumnHeaders
, pinnedColumnHeaders--left
, and pinnedColumnHeaders--right
classes were removed along with the element they were applied to.
The pinned column headers now use position: 'sticky'
and are rendered in the same row element as the regular column headers.Changelog
7.0.0-beta.6
Mar 8, 2024
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
Changelog
7.0.0-alpha.9
Jan 19, 2024
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
SimpleTreeView
customization examples (#11424) @noraleonte@mui/material
peer dependency for all packages (#11692) @LukasTy
The minimum required version of @mui/material
is now 5.15.0
.The ariaV7
experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default.
If you were using the ariaV7
flag, you can remove it from the experimentalFeatures
prop:
-<DataGrid experimentalFeatures={{ ariaV7: true }} />
+<DataGrid />
The most notable changes that might affect your application or tests are:
The role="grid"
attribute along with related ARIA attributes are now applied to the inner div
element instead of the root div
element:
-<div class="MuiDataGrid-root" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false">
+<div class="MuiDataGrid-root">
<div class="MuiDataGrid-toolbarContainer"></div>
- <div class="MuiDataGrid-main"></div>
+ <div class="MuiDataGrid-main" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false"></div>
<div class="MuiDataGrid-footerContainer"></div>
</div>
When the Tree data feature is used, the grid role is now role="treegrid"
instead of role="grid"
.
The Data Grid cells now have role="gridcell"
instead of role="cell"
.
The buttons in toolbar composable components GridToolbarColumnsButton
, GridToolbarFilterButton
, GridToolbarDensity
, and GridToolbarExport
are now wrapped with a tooltip component and have a consistent interface. To override some props corresponding to the toolbar buttons or their corresponding tooltips, you can use the slotProps
prop. Following is an example diff. See Toolbar section for more details.
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton
- title="Custom filter" // 🛑 This was previously forwarded to the tooltip component
+ slotProps={{ tooltip: { title: 'Custom filter' } }} // ✅ This is the correct way now
/>
<GridToolbarDensitySelector
- variant="outlined" // 🛑 This was previously forwarded to the button component
+ slotProps={{ button: { variant: 'outlined' } }} // ✅ This is the correct way now
/>
</GridToolbarContainer>
);
}
Column grouping is now enabled by default. The flag columnGrouping
is no longer needed to be passed to the experimentalFeatures
prop to enable it.
-<DataGrid experimentalFeatures={{ columnGrouping: true }} />
+<DataGrid />
The column grouping API methods getColumnGroupPath
and getAllGroupDetails
are no longer prefixed with unstable_
.
The column grouping selectors gridFocusColumnGroupHeaderSelector
and gridTabIndexColumnGroupHeaderSelector
are no longer prefixed with unstable_
.
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. See the related docs section.
Changelog
7.0.0-alpha.8
Jan 11, 2024
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
AdapterDateFnsV3
.
// with date-fns v2.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import de from 'date-fns/locale/de';
// with date-fns v3.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
import { de } from 'date-fns/locale/de';
The import path for locales has been changed:
-import { enUS } from '@mui/x-data-grid';
+import { enUS } from '@mui/x-data-grid/locales';
-import { enUS } from '@mui/x-data-grid-pro';
+import { enUS } from '@mui/x-data-grid-pro/locales';
-import { enUS } from '@mui/x-data-grid-premium';
+import { enUS } from '@mui/x-data-grid-premium/locales';
Changelog
7.0.0-alpha.7
Jan 5, 2024
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
🎁 New component to create a Tree View from a structured data source:
You can now directly pass your data to the RichTreeView
component instead of manually converting it into JSX TreeItem
components:
const ITEMS = [
{
id: 'node-1',
label: 'Node 1',
children: [
{ id: 'node-1-1', label: 'Node 1.1' },
{ id: 'node-1-2', label: 'Node 1.2' },
],
},
{
id: 'node-2',
label: 'Node 2',
},
];
<RichTreeView
items={MUI_X_PRODUCTS}
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
/>;
🌍 Improve Czech (cs-CZ) locale on the Data Grid
🐞 Bugfixes
Changelog
7.0.0-alpha.6
Dec 22, 2023
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
Date
objects in the filterModel
The filter panel no longer uses the native version of the Select
component for all components.
The getOptionValue
and getOptionLabel
props were removed from the following components:
GridEditSingleSelectCell
GridFilterInputSingleSelect
GridFilterInputMultipleSingleSelect
Use the getOptionValue
and getOptionLabel
properties on the singleSelect
column definition instead:
const column: GridColDef = {
type: 'singleSelect',
field: 'country',
valueOptions: [
{ code: 'BR', name: 'Brazil' },
{ code: 'FR', name: 'France' },
],
getOptionValue: (value: any) => value.code,
getOptionLabel: (value: any) => value.name,
};
The filterModel
now supports Date
objects as values for date
and dateTime
column types.
The filterModel
still accepts strings as values for date
and dateTime
column types,
but all updates to the filterModel
coming from the UI (for example filter panel) will set the value as a Date
object.