NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #4112 most downloaded on npm
The community edition of the MUI X Date and Time Picker components.
Last release 18 days ago
17 Sep 2026
Ships on a steady schedule
a new release about every 2 weeks
Nearly every release is documented
notes for 60 of the last 60 stable releases
1 version withdrawn
withdrawn after publishing
5 years old
274 releases · first in 2022
One column per quarter.
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
💫 Allow filtering the axis on zoom, making the axis adapt by removing values outside the view.
<img width="600" src="https://github.com/user-attachments/assets/e65bbd00-d2a8-4136-81cd-3598f1373c16" alt="filtering the axis on zoom" />
📊 Improve bar chart performances
🌍 Improve Czech (cs-CZ) and Hebrew (he-IL) locales on the Data Grid
🌍 Improve Chinese (zh-HK), Hebrew (he-IL), and Vietnamese (vi-VN) locales on the Date and Time Pickers
🐞 Bugfixes
@mui/x-data-grid@7.14.0getTreeDataPath (#11743) @pcorpetevent.key for Tab and Escape keys (#14170) @k-rajat19api in gridCellParams interface (#14201) @k-rajat19@mui/x-data-grid-pro@7.14.0 Same changes as in @mui/x-data-grid@7.14.0.
@mui/x-data-grid-premium@7.14.0 Same changes as in @mui/x-data-grid-pro@7.14.0, plus:
onCellSelectionModelChange not triggered when additional cell range is selected (#14199) @arminmeh@mui/x-date-pickers@7.14.0Space and Enter on the TimeClock component @arthurbalduini@mui/x-date-pickers-pro@7.14.0 Same changes as in @mui/x-date-pickers@7.14.0.
@mui/x-charts@7.14.0isPointInside function for both graphs and axis (#14222) @JCQuintas@mui/x-charts-pro@7.0.0-alpha.2 Same changes as in @mui/x-charts@7.14.0, plus:
eslint-plugin-testing-library (#14232) @LukasTyWe'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
https://github.com/user-attachments/assets/cfd27be0-740f-48d4-9a6e-84c06edda376
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.13.0null and undefined values (#14166) @k-rajat19useGridStateInitialization (#14181) @k-rajat19@mui/x-data-grid-pro@7.13.0 Same changes as in @mui/x-data-grid@7.13.0, plus:
@mui/x-data-grid-premium@7.13.0 Same changes as in @mui/x-data-grid-pro@7.13.0.
@mui/x-date-pickers@7.13.0@mui/x-date-pickers-pro@7.13.0 Same changes as in @mui/x-date-pickers@7.13.0.
@mui/x-charts@7.13.0baseline property to the LineChart series (#14153) @JCQuintasCartesianContextProvider to CartesianProvider (#14102) @JCQuintas@mui/x-date-charts-pro@7.0.0-alpha.1 Same changes as in @mui/x-charts@7.13.0.
@mui/x-tree-view@7.13.0canMoveItemToNewPosition prop (#14176) @flaviendelanglecache-docs plugin setup (#14105) @LukasTyWe'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
@mui/x-charts-pro is released in alpha version 🧪. This new package introduces two main features:
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.12.1checkboxSelectionVisibleOnly behavior with server-side pagination (#14083) @MBilalShaficolumnHeadersContainerRef being undefined before mount (#14051) @samwato@mui/x-data-grid-pro@7.12.1 Same changes as in @mui/x-data-grid@7.12.1.
@mui/x-data-grid-premium@7.12.1 Same changes as in @mui/x-data-grid-pro@7.12.1.
@mui/x-date-pickers@7.12.1@mui/x-date-pickers-pro@7.12.1 Same changes as in @mui/x-date-pickers@7.12.1.
@mui/x-charts@7.12.1plugins to PluginProvider (#14056) @JCQuintas@mui/x-date-charts-pro@7.0.0-alpha.0 Same changes as in @mui/x-charts@7.12.1, plus:
@mui/x-tree-view@7.12.1[docs] Add a warning to promote the usage of updateRows (#14027) @MBilalShafi
[docs] Disable ad in Rich Tree View-Ordering page (#14123) @oliviertassinari
[docs] Redesign Date and Time Pickers overview page (#13241) @noraleonte
[CHANGELOG] Polish details @oliviertassinari
[code-infra] Use concurrency 1 in CircleCI (#14110) @JCQuintas
[infra] Re-added the removal of Latest Version section (#14132) @michelengelen
The Pro plan is receiving two new packages:
The Pro plan is receiving two new packages:
@mui/x-tree-view-pro (available today!)@mui/x-charts-pro (available in the coming weeks)As always, every feature released as part of the MIT plan will remain free and MIT licensed forever.
This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the Upcoming changes to MUI X pricing in 2024 blog post.
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
🎁 Introduce item reordering using drag and drop on the RichTreeViewPro component
<img width="287" src="https://github.com/user-attachments/assets/78bd83c5-7ce4-4ed7-acf9-be70b2dbce54" alt="Item reordering using drag and drop" />
📦 Support CommonJS bundle out of the box on @mui/x-charts by adding vendored D3 dependencies.
This modifies how the package imports D3.js. It will impact you if you use d3 packages installed by @mui/x-charts and don't have them in your package.json. You shouldn't be affected otherwise.
For more context, the initial issue is caused by D3 only exporting ESM.
The solution up until now was to export charts with only ESM. But some frameworks are confused by this configuration.
So in order to fix this, we are providing a CJS version of D3.
🌍 Improve Turkish (tr-TR) locale on the Data Grid
🌍 Improve Finnish (fi-FI) locale on the Date and Time Pickers
🐞 Bugfixes
📚 Documentation improvements
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.12.0role=presentation a11y issue (#13891) @romgrk@mui/x-data-grid-pro@7.12.0 Same changes as in @mui/x-data-grid@7.12.0.
@mui/x-data-grid-premium@7.12.0 Same changes as in @mui/x-data-grid-pro@7.12.0.
@mui/x-date-pickers@7.12.0@mui/x-date-pickers-pro@7.12.0 Same changes as in @mui/x-date-pickers@7.12.0.
@mui/x-charts@7.12.0axisId prop being allowed in xAxis/yAxis config. Use id instead. (#13986) @JCQuintasSeriesProvider to use in filtering (#14026) @JCQuintas@mui/x-tree-view@7.12.0onItemClick on the Tree View components (#14018) @flaviendelangleisEventTargetInDescendants (#13982) @flaviendelangleminDate and maxDate default description (#14024) @LukasTyrenderCell & autogenerated rows (#13879) @romgrkcharts performance with codspeed (#13952) @JCQuintasvale action paths filtering (#14038) @LukasTy[charts] Deprecate xAxisKey /zAxisKey in favor of xAxisId/zAxisId (#13940) @alexfauquette
We'd like to offer a big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
Zoom to be controllable for charts (#13858) @JCQuintas<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.11.1GridPreferencesPanel (#13934) @k-rajat19@mui/x-data-grid-pro@7.11.1 Same changes as in @mui/x-data-grid@7.11.1.
@mui/x-data-grid-premium@7.11.1 Same changes as in @mui/x-data-grid-pro@7.11.1, plus:
api object to events (#13893) @pcorpet@mui/x-date-pickers@7.11.1@mui/x-date-pickers-pro@7.11.1 Same changes as in @mui/x-date-pickers@7.11.1.
@mui/x-charts@7.11.1ownerState function to slotProps typing when available (#13965) @alexfauquetteZoom to be controllable (#13858) @JCQuintasxAxisKey /zAxisKey in favor of xAxisId/zAxisId (#13940) @alexfauquette@mui/x-tree-view@7.11.1SparkLineChart reference not being correctly capitalised (#13960) @duckboy81@mui/material-nextjs to MUI Core renovate group (#13966) @LukasTyuseReactVersion script from the monorepo (#13710) @cherniavskiiWe'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.11.0gridEditRowsStateSelector (#13877) @romgrkcolumnResizeStop event not emitted when column is not resized (#13307) @mateuseapdate and datetime-local input types in GridFilterInputMultipleValue type (#13411) @karudedios@mui/x-data-grid-pro@7.11.0 Same changes as in @mui/x-data-grid@7.11.0.
@mui/x-data-grid-premium@7.11.0 Same changes as in @mui/x-data-grid-pro@7.11.0.
@mui/x-date-pickers@7.11.0Mui-selected class to TimeClock meridiem buttons (#13848) @LukasTy@mui/x-date-pickers-pro@7.11.0 Same changes as in @mui/x-date-pickers@7.11.0, plus:
name prop propagation regression (#13821) @LukasTy@mui/x-charts@7.11.0useChartContainerProps (#13817) @JCQuintasclassName to root element (#13647) @JCQuintas@mui/x-tree-view@7.11.0useTreeView hook (#13845) @flaviendelangleprocess.env.NODE_ENV in production (#13869) @cherniavskiionChange and onAccept props (#13543) @flaviendelanglerenovate group (#13846) @LukasTyimport/prefer-default-export rule @oliviertassinari...other and test imports in charts (#13844) @JCQuintasnext tag for @mui/docs package bumps (#13813) @LukasTy@mui/docs dependency (#13760) @LukasTyEventManager to @mui/x-internals package (#13815) @flaviendelangleWe'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.10.0'standard' in GridFilterInputMultipleValue (#13129) @tarunrajputreadonly on more array props (#13331) @pcorpet@mui/x-data-grid-pro@7.10.0 Same changes as in @mui/x-data-grid@7.10.0, plus:
@mui/x-data-grid-premium@7.10.0 Same changes as in @mui/x-data-grid-pro@7.10.0.
@mui/x-date-pickers@7.10.0readOnly flag (#13688) @LukasTy@mui/x-date-pickers-pro@7.10.0 Same changes as in @mui/x-date-pickers@7.10.0, plus:
calendarHeader slot props propagation (#13780) @LukasTyformat from given views (#13743) @LukasTy@mui/x-charts@7.10.0LineChart when using the log scale (#13791) @alexfauquetteOnSeriesItemClick documentation (#13761) @tonyhallett@mui/x-tree-view@7.10.0getItemTree and getItemOrderedChildrenIds methods to the public API (#13804) @flaviendelangleloading prop value (#13604) @oliviertassinariDateTimeRangePicker to the "Commonly used components" demo (#13775) @flaviendelangleDATA_GRID_PROPS_DEFAULT_VALUES alphabetically (#13783) @oliviertassinariWe'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
selectItem and getItemDOMElement methods to the TreeView component public APIusePickersTranslations hook public in the pickers component<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.9.0pagination={undefined} (#13349) @sai6855@mui/x-data-grid-pro@7.9.0 Same changes as in @mui/x-data-grid@7.9.0.
@mui/x-data-grid-premium@7.9.0 Same changes as in @mui/x-data-grid-pro@7.9.0.
@mui/x-date-pickers@7.9.0usePickersTranslations hook public (#13657) @flaviendelangle@mui/x-date-pickers-pro@7.9.0 Same changes as in @mui/x-date-pickers@7.9.0.
@mui/x-charts@7.9.0Zoom&Pan to the Pro charts (unreleased) (#13405) @JCQuintas@mui/x-tree-view@7.9.0selectItem and getItemDOMElement methods to the public API (#13485) @flaviendelanglereact_next workflow in CircleCI (#13360) @cherniavskiijscodeshift-add-imports package (#13720) @LukasTy@mui/docs usage (#13713) @LukasTyWe'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
🛰 Introduce server-side data source for improved server integration in the Data Grid.
Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.
To enable, provide a getRows function to the unstable_dataSource prop on the Data Grid component.
const dataSource = {
getRows: async (params: GridServerGetRowsParams) => {
const data = await fetch(
`https://api.example.com/data?${new URLSearchParams({
page: params.page,
pageSize: params.pageSize,
sortModel: JSON.stringify(params.sortModel),
filterModel: JSON.stringify(params.filterModel),
}).toString()}`,
);
return {
rows: data.rows,
totalRows: data.totalRows,
};
},
}
<DataGridPro
unstable_dataSource={dataSource}
{...otherProps}
/>
See server-side data documentation for more details.
📈 Support Date data on the BarChart component
↕️ Support custom column sort icons on the Data Grid
🖱️ Support modifying the expansion trigger on the Tree View components
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.8.0columnHeaderSortIcon slot (#13563) @arminmehhideFooter option is set (#13034) @tarunrajput@mui/x-data-grid-pro@7.8.0 Same changes as in @mui/x-data-grid@7.8.0, plus:
@mui/x-data-grid-premium@7.8.0 Same changes as in @mui/x-data-grid-pro@7.8.0.
@mui/x-date-pickers@7.8.0@mui/x-date-pickers-pro@7.8.0 Same changes as in @mui/x-date-pickers@7.8.0.
@mui/x-charts@7.8.0Date data (#13471) @alexfauquette@mui/x-tree-view@7.8.0expansionTrigger prop (#13533) @noraleonteLuxon throwOnInvalid support (#13621) @LukasTy../internals root (#13633) @JCQuintas\_app folder with monorepo (#13582) @JanpotWe'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.7.1@mui/x-data-grid-pro@7.7.1 Same changes as in @mui/x-data-grid@7.7.1, plus:
getTreeDataPath reference (#13519) @cherniavskii@mui/x-data-grid-premium@7.7.1 Same changes as in @mui/x-data-grid-pro@7.7.1.
@mui/x-date-pickers@7.7.1Space key down (#13510) @flaviendelangleonAccept callback (#13511) @flaviendelangleAdapterDateFnsV3 generated method types (#13464) @alexey-kozlenkovview behavior (#13552) @LukasTy@mui/x-date-pickers-pro@7.7.1 Same changes as in @mui/x-date-pickers@7.7.1, plus:
@mui/x-charts@7.7.1CartesianProvider to use logic in Pro package (#13531) @JCQuintasPro versions of regular charts (#13547) @JCQuintasChartContainerPro for future Zoom changes (#13532) @JCQuintas@mui/x-tree-view@7.7.1useTreeViewId to the core plugins (#13566) @flaviendelangleuseTreeViewId (#13579) @flaviendelangleitemId with escaping characters when using SimpleTreeView (#13487) @oukunanPickerValidDate type override (#13476) @flaviendelangle@testing-library/react dependency (#13478) @LukasTyWe'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.7.0getFilterState method (#13418) @cherniavskii@mui/x-data-grid-pro@7.7.0 Same changes as in @mui/x-data-grid@7.7.0, plus:
@mui/x-data-grid-premium@7.7.0 Same changes as in @mui/x-data-grid-pro@7.7.0.
@mui/x-date-pickers@7.7.0@mui/x-date-pickers-pro@7.7.0 Same changes as in @mui/x-date-pickers@7.7.0.
@mui/x-charts@7.7.0ResponsiveChartContainer (#13398) @alexfauquetteZAxisContextProvider by default in the ChartContainer (#13465) @alexfauquette@mui/x-tree-view@7.7.0renderHeader recipe to the Master Details docs (#13370) @michelengeleneslint-plugin-react-compiler experimental version and rules (#13415) @JCQuintasTreeItem2 (#13314) @flaviendelangleWe'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.6.2areElementSizesEqual utility to improve code readability (#13254) @layerok@mui/x-data-grid-pro@7.6.2 Same changes as in @mui/x-data-grid@7.6.2.
@mui/x-data-grid-premium@7.6.2 Same changes as in @mui/x-data-grid-pro@7.6.2.
@mui/x-date-pickers@7.6.2PageUp and PageDown editing on letter sections (#13310) @arthurbalduiniAdapterDayjs timezone behavior (#13362) @LukasTyuseRtl instead of useTheme to access direction (#13363) @flaviendelangle@mui/x-date-pickers-pro@7.6.2 Same changes as in @mui/x-date-pickers@7.6.2.
@mui/x-charts@7.6.2Initializable type and behaviour to allow checking if a complex context has been initialized. (#13365) @JCQuintasxAxis and yAxis (#13372) @Valyok26tickInterval (#13355) @alexfauquettequickFilterValues (#12919) @michelengelenCSS.escape for the future @oliviertassinaril10n action setup (#13382) @LukasTymarked dependency (#13383) @LukasTy@types/prettier dependency (#13389) @LukasTydocs/.env.local to .gitignore (#13377) @KenanYusufWe'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
🐞 Address the @mui/internal-test-utils added as a direct dependency to @mui/x-data-grid by mistake.
@mui/x-data-grid@7.6.1@mui/internal-test-utils to dev dependency (#13318) @LukasTy@mui/x-data-grid-pro@7.6.1 Same changes as in @mui/x-data-grid@7.6.1.
@mui/x-data-grid-premium@7.6.1 Same changes as in @mui/x-data-grid-pro@7.6.1.
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.6.0GridColumnHeadersProps (#13229) @cherniavskii@mui/x-data-grid-pro@7.6.0 Same changes as in @mui/x-data-grid@7.6.0.
@mui/x-data-grid-premium@7.6.0 Same changes as in @mui/x-data-grid-pro@7.6.0, plus:
@mui/x-date-pickers@7.6.0DateBuilderReturnType when the date is undefined (#13244) @alexey-kozlenkov@mui/x-date-pickers-pro@7.6.0 Same changes as in @mui/x-date-pickers@7.6.0.
@mui/x-charts@7.6.0@mui/x-tree-view@7.6.0l10n script execution with arguments (#13297) @LukasTy@mui/material version used in sandboxes (#13260) @LukasTydescribeTreeView for keyboard navigation tests on disabled items (#13184) @flaviendelangledescribeTreeView for remaining items tests (#13262) @flaviendelangleDateRangePosition type in favor of RangePosition (#13288) @LukasTyWe'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
label to be displayed in BarChart@mui/x-data-grid@7.5.1@mui/x-data-grid-pro@7.5.1 Same changes as in @mui/x-data-grid@7.5.1.
@mui/x-data-grid-premium@7.5.1 Same changes as in @mui/x-data-grid-pro@7.5.1.
@mui/x-date-pickers@7.5.1disableOpenPicker prop behavior (#13212) @LukasTy@mui/x-date-pickers-pro@7.5.1 Same changes as in @mui/x-date-pickers@7.5.1.
@mui/x-charts@7.5.1label to be displayed inside bars in BarChart (#12988) @JCQuintasapiRef methods doc examples (#13193) @flaviendelangleraw-loader package (#13160) @LukasTyyarn to pnpm in PropTypes comment (#13167) @LukasTydescribeTreeView for items test (partial) (#12893) @flaviendelangledescribeTreeView for keyboard selection tests (#13164) @flaviendelangledescribeTreeView for navigation tests (#12907) @flaviendelangledescribeTreeView for items rendering edge-case tests (#13168) @flaviendelangletest:coverage:inspect to allow easier debugging (#13198) @JCQuintasyarn proptypes vs pnpm proptypes (#13199) @JCQuintasnx for lerna tasks (#13166) @LukasTyWe'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.5.0rowModesModel controlled prop (#13056) @Janpot@mui/x-data-grid-pro@7.5.0 Same changes as in @mui/x-data-grid@7.5.0.
@mui/x-data-grid-premium@7.5.0 Same changes as in @mui/x-data-grid-pro@7.5.0.
@mui/x-date-pickers@7.5.0textField slot placeholder value (#13148) @arthurbalduiniAdapterMomentJalaali regression (#13144) @LukasTyAdapterDateFnsBase in Jalali adapters (#13075) @LukasTy@mui/x-date-pickers-pro@7.5.0 Same changes as in @mui/x-date-pickers@7.5.0.
@mui/x-charts@7.5.0trigger=axis now follow touch on mobile (#13043) @wzdorowaseries.label property to receive a function with the "location" it is going to be displayed on (#12830) @JCQuintasuseSlotProps types (#13141) @alexfauquette@mui/x-tree-view@7.5.0@mui/x-date-pickers imports (#13120) @LukasTySectionTitle component in the doc (#13139) @alexfauquetteWe'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
id attribute on shortcut items of the Date and Time Pickersdate-fns-jalali v3 in the Date and Time PickersBarChart@mui/x-data-grid@7.4.0svg element (#13028) @oukunan@mui/x-data-grid-pro@7.4.0 Same changes as in @mui/x-data-grid@7.4.0.
@mui/x-data-grid-premium@7.4.0 Same changes as in @mui/x-data-grid-pro@7.4.0.
@mui/x-date-pickers@7.4.0AdapterDateFnsJalaliV3 adapter (#12891) @smmoosaviid attribute on shortcut items (#12976) @noraleonte@mui/x-date-pickers-pro@7.4.0 Same changes as in @mui/x-date-pickers@7.4.0.
@mui/x-charts@7.4.0ChartsGrid to themeAugmentation (#13026) @noraleonteBarChart (#12834) @JCQuintas@mui/x-tree-view@7.4.0TreeItem2 (#12889) @flaviendelangleWe'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
id attribute.
It should not affect you, but if you were relying on the gradient id attribute, please update your usage.<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@mui/x-data-grid@7.3.2formattedValue from the edit value when passing to renderEditCell (#12870) @cherniavskiiprops.rowCount change (#12833) @MBilalShafi@mui/x-data-grid-pro@7.3.2 Same changes as in @mui/x-data-grid@7.3.2.
@mui/x-data-grid-premium@7.3.2 Same changes as in @mui/x-data-grid-pro@7.3.2, plus:
@mui/x-date-pickers@7.3.2viewRenderers prop description (#12915) @flaviendelanglePickersDay (#12920) @flaviendelangle@mui/x-date-pickers-pro@7.3.2 Same changes as in @mui/x-date-pickers@7.3.2.
@mui/x-charts@7.3.2prop.slots and prop.slotProps not passed to <ChartsTooltip /> (#12939) @JCQuintasnext.config settings (#12861) @oliviertassinari@mui/docs/HighlightedCode (#12848) @alexfauquettet command (#12948) @LukasTyWe'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.3.1columnHeaders slot (#12768) @cherniavskii@mui/x-data-grid-pro@7.3.1 Same changes as in @mui/x-data-grid@7.3.1.
@mui/x-data-grid-premium@7.3.1 Same changes as in @mui/x-data-grid-pro@7.3.1.
@mui/x-date-pickers@7.3.1@mui/x-date-pickers-pro@7.3.1 Same changes as in @mui/x-date-pickers@7.3.1.
@mui/x-charts@7.3.1BarCharts (#12859) @JCQuintas@mui/x-tree-view@7.3.1aria-activedescendant attribute (#12867) @flaviendelangletype-ahead (#12827) @flaviendelanglesx props (#12791) @derek-0000l10n GH workflow (#12895) @LukasTysetupFiles entries in package.json (#12899) @LukasTydescribeTreeView for focus tests (#12698) @flaviendelangledescribeTreeView for type-ahead tests (#12811) @flaviendelanglepnpm (#11875) @LukasTyWe'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.2.0api property to GridCallbackDetails (#12742) @sai6855date/dateTime columns (#12709) @cherniavskii@mui/x-data-grid-pro@7.2.0 Same changes as in @mui/x-data-grid@7.2.0.
@mui/x-data-grid-premium@7.2.0 Same changes as in @mui/x-data-grid-pro@7.2.0, plus:
@mui/x-date-pickers@7.2.0@mui/x-date-pickers-pro@7.2.0 Same changes as in @mui/x-date-pickers@7.2.0, plus:
@mui/x-charts@7.2.0tickLabelInterval not working on YAxis (#12746) @JCQuintas@mui/x-tree-view@7.2.0getNavigableChildrenIds method (#12713) @flaviendelanglestate.items.itemTree (#12717) @flaviendelangleinstance and publicAPI methods from plugin and populate the main objects inside useTreeView (#12650) @flaviendelangleAxisFormatter documentation for customizing tick/tooltip value formatting (#12700) @JCQuintasl10n PR packages (#12735) @LukasTydescribeTreeView for icons tests (#12672) @flaviendelangledescribeTreeView in existing tests for useTreeViewItems (#12732) @flaviendelangleWe'd like to offer a big thanks to the 20 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 20 contributors who made this release possible. Here are some highlights ✨:
setItemExpansion Tree View API method (#12595) @flaviendelangle@mui/x-data-grid@7.1.1ColDefChangesGridNoSnap demo crash (#12663) @MBilalShafirowCount is used with client-side pagination (#12448) @michelengelenGridFormatterParams completely (#12660) @romgrk@mui/x-data-grid-pro@7.1.1 Same changes as in @mui/x-data-grid@7.1.1.
@mui/x-data-grid-premium@7.1.1 Same changes as in @mui/x-data-grid-pro@7.1.1.
@mui/x-date-pickers@7.1.1readOnly behavior (#12609) @LukasTy@mui/x-date-pickers-pro@7.1.1 Same changes as in @mui/x-date-pickers@7.1.1, plus:
@mui/x-charts@7.1.1tickInterval usage for y-axis (#12592) @alexfauquetteid is a number (#12677) @JCQuintassx property on ChartsTooltip (#12659) @JCQuintas@mui/x-tree-view@7.1.1publicAPI methods (#12649) @flaviendelangleRichTreeViewPro component (not released yet) (#12610) @flaviendelanglesetItemExpansion (#12595) @flaviendelanglecheckboxSelectionVisibleOnly prop (#12646) @michelengelen_action: 'delete' in processRowUpdate (#12670) @michelengelenPieShapeNoSnap demo (#12636) @alp-exgetItemId prop description (#12637) @flaviendelanglemargin usage more visible (#12591) @alexfauquetteday from the default dayOfWeekFormatter function params (#12644) @LukasTyTreeItem2 for icon expansion example on RichTreeView (#12563) @flaviendelanglemaster to v6 action (#12648) @LukasTy@mui/x-tree-view-pro/themeAugmentation (#12674) @flaviendelangledescribeTreeView to run test on SimpleTreeView and RichTreeView, using TreeItem and TreeItem2 + migrate expansion tests (#12428) @flaviendelangletest-types CI step allowed memory (#12651) @LukasTyexpress package (#12602) @LukasTyl10n PR belongs to (#12639) @LukasTydescribeTreeView for selection tests (#12647) @flaviendelangleWe'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
resizeThrottleMs prop (#12556) @romgrk@mui/x-data-grid@7.1.0resizeThrottleMs prop (#12556) @romgrkrowEditStop event if row has fields with errors (#11383) @cherniavskiiGridToolbarQuickFilter component (#12484) @jhawkins11@mui/x-data-grid-pro@7.1.0 Same changes as in @mui/x-data-grid@7.1.0.
@mui/x-data-grid-premium@7.1.0 Same changes as in @mui/x-data-grid-pro@7.1.0.
@mui/x-date-pickers@7.1.0@mui/zero-runtime (stop using ownerState in styled) (#12003) @flaviendelangle@mui/x-date-pickers-pro@7.1.0 Same changes as in @mui/x-date-pickers@7.1.0, plus:
readOnly (#12593) @LukasTy@mui/x-charts@7.1.0@mui/x-tree-view@7.1.0RichTreeView (#12512) @flaviendelanglel10n script on Windows (#12550) @LukasTyDateTimeRangePicker tag in releaseChangelog (#12526) @LukasTyMigration guides are available with a complete list of the breaking changes:
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.
@mui/x-data-grid@7.0.0ElementType usage (#12479) @cherniavskiirows an optional prop (#12478) @MBilalShafi@mui/x-data-grid-pro@7.0.0 Same changes as in @mui/x-data-grid@7.0.0.
@mui/x-data-grid-premium@7.0.0 Same changes as in @mui/x-data-grid-pro@7.0.0, plus:
DesktopDateTimePicker view rendering has been optimized by using the same technique as for DesktopDateTimeRangePicker.
dateTimeViewRenderers have been removed in favor of reusing existing time view renderers (renderTimeViewClock, renderDigitalClockTimeView and renderMultiSectionDigitalClockTimeView) and date view renderer (renderDateViewCalendar).renderTimeViewClock to time view renderers will no longer revert to the old behavior of rendering only date or time view.@mui/x-date-pickers@7.0.0DesktopDateTimePicker (#12441) @LukasTy@mui/x-date-pickers-pro@7.0.0 Same changes as in @mui/x-date-pickers@7.0.0, plus:
JSDoc (#12518) @LukasTy@mui/x-charts@7.0.0CartesianContextProvider (#12461) @JanpotnodeId prop used by the TreeItem has been renamed to itemId for consistency: <TreeView>
- <TreeItem label="Item 1" nodeId="one">
+ <TreeItem label="Item 1" itemId="one">
</TreeView>
The focus is now applied to the Tree Item root element instead of the Tree View root element.
This change will allow new features that require the focus to be on the Tree Item, like the drag and drop reordering of items. It also solves several issues with focus management, like the inability to scroll to the focused item when a lot of items are rendered.
This will mostly impact how you write tests to interact with the Tree View:
For example, if you were writing a test with react-testing-library, here is what the changes could look like:
it('test example on first item', () => {
- const { getByRole } = render(
+ const { getAllByRole } = render(
<SimpleTreeView>
<TreeItem nodeId="one" />
<TreeItem nodeId="two" />
</SimpleTreeView>
);
- const tree = getByRole('tree');
+ const firstTreeItem = getAllByRole('treeitem')[0];
act(() => {
- tree.focus();
+ firstTreeItem.focus();
});
- fireEvent.keyDown(tree, { key: 'ArrowDown' });
+ fireEvent.keyDown(firstTreeItem, { key: 'ArrowDown' });
})
@mui/x-tree-view@7.0.0nodeId to itemId (#12418) @noraleonteContentComponent prop to avoid using the word "node" (#12476) @flaviendelangle@mui/x-codemod@7.0.0@mui/material peer dependency for all packages (#12516) @LukasTyno-restricted-imports ESLint rule not working for Data Grid packages (#12477) @cherniavskiino-response action runs (#12491) @michaldudaklegacy browserlistrc entry (#12415) @LukasTyWe'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
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.@mui/x-data-grid@7.0.0-beta.7rowCount part of the state (#12381) @MBilalShafibaseSwitch slot (#12439) @romgrk@mui/x-data-grid-pro@7.0.0-beta.7 Same changes as in @mui/x-data-grid@7.0.0-beta.7, plus:
inputRef to the props passed to colDef.renderHeaderFilter (#12328) @vovarudomanenko@mui/x-data-grid-premium@7.0.0-beta.7 Same changes as in @mui/x-data-grid-pro@7.0.0-beta.7, plus:
@mui/x-date-pickers@7.0.0-beta.7tabIndex on accessible field DOM structure (#12311) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-beta.7 Same changes as in @mui/x-date-pickers@7.0.0-beta.7.
@mui/x-charts@7.0.0-beta.7The onNodeFocus callback has been renamed to onItemFocus for consistency:
<SimpleTreeView
- onNodeFocus={onNodeFocus}
+ onItemFocus={onItemFocus}
/>
@mui/x-tree-view@7.0.0-beta.7TreeItem2 component and a new useTreeItem2 hook (#11721) @flaviendelangleonNodeFocus to onItemFocus (#12419) @noraleontelegacy bundle drop mention in migration pages (#12424) @LukasTyInfo import (#12427) @LukasTyrel="noreferrer" by rel="noopener" @oliviertassinaridate-fns weekStarsOn overriding example (#12416) @LukasTyWe'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.0.0-beta.6sortModel (#12325) @MBilalShafistopCellMode event in renderEditRating component (#12335) @sai6855@mui/x-data-grid-pro@7.0.0-beta.6 Same changes as in @mui/x-data-grid@7.0.0-beta.6, plus:
onRowsScrollEnd to use IntersectionObserver (#8672) @DanailH@mui/x-data-grid-premium@7.0.0-beta.6 Same changes as in @mui/x-data-grid-pro@7.0.0-beta.6.
@mui/x-charts@7.0.0-beta.6The component used to animate the item children is now defined as a slot on the TreeItem component.
If you were passing a TransitionComponent or TransitionProps to your TreeItem component,
you need to use the new groupTransition slot on this component:
<SimpleTreeView>
<TreeItem
nodeId="1"
label="Node 1"
- TransitionComponent={Fade}
+ slots={{ groupTransition: Fade }}
- TransitionProps={{ timeout: 600 }}
+ slotProps={{ groupTransition: { timeout: 600 } }}
/>
</SimpleTreeView>
The group class of the TreeItem component has been renamed to groupTransition to match with its new slot name.
const StyledTreeItem = styled(TreeItem)({
- [`& .${treeItemClasses.group}`]: {
+ [`& .${treeItemClasses.groupTransition}`]: {
marginLeft: 20,
},
});
@mui/x-tree-view@7.0.0-beta.6props.items (#12359) @flaviendelangleRichTreeView, do not use the item id as the HTML id attribute (#12319) @flaviendelanglegetItem (#12251) @flaviendelangleTransitionComponent and TransitionProps with a groupTransition slot (#12336) @flaviendelanglez-index usage in SVG (#12337) @alexfauquetteRichTreeView customization docs (#12231) @noraleonteCharts test (#11551) @alexfauquetteWe'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
getSortComparator for more advanced sorting behaviors (#12215) @cherniavskiiuse client directive to the Grid packages (#11803) @MBilalShafi@mui/x-data-grid@7.0.0-beta.5getSortComparator for more advanced sorting behaviors (#12215) @cherniavskiiuse client directive to the Grid packages (#11803) @MBilalShafidisableResetButton and disableShowHideToggle flags to not exclude each other (#12169) @adyryquerySelector call (#12229) @romgrkonColumnWidthChange called before autosize affects column width (#12140) @shaharyar-shamshiupsertFilterItems removing filters that are not part of the update (#11954) @gitstart@mui/x-data-grid-pro@7.0.0-beta.5 Same changes as in @mui/x-data-grid@7.0.0-beta.5, plus:
@mui/x-data-grid-premium@7.0.0-beta.5 Same changes as in @mui/x-data-grid-pro@7.0.0-beta.5, plus:
@mui/x-date-pickers@7.0.0-beta.5@mui/x-date-pickers-pro@7.0.0-beta.5 Same changes as in @mui/x-date-pickers@7.0.0-beta.5.
@mui/x-charts@7.0.0-beta.5@mui/x-tree-view@7.0.0-beta.5getComponentInfo RegExp (#12241) @flaviendelanglewindow. reference for common globals @oliviertassinarino-response workflow (#12193) @MBilalShafiWe'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
legacy bundle that used to support old browsers like IE11 is no longer included..MuiDataGrid-cellContent has been removed, use .MuiDataGrid-cell to style the cells.@mui/x-data-grid@7.0.0-beta.4is any of filter operator (#11939) @gitstart@mui/x-data-grid-pro@7.0.0-beta.4 Same changes as in @mui/x-data-grid@7.0.0-beta.4.
@mui/x-data-grid-premium@7.0.0-beta.4 Same changes as in @mui/x-data-grid-pro@7.0.0-beta.4.
The selectedSections prop no longer accepts start and end indexes.
When selecting several — but not all — sections, the field components were not behaving correctly, you can now only select one or all sections:
<DateField
- selectedSections={{ startIndex: 0, endIndex: 0 }}
+ selectedSections={0}
// If the field has 3 sections
- selectedSections={{ startIndex: 0, endIndex: 2 }}
+ selectedSections="all"
/>
The headless field hooks (e.g.: useDateField) now returns a new prop called enableAccessibleFieldDOMStructure.
This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new accessible DOM structure.
When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove enableAccessibleFieldDOMStructure before it is passed to the DOM:
function MyCustomTextField(props) {
const {
+ // Should be ignored
+ enableAccessibleFieldDOMStructure,
// ... rest of the props you are using
} = props;
return ( /* Some UI to edit the date */ )
}
function MyCustomField(props) {
const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
...props,
+ // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application
+ enableAccessibleFieldDOMStructure: false,
});
return <MyCustomTextField ref={ref} {...fieldResponse} />;
}
function App() {
return <DatePicker slots={{ field: MyCustomField }} />;
}
The following internal types were exported by mistake and have been removed from the public API:
UseDateFieldDefaultizedPropsUseTimeFieldDefaultizedPropsUseDateTimeFieldDefaultizedPropsUseSingleInputDateRangeFieldComponentPropsUseSingleInputTimeRangeFieldComponentPropsUseSingleInputDateTimeRangeFieldComponentProps@mui/x-date-pickers@7.0.0-beta.4PickersTextField component in the fields (#10649) @flaviendelangleDateTimePickerTabs (#12096) @LukasTy@mui/x-date-pickers-pro@7.0.0-beta.4 Same changes as in @mui/x-date-pickers@7.0.0-beta.4.
@mui/x-charts@7.0.0-beta.4These components are no longer exported from @mui/x-charts:
CartesianContextProviderDrawingProvider@mui/x-charts@7.0.0-beta.4@mui/x-tree-view@7.0.0-beta.4findIndex to support IE11 (#12129) @flaviendelanglepro plan (#12047) @alexfauquetteundefined (#12128) @alexfauquetteexperimental.cpus to control amount of export workers in Next.js (#12095) @JanpotdescribeConformance (#12130) @michaldudak[docs] Add missing Charts breaking change steps (#11971) @alexfauquette
We'd like to offer a big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@v7.0.0-beta.2removeAllFilterItems as a reason for onFilterModelChange callback (#11911) @shaharyar-shamshipageSizeOptions prop (#11609) @pcorpetlastPage in GridPagination (#11958) @MBilalShafi@mui/x-data-grid-pro@v7.0.0-beta.2 Same changes as in @mui/x-data-grid@v7.0.0-beta.2.
@mui/x-data-grid-premium@v7.0.0-beta.2 Same changes as in @mui/x-data-grid-pro@v7.0.0-beta.2, plus:
@mui/x-date-pickers@v7.0.0-beta.2isWithinRange method (#11936) @LukasTyTDate (#11791) @flaviendelangle@mui/x-date-pickers-pro@v7.0.0-beta.2 Same changes as in @mui/x-date-pickers@v7.0.0-beta.2.
@mui/x-charts@v7.0.0-beta.2reverse property to axes (#11899) @alexfauquette@mui/x-tree-view@v7.0.0-beta.2If you're using the commercial license, you need to update the import path:
-import { LicenseInfo } from '@mui/x-license-pro';
+import { LicenseInfo } from '@mui/x-license';
@mui/x-license@v7.0.0-beta.2
@mui/x-license-pro to @mui/x-license (#11938) @cherniavskiiAdapterDateFnsV3 on the Getting Started page (#11985) @flaviendelangleCharts breaking change steps (#11971) @alexfauquetteChartsTooltip typo (#11961) @thisisharsh7Localization documentation sections (#11989) @LukasTydocs:serve script (#11935) @cherniavskiiLicenseInfo re-exports (#11956) @cherniavskiitest_types failing on the next branch (#11944) @cherniavskiitest_static on the next branch (#11977) @cherniavskiiWe'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
🏃 Improve the filtering performance of the Data Grid by changing the GridColDef methods signatures (#11573) @cherniavskii
🎁 The Line Chart component now has animation by default (#11620) @alexfauquette
🚀 All charts have click handlers (#11411) @alexfauquette Test their respective documentation demonstrations to know more about the data format:
Big thanks to @giladappsforce and @yaredtsy for their contribution on exploring this feature.
The signature of GridColDef['valueGetter'] has been changed for performance reasons:
- valueGetter: ({ value, row }) => value,
+ valueGetter: (value, row, column, apiRef) => value,
The GridValueGetterParams interface has been removed:
- const customValueGetter = (params: GridValueGetterParams) => params.row.budget;
+ const customValueGetter: GridValueGetterFn = (value, row) => row.budget;
The signature of GridColDef['valueFormatter'] has been changed for performance reasons:
- valueFormatter: ({ value }) => value,
+ valueFormatter: (value, row, column, apiRef) => value,
The GridValueFormatterParams interface has been removed:
- const gridDateFormatter = ({ value, field, id }: GridValueFormatterParams<Date>) => value.toLocaleDateString();
+ const gridDateFormatter: GridValueFormatter = (value: Date) => value.toLocaleDateString();
The signature of GridColDef['valueSetter'] has been changed for performance reasons:
- valueSetter: (params) => {
- const [firstName, lastName] = params.value!.toString().split(' ');
- return { ...params.row, firstName, lastName };
- }
+ valueSetter: (value, row) => {
+ const [firstName, lastName] = value!.toString().split(' ');
+ return { ...row, firstName, lastName };
+}
The GridValueSetterParams interface has been removed:
- const setFullName = (params: GridValueSetterParams) => {
- const [firstName, lastName] = params.value!.toString().split(' ');
- return { ...params.row, firstName, lastName };
- };
+ const setFullName: GridValueSetter<Row> = (value, row) => {
+ const [firstName, lastName] = value!.toString().split(' ');
+ return { ...row, firstName, lastName };
+ }
The signature of GridColDef['valueParser'] has been changed for performance reasons:
- valueParser: (value, params: GridCellParams) => value.toLowerCase(),
+ valueParser: (value, row, column, apiRef) => value.toLowerCase(),
The signature of GridColDef['colSpan'] has been changed for performance reasons:
- colSpan: ({ row, field, value }: GridCellParams) => (row.id === 'total' ? 2 : 1),
+ colSpan: (value, row, column, apiRef) => (row.id === 'total' ? 2 : 1),
The signature of GridColDef['pastedValueParser'] has been changed for performance reasons:
- pastedValueParser: (value, params) => new Date(value),
+ pastedValueParser: (value, row, column, apiRef) => new Date(value),
The signature of GridColDef['groupingValueGetter'] has been changed for performance reasons:
- groupingValueGetter: (params) => params.value.name,
+ groupingValueGetter: (value: { name: string }) => value.name,
@mui/x-data-grid@7.0.0-beta.1toggleAllMode prop to the columnsManagement slot (#10794) @H999GridColDef methods signatures (#11573) @cherniavskii@mui/x-data-grid-pro@7.0.0-beta.1 Same changes as in @mui/x-data-grid@7.0.0-beta.1.
@mui/x-data-grid-premium@7.0.0-beta.1 Same changes as in @mui/x-data-grid-pro@7.0.0-beta.1.
@mui/x-date-pickers@7.0.0-beta.1@mui/x-date-pickers-pro@7.0.0-beta.1 Same changes as in @mui/x-date-pickers@7.0.0-beta.1.
The line chart now have animation by default.
You can disable it with skipAnimation prop.
See animation documentation for more information.
Pie charts onClick get renamed onItemClick for consistency with other charts click callback.
@mui/x-charts@7.0.0-beta.1
onClick support (#11411) @alexfauquetteWe are glad to announce MUI X v7 beta! This version has several improvements, bug fixes, and exciting features 🎉. We want to offer a big thanks to the
We are glad to announce MUI X v7 beta! This version has several improvements, bug fixes, and exciting features 🎉. We want to offer a big thanks to the 7 contributors who made this release possible ✨:
🚀 Release the Date Time Range Picker component (#9528) @LukasTy
<img src="https://github.com/mui/mui-x/assets/4941090/122bb7bc-5e72-4e11-a8e5-96f3026de922" width="510" height="652" alt="Date Time Range Picker example" />
🎁 New column management panel design for the Data Grid (#11770) @MBilalShafi
<img width="310" alt="image" src="https://github.com/mui/mui-x/assets/12609561/a79dac8b-d54d-4e69-a63a-ef78f3993f37">
🐞 Bugfixes
📚 Documentation improvements
The columns management component has been redesigned and the component was extracted from the ColumnsPanel which now only serves as a wrapper to display the component above the headers as a panel. As a result, a new slot columnsManagement and the related prop slotProps.columnsManagement have been introduced. The props corresponding to the columns management component which were previously passed to the prop slotProps.columnsPanel should now be passed to slotProps.columnsManagement. slotProps.columnsPanel could still be used to override props corresponding to the Panel component used in ColumnsPanel which uses Popper component under the hood.
<DataGrid
slotProps={{
- columnsPanel: {
+ columnsManagement: {
sort: 'asc',
autoFocusSearchField: false,
},
}}
/>
Show all and Hide all buttons in the ColumnsPanel have been combined into one Show/Hide All toggle in the new columns management component. The related props disableShowAllButton and disableHideAllButton have been replaced with a new prop disableShowHideToggle.
<DataGrid
- disableShowAllButton
- disableHideAllButton
+ disableShowHideToggle
/>
@mui/x-data-grid@7.0.0-beta.0GridColumnTypes interface for custom column types (#11742) @cherniavskiiapiRef early (#11792) @cherniavskii@mui/x-data-grid-pro@7.0.0-beta.0 Same changes as in @mui/x-data-grid@7.0.0-beta.0.
@mui/x-data-grid-premium@7.0.0-beta.0 Same changes as in @mui/x-data-grid-pro@7.0.0-beta.0.
@mui/x-date-pickers@7.0.0-beta.0layout.tabs class to Tabs slot (#11781) @LukasTy@mui/x-date-pickers-pro@7.0.0-beta.0 Same changes as in @mui/x-date-pickers@7.0.0-beta.0, plus:
DateTimeRangePicker component (#9528) @LukasTyDateTimeRangePicker theme augmentation (#11814) @LukasTycalendars prop on Mobile (#11752) @LukasTy@mui/x-tree-view@7.0.0-beta.0contextValue to the headless tree view doc (#11705) @flaviendelangledisableSelection prop (#11821) @flaviendelangleDateTimeRangePicker in relevant demos (#11815) @LukasTyWe'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
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.
@mui/x-data-grid@7.0.0-alpha.9filterModel.logicOperator (#11673) @MBilalShaficolumn grouping feature stable (#11698) @MBilalShafiariaV7 experimental flag (#11428) @cherniavskii@mui/x-data-grid-pro@7.0.0-alpha.9 Same changes as in @mui/x-data-grid@7.0.0-alpha.9, plus:
@mui/x-data-grid-premium@7.0.0-alpha.9 Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.9, plus:
The locales export has been removed from the root of the packages.
If you were importing locales from the root, be sure to update it:
-import { frFR } from '@mui/x-date-pickers';
+import { frFR } from '@mui/x-date-pickers/locales';
@mui/x-date-pickers@7.0.0-alpha.9PickersTextField and its dependencies public (#11581) @flaviendelanglegetWeekNumber behavior (#11697) @LukasTylocales (#11612) @LukasTy@mui/x-date-pickers-pro@7.0.0-alpha.9 Same changes as in @mui/x-date-pickers@7.0.0-alpha.9.
@mui/x-charts@7.0.0-alpha.9innerRadius and outerRadius to the DOM (#11689) @alexfauquettestackOffset for LineChart (#11647) @alexfauquetteThe expandIcon / defaultExpandIcon props, used to expand the children of a node (rendered when it is collapsed),
is now defined as a slot both on the Tree View and the Tree Item components.
If you were using the ChevronRight icon from @mui/icons-material,
you can stop passing it to your component because it is now the default value:
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
<SimpleTreeView
- defaultExpandIcon={<ChevronRightIcon />}
>
{items}
</SimpleTreeView>
If you were passing another icon to your Tree View component,
you need to use the new expandIcon slot on this component:
<SimpleTreeView
- defaultExpandIcon={<MyCustomExpandIcon />}
+ slots={{ expandIcon: MyCustomExpandIcon }}
>
{items}
</SimpleTreeView>
If you were passing another icon to your Tree Item component,
you need to use the new expandIcon slot on this component:
<SimpleTreeView>
<TreeItem
nodeId="1"
label="Node 1"
- expandIcon={<MyCustomExpandIcon />}
+ slots={{ expandIcon: MyCustomExpandIcon }}
/>
</SimpleTreeView>
The collapseIcon / defaultCollapseIcon props, used to collapse the children of a node (rendered when it is expanded),
is now defined as a slot both on the Tree View and the Tree Item components.
If you were using the ExpandMore icon from @mui/icons-material,
you can stop passing it to your component because it is now the default value:
- import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
<SimpleTreeView
- defaultCollapseIcon={<ExpandMoreIcon />}
>
{items}
</SimpleTreeView>
If you were passing another icon to your Tree View component,
you need to use the new collapseIcon slot on this component:
<SimpleTreeView
- defaultCollapseIcon={<MyCustomCollapseIcon />}
+ slots={{ collapseIcon: MyCustomCollapseIcon }}
>
{items}
</SimpleTreeView>
If you were passing another icon to your Tree Item component,
you need to use the new collapseIcon slot on this component:
<SimpleTreeView>
<TreeItem
nodeId="1"
label="Node 1"
- collapseIcon={<MyCustomCollapseIcon />}
+ slots={{ collapseIcon: MyCustomCollapseIcon }}
/>
</SimpleTreeView>
The useTreeItem hook has been renamed useTreeItemState.
This will help create a new headless version of the TreeItem component based on a future useTreeItem hook.
-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.nodeId);
+ const { disabled } = useTreeItemState(props.nodeId);
// Render some UI
});
function App() {
return (
<SimpleTreeView>
<TreeItem ContentComponent={CustomContent} />
</SimpleTreeView>
)
}
The parentIcon prop has been removed from the Tree View components.
If you were passing an icon to your Tree View component,
you can achieve the same behavior
by passing the same icon to both the collapseIcon and the expandIcon slots on this component:
<SimpleTreeView
- defaultParentIcon={<MyCustomParentIcon />}
+ slots={{ collapseIcon: MyCustomParentIcon, expandIcon: MyCustomParentIcon }}
>
{items}
</SimpleTreeView>
The endIcon / defaultEndIcon props, rendered next to an item without children,
is now defined as a slot both on the Tree View and the Tree Item components.
If you were passing an icon to your Tree View component,
you need to use the new endIcon slot on this component:
<SimpleTreeView
- defaultEndIcon={<MyCustomEndIcon />}
+ slots={{ endIcon: MyCustomEndIcon }}
>
{items}
</SimpleTreeView>
If you were passing an icon to your Tree Item component,
you need to use the new endIcon slot on this component:
<SimpleTreeView>
<TreeItem
nodeId="1"
label="Node 1"
- endIcon={<MyCustomEndIcon />}
+ slots={{ endIcon: MyCustomEndIcon }}
/>
</SimpleTreeView>
The icon prop, rendered next to an item without children,
is now defined as a slot on the Tree Item component.
If you were passing an icon to your Tree Item component,
you need to use the new icon slot on this component:
<SimpleTreeView>
<TreeItem
nodeId="1"
label="Node 1"
- icon={<MyCustomIcon />}
+ slots={{ icon: MyCustomIcon }}
/>
</SimpleTreeView>
@mui/x-tree-view@7.0.0-alpha.9Theme generic to variants (#11480) @dhulmeuseTreeItem to useTreeItemState (#11712) @flaviendelangleslots and slotProps on the Tree View components (#11664) @flaviendelanglepageSizeOptions prop documentation (#11682) @oliviertassinariclassName prop (#11693) @oliviertassinariSimpleTreeView customization examples (#11424) @noraleonte@mui/material peer dependency for all packages (#11692) @LukasTykarma run in parallel (#11571) @romgrkkarma-parallel run under a new command (#11716) @romgrkWe'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
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';
@mui/x-data-grid@7.0.0-alpha.8@mui/x-data-grid-pro@7.0.0-alpha.8 Same changes as in @mui/x-data-grid@7.0.0-alpha.8.
@mui/x-data-grid-premium@7.0.0-alpha.8 Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.8.
@mui/x-date-pickers@7.0.0-alpha.8date-fns@3.x adapter (#11462) @LukasTyOpenPickerButton (#11642) @noraleonteDateRange to @mui/x-date-pickers-pro/models (#11611) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-alpha.8 Same changes as in @mui/x-date-pickers@7.0.0-alpha.8.
@mui/x-tree-view@7.0.0-alpha.8onKeyDown handler (#11481) @flaviendelanglex-date-pickers-pro demo adapter imports (#11628) @LukasTygit diff format @oliviertassinarijsdom version (#11652) @cherniavskiiWe'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
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
@mui/x-data-grid@7.0.0-alpha.7hasEval when disableEval is set (#11516) @reihwaldautoPageSize and autoHeight (#11585) @Sboonnyeval with new Function (#11557) @oliviertassinariautoPageSize is used with autoHeight (#11554) @Sboonny@mui/x-data-grid-pro@7.0.0-alpha.7 Same changes as in @mui/x-data-grid@7.0.0-alpha.7.
@mui/x-data-grid-premium@7.0.0-alpha.7 Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.7.
@mui/x-date-pickers@7.0.0-alpha.7@mui/x-date-pickers-pro@7.0.0-alpha.7 Same changes as in @mui/x-date-pickers@7.0.0-alpha.7.
@mui/x-charts@7.0.0-alpha.7arcLabelRadius property (#11487) @alexfauquettenull in line chart using dataset (#11550) @alexfauquetteThe expansion props have been renamed to better describe their behaviors:
| Old name | New name |
|---|---|
onNodeToggle |
onExpandedNodesChange |
expanded |
expandedNodes |
defaultExpanded |
defaultExpandedNodes |
<TreeView
- onNodeToggle={handleExpansionChange}
+ onExpandedNodesChange={handleExpansionChange}
- expanded={expandedNodes}
+ expandedNodes={expandedNodes}
- defaultExpanded={defaultExpandedNodes}
+ defaultExpandedNodes={defaultExpandedNodes}
/>
The selection props have been renamed to better describe their behaviors:
| Old name | New name |
|---|---|
onNodeSelect |
onSelectedNodesChange |
selected |
selectedNodes |
defaultSelected |
defaultSelectedNodes |
<TreeView
- onNodeSelect={handleSelectionChange}
+ onSelectedNodesChange={handleSelectionChange}
- selected={selectedNodes}
+ selectedNodes={selectedNodes}
- defaultSelected={defaultSelectedNodes}
+ defaultSelectedNodes={defaultSelectedNodes}
/>
@mui/x-tree-view@7.0.0-alpha.7items prop (#11059) @flaviendelangleonNodeExpansionToggle prop (#11547) @flaviendelanglenext.config.js (#11514) @oliviertassinari[core] Add missing breaking changes to changelog (#11420) @MBilalShafi
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 filterModelThe 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:
GridEditSingleSelectCellGridFilterInputSingleSelectGridFilterInputMultipleSingleSelectUse 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 (e.g. filter panel) will set the value as a Date object.
@mui/x-data-grid@7.0.0-alpha.6checkboxSelection respect the disableMultipleRowSelection prop (#11448) @cherniavskiiDate objects in filter model (#7069) @cherniavskiiSelects by default (#11330) @cherniavskii@mui/x-data-grid-pro@7.0.0-alpha.6 Same changes as in @mui/x-data-grid@7.0.0-alpha.6.
@mui/x-data-grid-premium@7.0.0-alpha.6 Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.6.
@mui/x-date-pickers@7.0.0-alpha.6PickersInput sizing styles (#11392) @noraleontePickersTextField standard and filled variants (#11250) @noraleontePickersSectionList (#11449) @flaviendelanglePickersSectionList (#11352) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-alpha.6 Same changes as in @mui/x-date-pickers@7.0.0-alpha.6.
@mui/x-charts@7.0.0-alpha.5ChartsText component public (#11370) @alexfauquettefalse default values for boolean props (#11477) @cherniavskiiname prop examples (#11422) @LukasTydate-fns package to v2 in codesandbox (#11463) @LukasTycherry-pick action (#11446) @LukasTyWe'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
instanceId prop is now required for state selectors.
This prop is used to distinguish between multiple Data Grid instances on the same page.
See migration docs for more details.@mui/x-data-grid@7.0.0-alpha.5instanceId required for state selectors (#11395) @cherniavskii@mui/x-data-grid-pro@7.0.0-alpha.5 Same changes as in @mui/x-data-grid@7.0.0-alpha.5.
@mui/x-data-grid-premium@7.0.0-alpha.5 Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.5.
The slot interfaces got renamed to match with @mui/base naming.
The SlotsComponent suffix has been replaced with Slots and SlotsComponentsProps with SlotProps.
- DateCalendarSlotsComponent
+ DateCalendarSlots
- DateCalendarSlotsComponentsProps
+ DateCalendarSlotProps
Move inputRef inside the props passed to the field hooks
The field hooks now only receive the props instead of an object containing both the props and the inputRef.
- const { inputRef, ...otherProps } = props
- const fieldResponse = useDateField({ props: otherProps, inputRef });
+ const fieldResponse = useDateField(props);
If you are using a multi input range field hook, the same applies to startInputRef and endInputRef params
- const { inputRef: startInputRef, ...otherStartTextFieldProps } = startTextFieldProps
- const { inputRef: endInputRef, ...otherEndTextFieldProps } = endTextFieldProps
const fieldResponse = useMultiInputDateRangeField({
sharedProps,
- startTextFieldProps: otherStartTextFieldProps,
- endTextFieldProps: otherEndTextFieldProps,
- startInputRef
- endInputRef,
+ startTextFieldProps,
+ endTextFieldProps
});
Rename the ref returned by the field hooks to inputRef
When used with the v6 TextField approach (where the input is an <input /> HTML element), the field hooks return a ref that needs to be passed to the <input /> element.
This ref was previously named ref and has been renamed inputRef for extra clarity.
const fieldResponse = useDateField(props);
- return <input ref={fieldResponse.ref} />
+ return <input ref={fieldResponse.inputRef} />
If you are using a multi input range field hook, the same applies to the ref in the startDate and endDate objects
const fieldResponse = useDateField(props);
return (
<div>
- <input ref={fieldResponse.startDate.ref} />
+ <input ref={fieldResponse.startDate.inputRef} />
<span>–</span>
- <input ref={fieldResponse.endDate.ref} />
+ <input ref={fieldResponse.endDate.inputRef} />
</div>
)
Restructure the API of useClearableField
The useClearableField hook API has been simplified to now take a props parameter instead of a fieldProps, InputProps, clearable, onClear, slots and slotProps parameters.
You should now be able to directly pass the returned value from your field hook (e.g: useDateField) to useClearableField
const fieldResponse = useDateField(props);
- const { InputProps, onClear, clearable, slots, slotProps, ...otherFieldProps } = fieldResponse
- const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({
- fieldProps: otherFieldProps,
- InputProps,
- clearable,
- onClear,
- slots,
- slotProps,
- });
-
- return <MyCustomTextField {...processedFieldProps} InputProps={ProcessedInputProps} />
+ const processedFieldProps = useClearableField(fieldResponse);
+
+ return <MyCustomTextField {...processedFieldProps} />
@mui/x-date-pickers@7.0.0-alpha.5@types/react version (#11397) @LukasTy@mui/x-date-pickers-pro@7.0.0-alpha.5 Same changes as in @mui/x-date-pickers@7.0.0-alpha.5, plus:
autoFocus behavior (#11273) @kealjones-wk@mui/x-charts@7.0.0-alpha.5@mui/x-codemod@7.0.0-alpha.5cellSelection codemod and update migration guide (#11353) @MBilalShafinext -> master (#11382) @MBilalShafino-response workflow (#11369) @MBilalShafiWe'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
🚀 The scatter charts now use voronoi to trigger items
Users needed to hover the item to highlight the scatter item or show the tooltip. Now they can interact with data by triggering the closest element. See the docs page for more info.
📚 Add Pickers FAQ page
🎉 The Data Grid Header filters feature is now stable
🌍 Improve Danish (da-DK) locale on Data Grid
🐞 Bugfixes
The header filters feature is now stable. unstable_ prefix is removed from prop headerFilters and related exports.
See migration docs for more details.
The GridColDef['type'] has been narrowed down to only accept the built-in column types.
TypeScript users need to use the GridColDef interface when defining columns:
// 🛑 `type` is inferred as `string` and is too wide
const columns = [{ type: 'number', field: 'id' }];
<DataGrid columns={columns} />;
// ✅ `type` is `'number'`
const columns: GridColDef[] = [{ type: 'number', field: 'id' }];
<DataGrid columns={columns} />;
// ✅ Alternalively, `as const` can be used to narrow down the type
const columns = [{ type: 'number' as const, field: 'id' }];
<DataGrid columns={columns} />;
@mui/x-data-grid@7.0.0-alpha.4GridColDef['type'] (#11270) @cherniavskii@mui/x-data-grid-pro@7.0.0-alpha.4 Same changes as in @mui/x-data-grid@7.0.0-alpha.4, plus:
@mui/x-data-grid-premium@7.0.0-alpha.4 Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.4.
@mui/x-date-pickers@7.0.0-alpha.4PickersTextField (#11258) @flaviendelangleMultiSectionDigitalClock issues (#11305) @LukasTy@mui/x-date-pickers-pro@7.0.0-alpha.4 Same changes as in @mui/x-date-pickers@7.0.0-alpha.4.
@mui/x-charts@7.0.0-alpha.4@mui/utils as a dependency (#11351) @michelengelenonPaginationModelChange docs (#10191) @JFBenzsDemoContainer styling coverage (#11315) @LukasTy[docs] Move the adapter breaking changes in a collapsable block (#11205) @flaviendelangle
We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
🚀 Support localized start of the week on pickers' AdapterLuxon
When using Luxon 3.4.4 or higher, the start of the week will be defined by the date locale (e.g.: Sunday for en-US, Monday for fr-FR).
📈 Fix a lot of Charts package issues
🎉 The Data Grid features Cell selection and Clipboard paste are now stable
🌍 Improve Bulgarian (bg-BG) locale on Data Grid
🐞 Bugfixes
📚 Documentation improvements
The clipboard paste feature is now enabled by default. The flag clipboardPaste is no longer needed to be passed to the experimentalFeatures prop.
The clipboard-related exports ignoreValueFormatterDuringExport and splitClipboardPastedText are no longer prefixed with unstable_.
The deprecated constants SUBMIT_FILTER_STROKE_TIME and SUBMIT_FILTER_DATE_STROKE_TIME have been removed from the DataGrid exports. Use the filterDebounceMs prop to customize filter debounce time.
The slots.preferencesPanel slot and the slotProps.preferencesPanel prop were removed. Use slots.panel and slotProps.panel instead.
The GridPreferencesPanel component is not exported anymore as it wasn't meant to be used outside of the Data Grid.
The unstable_ prefix has been removed from the cell selection props listed below.
| Old name | New name |
|---|---|
unstable_cellSelection |
cellSelection |
unstable_cellSelectionModel |
cellSelectionModel |
unstable_onCellSelectionModelChange |
onCellSelectionModelChange |
The unstable_ prefix has been removed from the cell selection API methods listed below.
| Old name | New name |
|---|---|
unstable_getCellSelectionModel |
getCellSelectionModel |
unstable_getSelectedCellsAsArray |
getSelectedCellsAsArray |
unstable_isCellSelected |
isCellSelected |
unstable_selectCellRange |
selectCellRange |
unstable_setCellSelectionModel |
setCellSelectionModel |
The Quick Filter now ignores hidden columns by default. See including hidden columns section for more details.
@mui/x-data-grid@7.0.0-alpha.3onFilterModelChange being fired with stale field value (#11000) @gitstartpreferencesPanel slot (#11228) @cherniavskii@mui/x-data-grid-pro@7.0.0-alpha.3 Same changes as in @mui/x-data-grid@7.0.0-alpha.3.
@mui/x-data-grid-premium@7.0.0-alpha.3 Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.3, plus:
The Date and Time Pickers now use the localized week when using AdapterLuxon and Luxon v3.4.4 or higher is installed.
This new behavior allows AdapterLuxon to have the same behavior as the other adapters.
If you want to keep the start of the week on Monday even if your locale says otherwise, you can hardcode the week settings as follows:
The Firefox browser currently does not support this behavior because the getWeekInfo API is not yet implemented.
import { Settings } from 'luxon';
Settings.defaultWeekSettings = {
firstDay: 1,
minimalDays: Info.getMinimumDaysInFirstWeek(),
weekend: [6, 7],
};
Add new parameters to the shortcuts slot onChange callback
The onChange callback fired when selecting a shortcut now requires two new parameters (previously they were optional):
changeImportance of the shortcut.item containing the entire shortcut object. const CustomShortcuts = (props) => {
return (
<React.Fragment>
{props.items.map(item => {
const value = item.getValue({ isValid: props.isValid });
return (
<button
- onClick={() => onChange(value)}
+ onClick={() => onChange(value, props.changeImportance ?? 'accept', item)}
>
{value}
</button>
)
}}
</React.Fragment>
)
}
<DatePicker slots={{ shortcuts: CustomShortcuts }} />
AdapterDayjs with the customParseFormat plugin
The call to dayjs.extend(customParseFormatPlugin) has been moved to the AdapterDayjs constructor. This allows users to pass custom options to this plugin before the adapter uses it.If you are using this plugin before the rendering of the first LocalizationProvider component and did not call dayjs.extend in your own codebase, you will need to manually extend dayjs:
import dayjs from 'dayjs';
import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormatPlugin);
The other plugins are still added before the adapter initialization.
@mui/x-date-pickers@7.0.0-alpha.3format parameter (#11130) @LukasTychangeImportance and shortcut mandatory in PickersShortcuts (#10941) @flaviendelanglecustomParseFormat to constructor (#11151) @michelengelenPickersTextField styling - outlined variant (#10778) @noraleonteAdapterLuxon (#10964) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-alpha.3 Same changes as in @mui/x-date-pickers@7.0.0-alpha.3.
@mui/x-charts@7.0.0-alpha.3defaultizeValueFormatter util to accept an optional series.valueFormatter value (#11144) @michelengelenlabelStyle and tickLabelStyle props on <ChartsYAxis /> (#11180) @akamfoadTextField styling example to customization playground (#10812) @noraleonteDayCalendar (#11158) @flaviendelanglenewFeature flag on v6 features (#11168) @flaviendelangle@mui/system a direct dependency (#11128) @LukasTyENABLE_AD env variable (#11181) @oliviertassinariplan: Pro and plan: Premium labels on pro/premium issue templates (#10183) @flaviendelangleThe deprecated shouldDisableClock prop has been removed in favor of the more flexible shouldDisableTime prop. The shouldDisableClock prop received val…
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@7.0.0-alpha.2@mui/x-data-grid-pro@7.0.0-alpha.2 Same changes as in @mui/x-data-grid@7.0.0-alpha.2.
@mui/x-data-grid-premium@7.0.0-alpha.2 Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.2.
The deprecated shouldDisableClock prop has been removed in favor of the more flexible shouldDisableTime prop.
The shouldDisableClock prop received value as a number of hours, minutes, or seconds.
Instead, the shouldDisableTime prop receives the date object (based on the used adapter).
You can read more about the deprecation of this prop in v6 migration guide.
<DateTimePicker
- shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
+ shouldDisableTime={(value, view) => view === 'hours' && value.hour() < 12}
/>
The adapter.dateWithTimezone method has been removed and its content moved to the date method.
You can use the adapter.date method instead:
- adapter.dateWithTimezone(undefined, 'system');
+ adapter.date(undefined, 'system');
The dayPickerClasses variable has been renamed to dayCalendarClasses to be consistent with the new name of the DayCalendar component introduced in v6.0.0.
- import { dayPickerClasses } from '@mui/x-date-pickers/DateCalendar';
+ import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
The deprecated defaultCalendarMonth prop has been removed in favor of the more flexible referenceDate prop.
- <DateCalendar defaultCalendarMonth={dayjs('2022-04-01')};
+ <DateCalendar referenceDate{dayjs('2022-04-01')} />
The adapter.date method now has the v6 adapter.dateWithTimezone method behavior.
It no longer accepts any as a value but only string | null | undefined.
- adapter.date(new Date());
+ adapter.date();
- adapter.date(new Date('2022-04-17');
+ adapter.date('2022-04-17');
- adapter.date(new Date(2022, 3, 17, 4, 5, 34));
+ adapter.date('2022-04-17T04:05:34');
- adapter.date(new Date('Invalid Date'));
+ adapter.getInvalidDate();
@mui/x-date-pickers@7.0.0-alpha.2defaultCalendarMonth prop (#10987) @flaviendelangleshouldDisableClock prop (#11042) @flaviendelangledayPickerClasses variable dayCalendarClasses (#11140) @flaviendelangleadapter.date with the current adapter.dateWithTimezone (#10979) @flaviendelangle@mui/x-date-pickers-pro@7.0.0-alpha.2 Same changes as in @mui/x-date-pickers@7.0.0-alpha.2.
@mui/x-charts@7.0.0-alpha.2ChartsTooltip component setup (#11152) @LukasTy@mui/x-codemod@7.0.0-alpha.2referenceDate instead of defaultCalendarMonth (#11139) @flaviendelangle@mui/x-data-grid-generator (#11134) @oliviertassinaribabel-plugin-module-resolver to 5.0.0 (#11065) @flaviendelangle[pickers] Remove the deprecated methods and formats from the adapters (#10776) @flaviendelangle
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
@mui/x-date-pickers@7.0.0-alpha.1 / @mui/x-date-pickers-pro@7.0.0-alpha.1 The string argument of the dayOfWeekFormatter prop has been replaced in favor of the date object to allow more flexibility.
<DateCalendar
// If you were still using the day string, you can get it back with your date library.
- dayOfWeekFormatter={dayStr => `${dayStr}.`}
+ dayOfWeekFormatter={day => `${day.format('dd')}.`}
// If you were already using the day object, just remove the first argument.
- dayOfWeekFormatter={(_dayStr, day) => `${day.format('dd')}.`}
+ dayOfWeekFormatter={day => `${day.format('dd')}.`}
/>
The imports related to the calendarHeader slot have been moved from @mui/x-date-pickers/DateCalendar to @mui/x-date-pickers/PIckersCalendarHeader:
export {
pickersCalendarHeaderClasses,
PickersCalendarHeaderClassKey,
PickersCalendarHeaderClasses,
PickersCalendarHeader,
PickersCalendarHeaderProps,
PickersCalendarHeaderSlotsComponent,
PickersCalendarHeaderSlotsComponentsProps,
ExportedPickersCalendarHeaderProps,
-} from '@mui/x-date-pickers/DateCalendar';
+} from '@mui/x-date-pickers/PickersCalendarHeader';
The monthAndYear format has been removed.
It was used in the header of the calendar views, you can replace it with the new format prop of the calendarHeader slot:
<LocalizationProvider
adapter={AdapterDayJS}
- formats={{ monthAndYear: 'MM/YYYY' }}
/>
<DatePicker
+ slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
/>
<DateRangePicker
+ slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
/>
<LocalizationProvider />
The adapter.getDiff method have been removed, you can directly use your date library:
// For Day.js
-const diff = adapter.getDiff(value, comparing, unit);
+const diff = value.diff(comparing, unit);
// For Luxon
-const diff = adapter.getDiff(value, comparing, unit);
+const getDiff = (value: DateTime, comparing: DateTime | string, unit?: AdapterUnits) => {
+ const parsedComparing = typeof comparing === 'string'
+ ? DateTime.fromJSDate(new Date(comparing))
+ : comparing;
+ if (unit) {
+ return Math.floor(value.diff(comparing).as(unit));
+ }
+ return value.diff(comparing).as('millisecond');
+};
+
+const diff = getDiff(value, comparing, unit);
// For DateFns
-const diff = adapter.getDiff(value, comparing, unit);
+const getDiff = (value: Date, comparing: Date | string, unit?: AdapterUnits) => {
+ const parsedComparing = typeof comparing === 'string' ? new Date(comparing) : comparing;
+ switch (unit) {
+ case 'years':
+ return dateFns.differenceInYears(value, parsedComparing);
+ case 'quarters':
+ return dateFns.differenceInQuarters(value, parsedComparing);
+ case 'months':
+ return dateFns.differenceInMonths(value, parsedComparing);
+ case 'weeks':
+ return dateFns.differenceInWeeks(value, parsedComparing);
+ case 'days':
+ return dateFns.differenceInDays(value, parsedComparing);
+ case 'hours':
+ return dateFns.differenceInHours(value, parsedComparing);
+ case 'minutes':
+ return dateFns.differenceInMinutes(value, parsedComparing);
+ case 'seconds':
+ return dateFns.differenceInSeconds(value, parsedComparing);
+ default: {
+ return dateFns.differenceInMilliseconds(value, parsedComparing);
+ }
+ }
+};
+
+const diff = getDiff(value, comparing, unit);
// For Moment
-const diff = adapter.getDiff(value, comparing, unit);
+const diff = value.diff(comparing, unit);
The adapter.getFormatHelperText method have been removed, you can use the adapter.expandFormat instead:
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format);
And if you need the exact same output you can apply the following transformation:
// For Day.js
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
// For Luxon
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase();
// For DateFns
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
// For Moment
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
The adapter.getMeridiemText method have been removed, you can use the adapter.setHours, adapter.date and adapter.format methods to recreate its behavior:
-const meridiem = adapter.getMeridiemText('am');
+const getMeridiemText = (meridiem: 'am' | 'pm') => {
+ const date = adapter.setHours(adapter.date()!, meridiem === 'am' ? 2 : 14);
+ return utils.format(date, 'meridiem');
+};
+
+const meridiem = getMeridiemText('am');
The adapter.getMonthArray method have been removed, you can use the adapter.startOfYear and adapter.addMonths methods to recreate its behavior:
-const monthArray = adapter.getMonthArray(value);
+const getMonthArray = (year) => {
+ const firstMonth = utils.startOfYear(year);
+ const months = [firstMonth];
+
+ while (months.length < 12) {
+ const prevMonth = months[months.length - 1];
+ months.push(utils.addMonths(prevMonth, 1));
+ }
+
+ return months;
+}
+
+const monthArray = getMonthArray(value);
The adapter.getNextMonth method have been removed, you can use the adapter.addMonths method instead:
-const nextMonth = adapter.getNextMonth(value);
+const nextMonth = adapter.addMonths(value, 1);
The adapter.getPreviousMonth method have been removed, you can use the adapter.addMonths method instead:
-const previousMonth = adapter.getPreviousMonth(value);
+const previousMonth = adapter.addMonths(value, -1);
The adapter.getWeekdays method have been removed, you can use the adapter.startOfWeek and adapter.addDays methods instead:
-const weekDays = adapter.getWeekdays(value);
+const getWeekdays = (value) => {
+ const start = adapter.startOfWeek(value);
+ return [0, 1, 2, 3, 4, 5, 6].map((diff) => utils.addDays(start, diff));
+};
+
+const weekDays = getWeekdays(value);
The isNull method have been removed, you can replace it with a very basic check:
-const isNull = adapter.isNull(value);
+const isNull = value === null;
The adapter.mergeDateAndTime method have been removed, you can use the adapter.setHours, adapter.setMinutes, and adapter.setSeconds methods to recreate its behavior:
-const result = adapter.mergeDateAndTime(valueWithDate, valueWithTime);
+const mergeDateAndTime = <TDate>(
+ dateParam,
+ timeParam,
+ ) => {
+ let mergedDate = dateParam;
+ mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));
+ mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
+ mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
+
+ return mergedDate;
+ };
+
+const result = mergeDateAndTime(valueWithDate, valueWithTime);
The adapter.parseISO method have been removed, you can directly use your date library:
// For Day.js
-const value = adapter.parseISO(isoString);
+const value = dayjs(isoString);
// For Luxon
-const value = adapter.parseISO(isoString);
+const value = DateTime.fromISO(isoString);
// For DateFns
-const value = adapter.parseISO(isoString);
+const value = dateFns.parseISO(isoString);
// For Moment
-const value = adapter.parseISO(isoString);
+const value = moment(isoString, true);
The adapter.toISO method have been removed, you can directly use your date library:
-const isoString = adapter.toISO(value);
+const isoString = value.toISOString();
+const isoString = value.toUTC().toISO({ format: 'extended' });
+const isoString = dateFns.formatISO(value, { format: 'extended' });
+const isoString = value.toISOString();
The adapter.isEqual method used to accept any type of value for its two input and tried to parse them before checking if they were equal.
The method has been simplified and now only accepts an already-parsed date or null (ie: the same formats used by the value prop in the pickers)
const adapterDayjs = new AdapterDayjs();
const adapterLuxon = new AdapterLuxon();
const adapterDateFns = new AdapterDateFns();
const adapterMoment = new AdatperMoment();
// Supported formats
const isEqual = adapterDayjs.isEqual(null, null); // Same for the other adapters
const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
const isEqual = adapterDateFns.isEqual(new Date(), new Date('2022-04-17'));
// Non-supported formats (JS Date)
-const isEqual = adapterDayjs.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterDayjs.isEqual(dayjs(), dayjs('2022-04-17'));
-const isEqual = adapterLuxon.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
-const isEqual = adapterMoment.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
// Non-supported formats (string)
-const isEqual = adapterDayjs.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterDayjs.isEqual(dayjs('2022-04-17'), dayjs('2022-04-17'));
-const isEqual = adapterLuxon.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterLuxon.isEqual(DateTime.fromISO('2022-04-17'), DateTime.fromISO('2022-04-17'));
-const isEqual = adapterMoment.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterMoment.isEqual(moment('2022-04-17'), moment('2022-04-17'));
-const isEqual = adapterDateFns.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterDateFns.isEqual(new Date('2022-04-17'), new Date('2022-04-17'));
The dateLibInstance prop of LocalizationProvider does not work with AdapterDayjs anymore (#11023). This prop was used to set the pickers in UTC mode before the implementation of a proper timezone support in the components.
You can learn more about the new approach on the dedicated doc page.
// When a `value` or a `defaultValue` is provided
<LocalizationProvider
adapter={AdapterDayjs}
- dateLibInstance={dayjs.utc}
>
<DatePicker value={dayjs.utc('2022-04-17')} />
</LocalizationProvider>
// When no `value` or `defaultValue` is provided
<LocalizationProvider
adapter={AdapterDayjs}
- dateLibInstance={dayjs.utc}
>
- <DatePicker />
+ <DatePicker timezone="UTC" />
</LocalizationProvider>
The property hasLeadingZeros has been removed from the sections in favor of the more precise hasLeadingZerosInFormat and hasLeadingZerosInInput properties (#10994). To keep the same behavior, you can replace it by hasLeadingZerosInFormat:
const fieldRef = React.useRef<FieldRef<FieldSection>>(null);
React.useEffect(() => {
const firstSection = fieldRef.current!.getSections()[0];
- console.log(firstSection.hasLeadingZeros);
+ console.log(firstSection.hasLeadingZerosInFormat);
}, []);
return (
<DateField unstableFieldRef={fieldRef} />
);
The adapter.getYearRange method used to accept two params and now accepts a tuple to be consistent with the adapter.isWithinRange method (#10978):
-adapter.getYearRange(start, end);
+adapter.getYearRange([start, end])
The adapter.isValid method used to accept any type of value and tried to parse them before checking their validity (#10971).
The method has been simplified and now only accepts an already-parsed date or null.
Which is the same type as the one accepted by the components value prop.
const adapterDayjs = new AdapterDayjs();
const adapterLuxon = new AdapterLuxon();
const adapterDateFns = new AdapterDateFns();
const adapterMoment = new AdatperMoment();
// Supported formats
const isValid = adapterDayjs.isValid(null); // Same for the other adapters
const isValid = adapterLuxon.isValid(DateTime.now());
const isValid = adapterMoment.isValid(moment());
const isValid = adapterDateFns.isValid(new Date());
// Non-supported formats (JS Date)
-const isValid = adapterDayjs.isValid(new Date('2022-04-17'));
+const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
-const isValid = adapterLuxon.isValid(new Date('2022-04-17'));
+const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
-const isValid = adapterMoment.isValid(new Date('2022-04-17'));
+const isValid = adapterMoment.isValid(moment('2022-04-17'));
// Non-supported formats (string)
-const isValid = adapterDayjs.isValid('2022-04-17');
+const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
-const isValid = adapterLuxon.isValid('2022-04-17');
+const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
-const isValid = adapterMoment.isValid('2022-04-17');
+const isValid = adapterMoment.isValid(moment('2022-04-17'));
-const isValid = adapterDateFns.isValid('2022-04-17');
+const isValid = adapterDateFns.isValid(new Date('2022-04-17'));
adapter.getYearRange to be consistent with adapter.isWithinRange (#10978) @flaviendelanglecomponents / componentsProps typings (#11040) @flaviendelangleadapter.isEqual method to accept TDate | null instead of any (#10976) @flaviendelangleadapter.isValid method to accept TDate | null instead of any (#10971) @flaviendelanglehasLeadingZeros property from FieldSection (#10994) @flaviendelangledayjs (#11023) @flaviendelanglecalendarHeader slot to @mui/x-date-pickers/PickersCalendarHeader (#11020) @flaviendelangledayOfWeekFormatter prop (#10992) @flaviendelanglenext tag (#10996) @LukasTyWe're thrilled to announce the first alpha release of our next major version, v7. This release introduces a few breaking changes, paving the way for t…
We're thrilled to announce the first alpha release of our next major version, v7. This release introduces a few breaking changes, paving the way for the upcoming features like Pivoting and DateTimeRangePicker.
A special shoutout to thank the 12 contributors who made this release possible. Here are some highlights ✨:
renderHeader is used (#10961) @cherniavskii<ChartsReferenceLine /> component is now availablecomponents and componentsProps props have been removed. Use slots and slotProps instead. See components section for more details.getRowsToExport function.getApplyFilterFnV7 in GridFilterOperator was renamed to getApplyFilterFn.
If you use getApplyFilterFnV7 directly - rename it to getApplyFilterFn.getApplyFilterFn has changed for performance reasons: const getApplyFilterFn: GetApplyFilterFn<any, unknown> = (filterItem) => {
if (!filterItem.value) {
return null;
}
const filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
- return (cellParams) => {
- const { value } = cellParams;
+ return (value, row, colDef, apiRef) => {
return value != null ? filterRegex.test(String(value)) : false;
};
}
getApplyQuickFilterFnV7 in GridColDef was renamed to getApplyQuickFilterFn.
If you use getApplyQuickFilterFnV7 directly - rename it to getApplyQuickFilterFn.getApplyQuickFilterFn has changed for performance reasons: const getGridStringQuickFilterFn: GetApplyQuickFilterFn<any, unknown> = (value) => {
if (!value) {
return null;
}
const filterRegex = new RegExp(escapeRegExp(value), 'i');
- return (cellParams) => {
- const { formattedValue } = cellParams;
+ return (value, row, column, apiRef) => {
+ let formattedValue = apiRef.current.getRowFormattedValue(row, column);
return formattedValue != null ? filterRegex.test(formattedValue.toString()) : false;
};
};
@mui/x-data-grid@7.0.0-alpha.0undefined slot value (#10937) @romgrkcomponents and componentsProps (#10911) @MBilalShafi@mui/x-data-grid-pro@7.0.0-alpha.0 Same changes as in @mui/x-data-grid@7.0.0-alpha.0, plus:
@mui/x-data-grid-premium@7.0.0-alpha.0 Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.0, plus:
renderHeader is used (#10936) @cherniavskiicomponents and componentsProps props have been removed. Use slots and slotProps instead.@mui/x-date-pickers@7.0.0-alpha.0MultiInputTimeRangeField section selection (#10922) @noraleontereferenceDate behavior in views (#10863) @LukasTycomponents and componentsProps props (#10700) @alexfauquette@mui/x-date-pickers-pro@7.0.0-alpha.0 Same changes as in @mui/x-date-pickers@7.0.0-alpha.0.
@mui/x-charts@7.0.0-alpha.0Types for slots and slotProps got renamed by removing the "Component" which is meaningless for charts.
Unless you imported those types, to create a wrapper, you should not be impacted by this breaking change.
Here is an example of the renaming for the <ChartsTooltip /> component.
-ChartsTooltipSlotsComponent
+ChartsTooltipSlots
-ChartsTooltipSlotComponentProps
+ChartsTooltipSlotProps
<ChartsReferenceLine /> component (#10597) (#10946) @alexfauquetteslots and slotProps types (#10875) @alexfauquette@mui/x-codemod@7.0.0-alpha.0v7.0.0/preset-safe (#10973) @LukasTy@next tag to the installation instructions (#10963) @MBilalShafimaster into next (#10929) @cherniavskiiWe'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
@mui/x-date-pickers@6.20.2Space (#13516) @flaviendelangleview behavior (#13559) @LukasTyWe'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid-premium@6.20.1 @mui/x-date-pickers@6.20.1AdapterDayjs timezone behavior (#13373) @LukasTy@mui/x-data-grid-pro@6.20.1 Same changes as in @mui/x-date-pickers-pro@7.20.1.
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.20.0@mui/x-data-grid-pro@6.20.0 Same changes as in @mui/x-data-grid@6.20.0.
@mui/x-data-grid-premium@6.20.0 Same changes as in @mui/x-data-grid-pro@6.20.0.
@mui/x-date-pickers@6.20.0disableOpenPicker prop behavior (#13221) @LukasTy@mui/x-date-pickers-pro@6.20.0 Same changes as in @mui/x-date-pickers@6.20.0.
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
@mui/x-date-pickers@6.19.12AdapterMomentJalaali regression (#13150) @LukasTy@mui/x-date-pickers-pro@6.19.12 Same changes as in @mui/x-date-pickers@6.19.12.
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.19.9rowEditCommit (#12087) @MBilalShafi@mui/x-data-grid-pro@6.19.9 Same changes as in @mui/x-data-grid@6.19.9.
@mui/x-data-grid-premium@6.19.9 Same changes as in @mui/x-data-grid-pro@6.19.9.
@mui/x-date-pickers@6.19.9No changes.
@mui/x-date-pickers-pro@6.19.9 readOnly (#12605) @LukasTycheckboxSelectionVisibleOnly prop (#12667) @michelengelen_action: 'delete' in processRowUpdate (#12673) @michelengelenWe'd like to offer a big thanks to the 3 contributors who made this release possible.
We'd like to offer a big thanks to the 3 contributors who made this release possible.
@mui/x-data-grid@6.19.8ElementType usage (#12505) @cherniavskii@mui/x-data-grid-pro@6.19.8 Same changes as in @mui/x-data-grid@6.19.8.
@mui/x-data-grid-premium@6.19.8 Same changes as in @mui/x-data-grid-pro@6.19.8, plus:
We'd like to offer a big thanks to @LukasTy who made this release possible.
We'd like to offer a big thanks to @LukasTy who made this release possible.
@mui/x-date-pickers@6.19.7@mui/x-date-pickers-pro@6.19.7 Same changes as in @mui/x-date-pickers@6.19.7.
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.19.6replaceRows (@martijn-basesoft)@mui/x-data-grid-pro@6.19.6 Same changes as in @mui/x-data-grid@6.19.6.
@mui/x-data-grid-premium@6.19.6 Same changes as in @mui/x-data-grid-pro@6.19.6, plus:
@mui/x-date-pickers@6.19.6@mui/x-date-pickers-pro@6.19.6 Same changes as in @mui/x-date-pickers@6.19.6.
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.19.5@mui/x-data-grid-pro@6.19.5 Same changes as in @mui/x-data-grid@6.19.5.
@mui/x-data-grid-premium@6.19.5 Same changes as in @mui/x-data-grid-pro@6.19.5.
@mui/x-date-pickers@6.19.5referenceDate day calendar focus (#12136) @LukasTyDateTimePickerTabs (#12131) @LukasTy@mui/x-date-pickers-pro@6.19.5 Same changes as in @mui/x-date-pickers@6.19.5.
@mui/x-charts@6.19.5AdapterDateFnsV3 (#12037) @flaviendelanglefocused prop from demo (#12126) @michelengelenWe'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@v6.19.4pageSizeOptions prop (#11992) @pcorpeteval with new Function (#11962) @cherniavskii@mui/x-data-grid-pro@v6.19.4 Same changes as in @mui/x-data-grid@v6.19.4.
@mui/x-data-grid-premium@v6.19.4 Same changes as in @mui/x-data-grid-pro@v6.19.4, plus:
@mui/x-date-pickers@v6.19.4isWithinRange method (#11940) @LukasTy@mui/x-date-pickers-pro@v6.19.4 Same changes as in @mui/x-date-pickers@v6.19.4.
@mui/x-charts@v6.19.4reverse property to axes (#11959) @alexfauquetteAdapterDateFnsV3 on the Getting Started page (#11987) @flaviendelangleChartsTooltip typo (#11967) @thisisharsh7Localization documentation sections (#11997) @LukasTyWe'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.19.3@mui/x-data-grid-pro@6.19.3 Same changes as in @mui/x-data-grid@6.19.3.
@mui/x-data-grid-premium@6.19.3 Same changes as in @mui/x-data-grid-pro@6.19.3.
@mui/x-date-pickers@6.19.3@mui/x-date-pickers-pro@6.19.3 Same changes as in @mui/x-date-pickers@6.19.3.
@mui/x-charts@6.19.3We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
layout.tabs class to Tabs slot (@LukasTy) (#11782)@mui/x-date-pickers@6.19.2layout.tabs class to Tabs slot (@LukasTy) (#11782)@mui/x-date-pickers-pro@6.19.2 Same changes as in @mui/x-date-pickers@6.19.2, plus:
calendars prop on Mobile (@LukasTy) (#11771)@mui/x-data-grid@6.19.2@mui/x-data-grid-pro@6.19.2 Same changes as in @mui/x-data-grid@6.19.2.
@mui/x-data-grid-premium@6.19.2 Same changes as in @mui/x-data-grid-pro@6.19.2.
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 3 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';
@mui/x-date-pickers@6.19.0OpenPickerButton (#11643) @noraleonte@mui/x-date-pickers-pro@6.19.0 Same changes as in @mui/x-date-pickers@6.19.0.
x-date-pickers-pro demo adapter imports (#11637) @LukasTyWe'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.18.7hasEval when disableEval is set (#11553) @reihwald@mui/x-data-grid-pro@6.18.7 Same changes as in @mui/x-data-grid@6.18.7.
@mui/x-data-grid-premium@6.18.7 Same changes as in @mui/x-data-grid-pro@6.18.7.
@mui/x-date-pickers@6.18.7@mui/x-date-pickers-pro@6.18.7 Same changes as in @mui/x-date-pickers@6.18.7.
@mui/x-charts@6.18.7null in line chart using dataset (@alexfauquette) (#11561)We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.18.6@mui/x-data-grid-pro@6.18.6 Same changes as in @mui/x-data-grid@6.18.6.
@mui/x-data-grid-premium@6.18.6 Same changes as in @mui/x-data-grid-pro@6.18.6.
@mui/x-date-pickers@6.18.6@mui/x-date-pickers-pro@6.18.6 Same changes as in @mui/x-date-pickers@6.18.6.
@mui/x-charts@6.18.4ChartsText component public (#11370) @alexfauquettename prop examples (#11442) @LukasTydate-fns package to v2 in codesandbox (#11478) @LukasTyWe'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.18.5@mui/x-data-grid-pro@6.18.5 Same changes as in @mui/x-data-grid@6.18.5.
@mui/x-data-grid-premium@6.18.5 Same changes as in @mui/x-data-grid-pro@6.18.5.
@mui/x-date-pickers@6.18.5@types/react version (#11398) @LukasTy@mui/x-date-pickers-pro@6.18.5 Same changes as in @mui/x-date-pickers@6.18.5, plus:
autoFocus behavior (#11376) @kealjones-wkWe'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.18.4@mui/x-data-grid-pro@6.18.4 Same changes as in @mui/x-data-grid@6.18.4.
@mui/x-data-grid-premium@6.18.4 Same changes as in @mui/x-data-grid-pro@6.18.4.
@mui/x-date-pickers@6.18.4MultiSectionDigitalClock issues (#11308) @LukasTy@mui/x-date-pickers-pro@6.18.4 Same changes as in @mui/x-date-pickers@6.18.4.
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.18.3onFilterModelChange being fired with stale field value (#11244) @gitstart@mui/x-data-grid-pro@6.18.3 Same changes as in @mui/x-data-grid@6.18.3.
@mui/x-data-grid-premium@6.18.3 Same changes as in @mui/x-data-grid-pro@6.18.3, plus:
@mui/x-date-pickers@6.18.3MultiSectionDigitalClock number sections (#11297) @LukasTyformat parameter (#11254) @LukasTy@mui/x-date-pickers-pro@6.18.3 Same changes as in @mui/x-date-pickers@6.18.3.
@mui/x-charts@6.18.3defaultizeValueFormatter util to accept an optional series.valueFormatter value (#11213) @michelengelenlabelStyle and tickLabelStyle props on <ChartsYAxis /> (#11180) @akamfoad[pickers] Deprecate defaultCalendarMonth prop (#11138) @flaviendelangle
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@6.18.2@mui/x-data-grid-pro@6.18.2 Same changes as in @mui/x-data-grid@6.18.2.
@mui/x-data-grid-premium@6.18.2 Same changes as in @mui/x-data-grid-pro@6.18.2.
@mui/x-date-pickers@6.18.2defaultCalendarMonth prop (#11138) @flaviendelangleDateCalendar crashing when given an invalid value (#11101) @flaviendelangle@mui/x-date-pickers-pro@6.18.2 Same changes as in @mui/x-date-pickers@6.18.2.
@mui/x-charts@6.18.2ChartsTooltip component setup (#11157) @LukasTyCustom slots and subcomponents page (#11003) @lhilgert9We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
renderHeader is used (#10961) @cherniavskii<ChartsReferenceLine /> component is now available@mui/x-data-grid@6.18.1undefined slot values (#10934) @romgrk@mui/x-data-grid-pro@6.18.1 Same changes as in @mui/x-data-grid@6.18.1, plus:
@mui/x-data-grid-premium@6.18.1 Same changes as in @mui/x-data-grid-pro@6.18.1, plus:
renderHeader is used (#10961) @cherniavskii@mui/x-date-pickers@6.18.1defaultView (#10889) @LukasTy@mui/x-date-pickers-pro@6.18.1 Same changes as in @mui/x-date-pickers@6.18.1.
@mui/x-charts@6.18.1<ChartsReferenceLine /> component (#10597) @wascouYour coding agent can read these notes before it upgrades. Set up the MCP server →