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 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 ✨:
<img src="https://github.com/mui/mui-x/assets/3165635/d2d50b1b-ee29-4e4c-9ebe-629c06f3093e" width="683" height="436" />
@mui/x-data-grid@6.18.0gridFilterApi (#10786) @vu-dao-93undefined row id (#10670) @romgrk@mui/x-data-grid-pro@6.18.0 Same changes as in @mui/x-data-grid@6.18.0.
@mui/x-data-grid-premium@6.18.0 Same changes as in @mui/x-data-grid-pro@6.18.0.
@mui/x-date-pickers@6.18.0@mui/x-date-pickers-pro@6.18.0 Same changes as in @mui/x-date-pickers@6.18.0.
@mui/x-charts@6.18.0focus (#10843) @michelengelenslot API descriptions based on slots or components (#10879) @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-data-grid@6.17.0@mui/x-data-grid-pro@6.17.0 Same changes as in @mui/x-data-grid@6.17.0, plus:
undefined values passed to valueFormatter for tree leaf nodes (#10748) @cherniavskii@mui/x-data-grid-premium@6.17.0 Same changes as in @mui/x-data-grid-pro@6.17.0, plus:
avg aggregation to ignore non-numeric values (#10787) @cherniavskiisize aggregation to ignore undefined values (#10745) @cherniavskiisum aggregation to ignore non-numeric values (#10730) @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 ✨:
@mui/x-data-grid@6.16.3columns and sortingOrder props (#10686) @pcorpet@mui/x-data-grid-pro@6.16.3 Same changes as in @mui/x-data-grid@6.16.3.
@mui/x-data-grid-premium@6.16.3 Same changes as in @mui/x-data-grid-pro@6.16.3.
@mui/x-date-pickers@6.16.3onChange instead of onKeyPress for Backspace editing (#10494) @flaviendelangleFakeTextField component (#10687) @flaviendelangle@mui/x-date-pickers-pro@6.16.3 Same changes as in @mui/x-date-pickers@6.16.3, plus:
@mui/x-charts@6.0.0-alpha.16width and height are resolved (#10714) @alexfauquetteBarChart (#9926) @alexfauquettestate externally (#10722) @michelengelen@types (#10723) @LukasTystyled-components (#10733) @LukasTy📊 Chart's legend text management has been reworked and contains breaking changes (#10138) @alexfauquette
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@6.16.2LazyLoading demo crash (#10621) @MBilalShafigetRowId is not defined error (#10613) @romgrkdate and dateTime fields (#10636) @MBilalShafidefault unless editable (#9997) @gitstart@mui/x-data-grid-pro@6.16.2 Same changes as in @mui/x-data-grid@6.16.2, plus:
@mui/x-data-grid-premium@6.16.2 Same changes as in @mui/x-data-grid-pro@6.16.2.
@mui/x-date-pickers@6.16.2DigitalClock view renderer (#10624) @LukasTyUTC false positive (#10586) @alexfauquette@mui/x-date-pickers-pro@6.16.2 Same changes as in @mui/x-date-pickers@6.16.2.
@mui/x-charts@6.0.0-alpha.15The charts have a new text display mechanism. It adds line break support and avoids overlapping text in the legend. This comes with some breaking changes.
The DOM structure is modified. An intermediary <tspan /> element has been added. This can impact how your style is applied.
- <text>The label</text>
+ <text><tspan>The label</tspan></text>
The top margin has been reduced from 100 to 50 to benefit from the denser legend.
To accurately compute the text size and then place it, styling should be provided as a JS object. For example, to set the legend font size, you should do:
<PieChart
{/** ... */}
slotProps={{
legend: {
labelStyle: {
fontSize: 16,
},
},
}}
/>
Support for other text elements (axis labels and tick labels) will be implemented in follow-up PR.
no-response workflow (#10491) @MBilalShafitestEval not invoking test assertions (#10587) @cherniavskiiWe'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.16.1disableColumnSelector demo idempotent (#10548) @MBilalShafi@mui/x-data-grid-pro@6.16.1 Same changes as in @mui/x-data-grid@6.16.1.
@mui/x-data-grid-premium@6.16.1 Same changes as in @mui/x-data-grid-pro@6.16.1.
@mui/x-date-pickers@6.16.1@mui/x-date-pickers-pro@6.16.1 Same changes as in @mui/x-date-pickers@6.16.1, plus:
InputProps propagation in multi input (#10564) @alexfauquette@mui/x-charts@6.0.0-alpha.14onClick is provided (#10551) @giladappsforceonClick prop to PieChart (#10506) @giladappsforceslots/slotProps for the tooltip (#10515) @alexfauquetteDateRangePicker example with a Button trigger (#10485) @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 ✨:
🎁 Add a clearable behavior to all the single input pickers and fields (#9095) @noraleonte
The pickers and fields now have an out-of-the box implementation for clearing the field value. You can see the documentation for this behavior on the Date Picker documentation.
<img width="337" height="139" alt="Clearable behavior" src="https://github.com/mui/mui-x/assets/3165635/a5407cb6-0b8a-443c-b4b9-1f81ceb4d087">
💫 Add Date Picker customization playground (#9581) @noraleonte
You can play around with style customization options on the Date Picker documentation.
We are thrilled to hear your feedback about this functionality!
🚀 Fix header filters menu auto closing on render (#10483) @MBilalShafi
🎯 Fix column headers scroll when theme scoping is used (#10437) @cherniavskii
🌍 Improve Russian (ru-RU) locale on the data grid
🐞 Bugfixes
📚 Documentation improvements
@mui/x-data-grid@6.16.0global to globalScope due to Jest issue (#10470) @romgrk@mui/x-data-grid-pro@6.16.0 Same changes as in @mui/x-data-grid@6.16.0, plus:
@mui/x-data-grid-premium@6.16.0 Same changes as in @mui/x-data-grid-pro@6.16.0.
@mui/x-date-pickers@6.16.0shouldDisableDate validation (#10502) @michelengelenclearable field behavior (#9095) @noraleontedayOfWeekFormatter (#10345) @michelengelen@mui/x-date-pickers-pro@6.16.0 Same changes as in @mui/x-date-pickers@6.16.0.
@mui/x-charts@6.0.0-alpha.13@mui/x-tree-view@6.0.0-beta.0Multiple generic (#10478) @flaviendelangleGridRenderCellParams interface (#10435) @cherniavskiiprism-okaidia.css with docs-infra @oliviertassinari[test] Do not use deprecated adapter methods (#10416) @flaviendelangle
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
getRowsToExport option to print export on the data grid (#10084) @zreecespieces@mui/x-data-grid@6.15.0getRowsToExport option to print export (#10084) @zreecespiecesInputLabelProps (#10413) @romgrkGridMenu prop onClickAway to onClose (#10411) @romgrkGridMenu closes (#10412) @romgrkGridActionsCellItem (#10344) @romgrkeval from bundlers (#10329) @romgrkborder: 0 to unmounted focused cell to avoid layout shifts in that row (#10318) @lauri865@mui/x-data-grid-pro@6.15.0 Same changes as in @mui/x-data-grid@6.15.0, plus:
@mui/x-data-grid-premium@6.15.0 Same changes as in @mui/x-data-grid-pro@6.15.0.
@mui/x-date-pickers@6.15.0@mui/x-date-pickers-pro@6.15.0 Same changes as in @mui/x-date-pickers@6.15.0.
@mui/x-charts@6.0.0-alpha.12@mui/material (#10115) @alexfauquette@mui/x-tree-view@6.0.0-alpha.4301 to Material UI @oliviertassinarirowIdentifier (#10326) @MBilalShafiWe'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 ✨:
🎁 Fix YearCalendar and MonthCalendar accessibility (#10312) @LukasTy
The YearCalendar and MonthCalendar items role has been changed from button to radio in order to improve the component's a11y support.
If you were relying on the mentioned components having a button role for items, you will need to update your usage to expect a radio role instead.
🌍 Improve Japanese (ja-JP), Persian (fa-IR), and Vietnamese (vi-VN) locales on the data grid
🐞 Bugfixes
📚 Documentation improvements
@mui/x-data-grid@6.14.0@mui/x-data-grid-pro@6.14.0 Same changes as in @mui/x-data-grid@6.14.0.
@mui/x-data-grid-premium@6.14.0 Same changes as in @mui/x-data-grid-pro@6.14.0, plus:
@mui/x-date-pickers@6.14.0YearCalendar and MonthCalendar a11y (#10312) @LukasTyTimeClock meridiem text (#10324) @LukasTy@mui/x-date-pickers-pro@6.14.0 Same changes as in @mui/x-date-pickers@6.14.0.
@mui/x-charts@6.0.0-alpha.11barGapRatio and increase categoryGapRatio (#10317) @LukasTyeslint on the package (#10330) @LukasTy@mui/x-tree-view@6.0.0-alpha.3ariaV7 flag for demos using useDemoData hook (#10204) @cherniavskiiWe'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 ✨:
anchorRef behavior on range pickers (#10077) @LukasTy
The range picker popup will now be anchored to the first input element and left aligned like other pickers.@mui/x-data-grid@6.13.0autoHeight mode (#10203) @cherniavskiiextendType (#10175) @oliviertassinari@mui/x-data-grid-pro@6.13.0 Same changes as in @mui/x-data-grid@6.13.0, plus:
@mui/x-data-grid-premium@6.13.0 Same changes as in @mui/x-data-grid-pro@6.13.0, plus:
@mui/x-date-pickers@6.13.0AdapterMoment.getWeekdays (#10221) @flaviendelangle@mui/x-date-pickers-pro@6.13.0 Same changes as in @mui/x-date-pickers@6.13.0, plus:
anchorRef behavior (#10077) @LukasTy@mui/x-charts@6.0.0-alpha.10@mui/x-tree-view@6.0.0-alpha.2Getting Started page for the Tree View (#10218) @flaviendelangleCustom opening button page (#10200) @flaviendelanglee.g. typo @oliviertassinariBase UI Portal for the quick filter recipe (#10188) @DanailHe.g. typo (#10193) @oliviertassinaribabel-plugin-tester package (#10243) @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 ✨:
referenceDate prop on pickers (#9991) @flaviendelangle
Find out more about this feature in the documentation section.@mui/x-data-grid@v6.12.1valueFormatter being persisted on column type change (#10041) @cherniavskiiuseTimeout (#10179) @romgrk@mui/x-data-grid-pro@v6.12.1 Same changes as in @mui/x-data-grid@v6.12.1.
@mui/x-data-grid-premium@v6.12.1 Same changes as in @mui/x-data-grid-pro@v6.12.1.
@mui/x-date-pickers@v6.12.1referenceDate on picker components (and DateRangeCalendar) (#9991) @flaviendelangle@mui/x-date-pickers-pro@v6.12.1 Same changes as in @mui/x-date-pickers@v6.12.1.
@mui/x-charts@6.0.0-alpha.9DemoContainer and DemoItem JSDoc (#10186) @LukasTycustom layout page (#10184) @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@v6.12.0@mui/x-data-grid-pro@v6.12.0 Same changes as in @mui/x-data-grid@v6.12.0.
@mui/x-data-grid-premium@v6.12.0 Same changes as in @mui/x-data-grid-pro@v6.12.0.
@mui/x-date-pickers@v6.12.0ownerState on desktopPaper slot props (#10103) @LukasTytransform-origin when popper opens to top (#10069) @LukasTyYearCalendar scrolling (#10135) @LukasTydateWithTimezone method (#10029) @flaviendelangleopenPickerButton toggle picker (#10109) @noraleontereduceAnimations default rule (#9864) @LukasTy@mui/x-date-pickers-pro@v6.12.0 Same changes as in @mui/x-date-pickers@v6.12.0.
@mui/x-charts@6.12.0slotProps propagation (#10105) @alexfauquetteuseLazyRef @oliviertassinarino-response workflow (#10102) @DanailHWe'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@v6.11.2eval blocked by CSP (#9863) @romgrkdisableExport flag in Print Export (#10044) @MBilalShafi@mui/x-data-grid-pro@v6.11.2 Same changes as in @mui/x-data-grid@v6.11.2.
@mui/x-data-grid-premium@v6.11.2 Same changes as in @mui/x-data-grid-pro@v6.11.2.
@mui/x-date-pickers@v6.11.2onChange context (#9985) @flaviendelangleGrid toolbar component with a styled div (#10052) @LukasTy@mui/x-date-pickers-pro@v6.11.2 Same changes as in @mui/x-date-pickers@v6.11.2.
We'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-tree-viewslot and slotProps props@mui/x-data-grid@6.11.1getCellAggregationResult: Handle null rowNode case (#9915) @romgrk@mui/x-data-grid-pro@6.11.1 Same changes as in @mui/x-data-grid@6.11.1.
@mui/x-data-grid-premium@6.11.1 Same changes as in @mui/x-data-grid-pro@6.11.1.
@mui/x-date-pickers@6.11.1numeric inputmode instead of tel (#9918) @LukasTyonChange when selecting a shortcut with changeImportance="set" (#9974) @flaviendelanglethemeAugmentation styleOverrides (#9978) @LukasTy@mui/x-date-pickers-pro@6.11.1 Same changes as in @mui/x-date-pickers@6.11.1.
@mui/x-charts@v6.0.0-alpha.7styleOverrides (#9996) @LukasTyslot/slotProps for customization (#9744) @alexfauquette@mui/x-tree-view@v6.0.0-alpha.1shouldDisableClock migration code options (#9920) @LukasTy[core] Stop using the deprecated JSX global namespace (#9854) @flaviendelangle
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
⌚️ Move the tree view component from @mui/lab package
The <TreeView /> component has been moved to the MUI X repository.
It is now accessible from its own package: @mui/x-tree-view.
🌍 Improve Hebrew (he-IL), Finnish (fi-FI), and Italian (it-IT) locales on the data grid
🐞 Bugfixes
📚 Documentation improvements
@mui/x-data-grid@v6.11.0ariaV7 experimental flag (#9496) @cherniavskiiundefined (#9871) @gitstart@mui/x-data-grid-pro@v6.11.0 Same changes as in @mui/x-data-grid@v6.11.0.
@mui/x-data-grid-premium@v6.11.0 Same changes as in @mui/x-data-grid-pro@v6.11.0.
@mui/x-date-pickers@v6.11.0CalendarHeader slot (#7784) @flaviendelangleInputProps of the TextField using the slotProps (#9849) @flaviendelanglelocaleText prop on the pickers (#9870) @flaviendelanglesx and className props on MobileDateRangePicker (#9853) @flaviendelangle@mui/x-date-pickers-pro@v6.11.0 Same changes as in @mui/x-date-pickers@v6.11.0.
@mui/x-charts@v6.0.0-alpha.6@mui/x-tree-view@v6.0.0-alpha.0Recommended usage section (#9892) @flaviendelangleJSX global namespace (#9854) @flaviendelangleWe'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@v6.10.2@mui/x-data-grid-pro@v6.10.2 Same changes as in @mui/x-data-grid@v6.10.2.
@mui/x-data-grid-premium@v6.10.2 Same changes as in @mui/x-data-grid-pro@v6.10.2, plus:
@mui/x-date-pickers@v6.10.2endOfDate from DigitalClock timeOptions (#9800) @noraleonte@mui/x-date-pickers-pro@v6.10.2 Same changes as in @mui/x-date-pickers@v6.10.2.
@mui/x-charts@v6.0.0-alpha.5pnpm in more places @oliviertassinaripnpm installation instructions for MUI X (#9707) @richbustosslotProps docs (#9668) @cherniavskiiWe'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 ✨:
@mui/x-data-grid@v6.10.1eval (#9635) @romgrkundefined row error (#9708) @romgrkviewportOuterSize.height going negative (#9664) @gitstart@mui/x-data-grid-pro@v6.10.1 Same changes as in @mui/x-data-grid@v6.10.1, plus:
@mui/x-data-grid-premium@v6.10.1 Same changes as in @mui/x-data-grid-pro@v6.10.1.
@mui/x-date-pickers@v6.10.1format and value update order (#9715) @LukasTyrequire usage in comment (#9675) @LukasTy@mui/x-date-pickers-pro@v6.10.1 Same changes as in @mui/x-date-pickers@v6.10.1.
@mui/x-charts@v6.0.0-alpha.4CustomSortIcons demo (#9656) @MBilalShafivalidate command (#9714) @romgrkWe'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.10.0GridToolbarQuickFilter component (#9633) @giladappsforcerowExpansionChange event public (#9611) @MBilalShafi@mui/x-data-grid-pro@6.10.0 Same changes as in @mui/x-data-grid@6.10.0.
@mui/x-data-grid-premium@6.10.0 Same changes as in @mui/x-data-grid-pro@6.10.0.
@mui/x-date-pickers@6.10.0@mui/x-date-pickers-pro@6.10.0 Same changes as in @mui/x-date-pickers@6.10.0.
@mui/x-charts@6.0.0-alpha.3We'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 ✨:
🚀 Auto-scroll when making range selection (#8661) @m4theushw
📚 New page: Components lifecycle (#8372) @flaviendelangle
Clarify pickers events and value updates in a single docs page.
🥧 Add pie chart component
They are fresh from the code editor. You can visit pie charts docs or their demo page.
<img width="380" alt="pie-charts" src="https://github.com/mui/mui-x/assets/13808724/fe908c45-803c-4316-b913-dbd2f9f0551e">
🐞 Bugfixes
📚 Documentation improvements
@mui/x-data-grid@6.9.2RangeError when using flex columns (#9554) @cherniavskiigetRowId in filtering (#9564) @romgrkTablePagination's rowsPerPageOptions shape to pageSizeOptions (#9438) @burakkgunduzz@mui/x-data-grid-pro@6.9.2 Same changes as in @mui/x-data-grid@6.9.2.
@mui/x-data-grid-premium@6.9.2 Same changes as in @mui/x-data-grid-pro@6.9.2, plus:
@mui/x-date-pickers@6.9.2internal folder to internals on @mui/x-date-picker-pro (#9571) @flaviendelangle@mui/x-date-pickers-pro@6.9.2 Same changes as in @mui/x-date-pickers@6.9.2.
@mui/x-charts@6.0.0-alpha.2ToggleButtonGroup (#9548) @flaviendelangleWe'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@6.9.1tooltip and loadingOverlay slots (#9028) @cherniavskiieditCellState prop to DOM element (#9501) @m4theushwnextFieldToFocus to always be a visible column field when <kbd>Tab</kbd> key is pressed (#8314) @yaredtsyMaximum call stack size exceeded error when using fractional width (#9516) @cherniavskii@mui/x-data-grid-pro@6.9.1 Same changes as in @mui/x-data-grid@6.9.1, plus:
checkboxSelection and treeData/grouping (#9418) @romgrk@mui/x-data-grid-premium@6.9.1 Same changes as in @mui/x-data-grid-pro@6.9.1.
@mui/x-date-pickers@6.9.1keyDown only when input is focused (#9481) @LukasTyreferenceDate prop on TimeClock, DigitalClock and MultiSectionDigitalClock (#9356) @flaviendelangle@mui/x-date-pickers-pro@6.9.1 Same changes as in @mui/x-date-pickers@6.9.1.
@mui/x-charts@6.0.0-alpha.1productId logic (#9451) @oliviertassinari"bg": "inline" (#9499) @alexfauquetteedit-mode to priority support action (#9483) @DanailHuses for priority support action (#9480) @DanailHWe'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 ✨:
🎁 We released a new open-source package: @mui/x-charts. This package aims at simplifying the integration of charts into your dashboards. 📊
<img width="512" alt="charts" src="https://github.com/mui/mui-x/assets/3165635/41201d3c-16a4-442d-a230-68356e6b433d">
It already contains line, bar, and scatter charts, with basic customization features. Check out the documentation to see what it can do, and open issues to get the feature you need implemented.
🚀 Introducing UTC and timezone support for pickers.
<img width="774" src="https://github.com/mui/mui-x/assets/3165635/ad95a404-ee67-4aff-b996-ad6cbb322348">
Visit the documentation to learn how to use it.
🌍 Improve Brazilian Portuguese (pt-BR) on the data grid
🌍 Improve Czech (cs-CZ) locale on the pickers
🚅 Performance improvements
🐞 Bugfixes
📚 Documentation improvements
@mui/x-data-grid@6.9.0getComputedStyle (#9236) @m4theushw@mui/x-data-grid-pro@6.9.0 Same changes as in @mui/x-data-grid@6.9.0.
@mui/x-data-grid-premium@6.9.0 Same changes as in @mui/x-data-grid-pro@6.9.0.
@mui/x-date-pickers@6.9.0minutesStep is respected by fields arrows up/down (#9338) @alexfauquettereferenceValue changes (#9390) @adrianmxbDateTimePicker (#9342) @LukasTy@mui/x-date-pickers-pro@6.9.0 Same changes as in @mui/x-date-pickers@6.9.0.
@mui/x-charts@6.0.0-alpha.0CHANGELOG.old.md (#9269) @flaviendelangleWe'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@6.8.0 / @mui/x-data-grid-pro@6.8.0 / @mui/x-data-grid-premium@6.8.0overridesResolver (#9248) @mrmuhammadaliactions cells in edit mode (#9321) @md250721GridColDef['type'] (#9320) @cherniavskii@mui/x-date-pickers@6.8.0 / @mui/x-date-pickers-pro@6.8.0referenceDate prop on DateCalendar, MonthCalendar and YearCalendar (#9260) @flaviendelangleDate Calendar dynamic data demo (#9290) @benzlerArgos CI step (#9301) @LukasTyCharts (#9314) @alexfauquetteWe'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 default format prop value on the pickers.
Here are a few examples:
<TimePicker views={['hours', 'minutes', 'seconds']} ampm />
// Format before v6.7.0: `hh:mm aa`
// Format after v6.7.0: `hh:mm:ss aa`
<DatePicker views={['year']} />
// Format before v6.7.0: `MM/DD/YYYY`
// Format after v6.7.0: `YYYY`
<DateTimePicker views={['day', 'hours', 'minutes']} ampm />
// Format before v6.7.0: `MM/DD/YYYY hh:mm aa`
// Format after v6.7.0: `DD hh:mm aa`
🌍 Add Romanian (ro-RO) locale on the pickers
🌍 Improve German (de-DE) locale on the pickers
🌍 Improve Czech (cs-CZ), German (de-DE) and Turkish (tr-TR) locales on the data grid
🚀 Performance improvements
🐞 Bugfixes
📚 Documentation improvements
@mui/x-data-grid@v6.7.0 / @mui/x-data-grid-pro@v6.7.0 / @mui/x-data-grid-premium@v6.7.0@mui/lab (#9235) @cherniavskiiObject prototype (#9265) @romgrksortModel and filterModel resetting when columns change (#9239) @alexgonch@mui/x-date-pickers@v6.7.0 / @mui/x-date-pickers-pro@v6.7.0DateRangePickerDay props JSDoc (#9191) @stevusGridFilterPanel API page (#9180) @cherniavskiimin/max over the nice() method (#9189) @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 ✨:
🚀 New date time picking UI on DesktopDateTimePicker
<img src="https://github.com/mui/mui-x/assets/3165635/4e1fe9f9-03eb-4f23-99dd-80212b21fb23" width="840" height="506" />
🚀 Performance improvements
🐞 Bugfixes
📚 Documentation improvements
🌍 Improve Dutch (nl-NL) and French (fr-FR) locales on the data grid
🌍 Add Vietnamese (vi-VN) locale on the pickers
@mui/x-data-grid@v6.6.0 / @mui/x-data-grid-pro@v6.6.0 / @mui/x-data-grid-premium@v6.6.0hydrateRowsMeta (#9121) @romgrkonCellEditStop not invoked (#8857) @romgrkcolumnWidthChange event on touchEnd of column resize (#8669) @MBilalShafirowExpansionChange (#8671) @cherniavskii@mui/x-date-pickers@v6.6.0 / @mui/x-date-pickers-pro@v6.6.0DigitalClock to DesktopDateTimePicker (#8946) @LukasTyMonthCalendar and YearCalendar disabled validation (#9149) @LukasTygetWeekArray (#9176) @flaviendelangleDateCalendar demo views with labels (#9152) @LukasTylocalesText (#9045) @MBilalShafirandomInt producing values exceeding max value (#9086) @cherniavskiidateWithTimezone adapter test (#9129) @flaviendelangle@types/node on v18 (#9107) @LukasTycross-fetch dependency (#9108) @LukasTycreateDetectElementResize() replaced with ResizeObserver (#9015) @oliviertassinariWe'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
May 19, 2023
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
💫 Introduce filtering on column headers for DataGridPro and DataGridPremium:
<img src="https://github.com/mui/mui-x/releases/download/v6.5.0/recording.gif" width="840" height="506" />
See the documentation for more information
🌍 Improve Hebrew (he-IL) and Czech (cs-CZ) locales
📝 Support for editing on pinned rows
🚀 Performance improvements
🐞 Bugfixes
📚 Documentation improvements
@mui/x-data-grid@6.5.0 / @mui/x-data-grid-pro@6.5.0 / @mui/x-data-grid-premium@6.5.0.MuiDataGrid-main has border (#8882) @cherniavskiitreeData and rowGrouping performance (#8990) @MBilalShafi@mui/x-date-pickers@6.5.0 / @mui/x-date-pickers-pro@6.5.0currentMonth instead of the one after (#8592) @flaviendelangleopenTo or views is modified (#8997) @alexfauquetteyarn.lock (#8988) @flaviendelangle[pickers] Stop using deprecated adapter methods (#8735) @flaviendelangle
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
🎁 Introduce clipboard paste support for DataGridPremium:
https://github.com/mui/mui-x/assets/13808724/abfcb5c6-9db6-4677-9ba7-ae97de441080
See the documentation for more information
🌍 Improve French (fr-FR), German (de-DE), Portuguese (pt-BR) and Ukrainian (uk-UA) locales on the data grid
🌍 Add Slovak (sk-SK) locale on the pickers
🐞 Bugfixes
📚 Documentation improvements
@mui/x-data-grid@v6.4.0 / @mui/x-data-grid-pro@v6.4.0 / @mui/x-data-grid-premium@v6.4.0display: grid (#8577) @cherniavskiibaseChip slot (#8748) @cherniavskii@mui/x-date-pickers@v6.4.0 / @mui/x-date-pickers-pro@v6.4.0LuxonAdapter (#8955) @alexfauquetteadapterLocale prop of LocalizationProvider (#8780) @flaviendelangleWe'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@v6.3.1 / @mui/x-data-grid-pro@v6.3.1 / @mui/x-data-grid-premium@v6.3.1Select, SelectOption, InputLabel, FormControl) (#8747) @cherniavskiiupdateRows (#8823) @cherniavskii@mui/x-date-pickers@v6.3.1 / @mui/x-date-pickers-pro@v6.3.1minutesStep validation prop behavior (#8794) @LukasTyviewRenderers overriding (#8830) @LukasTy<path> is (#8764) @alexfauquetteyarn typescript script (#8822) @cherniavskiitypescript:ci step memory limit (#8796) @LukasTyfake clock on MobileDateRangePicker (#8861) @LukasTyWe'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 ✨:
🚀 New time-picking UI designed for desktops (#7958) @LukasTy
<img src="https://user-images.githubusercontent.com/4941090/235072007-de39a397-e4a4-4c98-8e10-5ee4ad440108.gif" width="494" />
✨ Picker fields now always include a leading zero on digit sections (#8527) @flaviendelangle
🌍 Improve Chinese (zh-CN), French (fr-FR), and Turkish (tr-TR) locales
🐞 Bugfixes
📚 Documentation improvements
@mui/x-data-grid@v6.3.0 / @mui/x-data-grid-pro@v6.3.0 / @mui/x-data-grid-premium@v6.3.0gridClasses (#8686) @lindapaisteapi prop to div (#8679) @somedencolumns and columnGroupingModel at once (#8730) @cherniavskii@mui/x-date-pickers@v6.3.0 / @mui/x-date-pickers-pro@v6.3.0readOnly prop to InputProps instead of inputProps (#8659) @flaviendelanglecaES locale (#8782) @flaviendelangleDigitalClock desktop time picking experience (#7958) @LukasTyinstanceOf DateTime in AdapterLuxon (#8734) @flaviendelangleselected & disabled day style (#8773) @LukasTyAdapterDateFns to our repository (#8736) @flaviendelangleAdapterLuxon to our repository (#8600) @flaviendelangleAdapterMomentHijri to our repository (#8776) @flaviendelangleAdapterMomentJalaali and AdapterDateFnsJalali to our repository (#8741) @flaviendelangleAdapterMoment to our repository (#8700) @flaviendelangleen dash instead of em dash in multi input range fields (#8738) @flaviendelanglex-codemod package version in changelog (#8690) @MBilalShafiminDateTime validation page section (#8777) @LukasTyslots / slotProps props in the pickers migration guide (#8341) @flaviendelangleadapter.lib instead of adapterName in describeAdapters (#8779) @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 ✨:
@mui/x-data-grid@v6.2.1 / @mui/x-data-grid-pro@v6.2.1 / @mui/x-data-grid-premium@v6.2.1getTogglableColumns to Hide all and Show all actions (#8496) @MBilalShafiGridAutoSizer with ResizeObserver (#8091) @m4theushw@mui/x-date-pickers@v6.2.1 / @mui/x-date-pickers-pro@v6.2.1@mui/x-codemod@v6.2.1AdapterDayjs is in the Getting Started page (#8219) @flaviendelangleWe'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 ✨:
Add @mui/base as a peerDependency of @mui/x-date-pickers and @mui/x-date-pickers-pro (#8590) @LukasTy
Both libraries were not working correctly if used without @mui/base.
Most package manager should automatically use the @mui/base version installed for @mui/material.
The value rendered in the picker or field input no longer has spaces around the / characters (#8425) @flaviendelangle
You can use the formatDensity='spacious' prop to add it back.
More information on the dedicated doc section
🌍 Improve French (fr-FR) and Urdu (ur-PK) and locales.
🐞 Bugfixes
📚 Documentation improvements
@mui/x-data-grid@v6.2.0 / @mui/x-data-grid-pro@v6.2.0 / @mui/x-data-grid-premium@v6.2.0checkboxSelection toggle (#8522) @MBilalShafibaseSelect slot instead of baseTextField with select={true} (#8110) @cherniavskii@mui/x-date-pickers@v6.2.0 / @mui/x-date-pickers-pro@v6.2.0TimeClock validation ignoring date by default (#8570) @LukasTy@mui/base to peerDependencies (#8590) @LukasTyformatDensity prop (#8601) @flaviendelangleAdapterDayjs to our repository (#8487) @flaviendelanglerenovate rules (#8575) @LukasTyWe'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 ✨:
@mui/x-data-grid@v6.1.0 / @mui/x-data-grid-pro@v6.1.0 / @mui/x-data-grid-premium@v6.1.0ColumnsPanel component (#8401) @MBilalShafidate column value when entering edit mode by pressing a digit (#8364) @m4theushw@mui/x-date-pickers@v6.1.0 / @mui/x-date-pickers-pro@v6.1.0slotProps.textField.InputProps (#8428) @flaviendelanglecomponentsProps.dialog propagation (#8509) @LukasTyhasError from fieldValueManager to valueManager (#8453) @flaviendelangleisValid regression (#8543) @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-data-grid@v6.0.4 / @mui/x-data-grid-pro@v6.0.4 / @mui/x-data-grid-premium@v6.0.4components by slots in column menu API (#7999) @MBilalShafi@mui/x-date-pickers@v6.0.4 / @mui/x-date-pickers-pro@v6.0.4AdapterDateFnsJalali (#8402) @flaviendelangleuseFieldState (#8292) @flaviendelangleview when views or openTo changes (#8361) @LukasTy@mui/x-codemod@v6.0.4remove-stabilized-experimentalFeatures codemod (#8289) @alexfauquetteGridCellParams signature in migration guide (#8427) @cherniavskiilabel from demos where it reduces clarity (#8416) @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 ✨:
@mui/x-data-grid@v6.0.3 / @mui/x-data-grid-pro@v6.0.3 / @mui/x-data-grid-premium@v6.0.3@mui/x-date-pickers@v6.0.3 / @mui/x-date-pickers-pro@v6.0.3unstableFieldRef to imperatively interact with the selected sections (#8235) @flaviendelangleshouldDisableTime migration in more depth (#8348) @LukasTyvisx chart package (#8259) @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 ✨:
onChange when filling a partial date (#8082) @flaviendelangle1st (do) (#8188) @flaviendelangle@mui/x-data-grid@v6.0.2 / @mui/x-data-grid-pro@v6.0.2 / @mui/x-data-grid-premium@v6.0.2@mui/x-date-pickers@v6.0.2 / @mui/x-date-pickers-pro@v6.0.2slotProps.textField (#8201) @LukasTyonChange when filling a partial date (#8082) @flaviendelangle1st (do) (#8188) @flaviendelangleluxon macro tokens (#8245) @flaviendelanglemoment-hijri demo (#8255) @LukasTy/ (#8223) @alexfauquetteWe'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@v6.0.1 / @mui/x-data-grid-pro@v6.0.1 / @mui/x-data-grid-premium@v6.0.1MenuProps.onClose being overridden for single select edit component (#8174) @rohitnateshbuildPrintWindow (#8142) @oliviertassinari@mui/x-date-pickers@v6.0.1 / @mui/x-date-pickers-pro@v6.0.1renderInput prop is passed to a picker (#8183) @flaviendelangleownerState to the inputAdornment slot (#8165) @flaviendelangleMigration guides are available with a complete list of the breaking changes:
We're excited to announce the first v6 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 ✨:
🎁 The row pinning is no longer experimental (#8055) @MBilalShafi
You can now use the row pinning without the experimentalFeatures.rowPinning flag enabled.
<DataGridPro
- experimentalFeatures={{ rowPinning: true }}
/>
⚡️ Improved grid performance by rows and cells memoization (#7846) @m4theushw
✨ Fields have a distinct visual state when empty (#8069) @LukasTy
🌍 Improve Czech (cs-CZ) locale (#8113) @BlastyCZ
🌍 Improve Arabic (ar-SD) locale (#8100) @atf98
📚 Documentation improvements
🐞 Bugfixes
@mui/x-data-grid@v6.0.0 / @mui/x-data-grid-pro@v6.0.0 / @mui/x-data-grid-premium@v6.0.0componentsProps and slotProps props are now typed for better DXcellFocus, cellTabIndex and editRowsState props are not passed to the component used in the row slot. You can use the new focusedCell and tabbableCell props instead. For the editing state, use the API methods.
The flag experimentalFeatures.rowPinning is no longer needed.componentsProps (#7968) @MBilalShafiBaseInputLabel slot (#8068) @cherniavskiiBaseSelectOption slot (#8072) @cherniavskiigetLocaleText synchronously (#8029) @m4theushwstyled from system (#8032) @siriwatknpgetColumnForNewFilter method (#8043) @MBilalShafi@mui/x-date-pickers@v6.0.0 / @mui/x-date-pickers-pro@v6.0.0On desktop, DateTimePicker shows the am/pm controls in the toolbar instead of the clock by default.
It can be overridden by specifying ampmInClock prop.
formatTokenMap of each adapter (#8112) @flaviendelanglesectionOrder state with a memoized variable (#8090) @flaviendelanglemoment adapter (#8031) @flaviendelangleonClose callback on static pickers (#8021) @LukasTysx propagation (#8064) @alexfauquettemoment peer dependency minimum version (#8046) @oliviertassinariWrapperVariantContext (#8088) @LukasTyWrapperVariantContext in Clock (#8083) @LukasTyaggregation experimental flag removal to the migration guide (#8056) @MBilalShafiAPI object in the apiRef sections (#8106) @MBilalShafi@next tag from installation instructions (#8102) @cherniavskiimaster (#8081) @m4theushw[DataGrid] Introduce slots and deprecate components (#7882) @MBilalShafi
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
singleSelect column (#7684) @m4theushw@mui/x-data-grid@v6.0.0-beta.5 / @mui/x-data-grid-pro@v6.0.0-beta.5 / @mui/x-data-grid-premium@v6.0.0-beta.5singleSelect (#7684) @m4theushwownerState being undefined in theme style overrides (#7964) @lolaignatovaslots and deprecate components (#7882) @MBilalShafiRemove All option in filter panel (#7326) @MBilalShafi@mui/x-date-pickers@v6.0.0-beta.5 / @mui/x-date-pickers-pro@v6.0.0-beta.5MuiDateSectionName type was renamed to FieldSectionTypeArrowUp / ArrowDown edition only impact the active section (#7993) @flaviendelangletextField slot error prop propagation (#7987) @LukasTy@mui/x-codemod@v6.0.0-beta.5apiRef.current.getRowIndex to DataGrid renaming codemod (#8001) @MBilalShafimoment locale on adapter tests (#8020) @flaviendelangleWe'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@v6.0.0-beta.4 / @mui/x-data-grid-pro@v6.0.0-beta.4 / @mui/x-data-grid-premium@v6.0.0-beta.4singleSelect column (#7685) @m4theushwTrapFocus inside the panel wrapper (#7733) @Vivek-PrajapatiiupdateRows (#7857) @cherniavskiileafField to have correct focus value (#7950) @MBilalShafi@mui/x-date-pickers@v6.0.0-beta.4 / @mui/x-date-pickers-pro@v6.0.0-beta.4Android (#7842) @flaviendelangleLuxon (#7888) @flaviendelangle@mui/x-codemod@v6.0.0-beta.4useGridApiEventHandler examples (#7939) @flaviendelangleDataGrid migration guide (#7861) @MBilalShafiLocalizationProvider dateAdapter with a link to the doc (#7872) @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 ✨:
@mui/x-data-grid@v6.0.0-beta.3 / @mui/x-data-grid-pro@v6.0.0-beta.3 / @mui/x-data-grid-premium@v6.0.0-beta.3BaseIconButton component slot (#7329) @123joshuawuapiRef.current.getRowWithUpdatedValues stable (#7788) @m4theushw@mui/x-date-pickers@v6.0.0-beta.3 / @mui/x-date-pickers-pro@v6.0.0-beta.3day.js (#7862) @flaviendelangleBackspace or Delete (#7855) @flaviendelangleskipLibCheck (#7808) @LukasTy@mui/x-codemod@v6.0.0-beta.3rename-selectors-and-events codemod (#7856) @MBilalShafiexperimentalFeatures flag (#7836) @MBilalShafiGridFilterItem props (#7483) @MBilalShafilinkOperators to logicOperators (#7707) @MBilalShafionCellFocusOut prop for Data Grid (#7786) @MBilalShafi@next tag in grid and pickers installation instructions (#7814) @cherniavskiitslint package leftovers (#7841) @LukasTycreateDescribes for describeValue and describeValidation (#7866) @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 ✨:
@mui/x-data-grid@v6.0.0-beta.2 / @mui/x-data-grid-pro@v6.0.0-beta.2 / @mui/x-data-grid-premium@v6.0.0-beta.2getRowHeight prop (#7703) @cherniavskiicomponentsProps.row.style (#7641) @marktoman@mui/x-date-pickers@v6.0.0-beta.2 / @mui/x-date-pickers-pro@v6.0.0-beta.2rangePosition on all range components (#7764) @flaviendelanglerifm (#7785) @alexfauquette@mui/x-codemod@v6.0.0-beta.2rename-default-toolbar-title-localeText codemod (#7752) @LukasTyrename-inputFormat-prop codemod (#7736) @LukasTynext translation docs and remove duplicates with -next (#7729) @LukasTyWe'd like to offer a big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
Jan 27, 2023
We'd like to offer a big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@v6.0.0-beta.1 / @mui/x-data-grid-pro@v6.0.0-beta.1 / @mui/x-data-grid-premium@v6.0.0-beta.1title attribute to cells (#7682) @thupiautoHeight not working properly inside of a flex container (#7701) @cherniavskiiMuiTablePagination (#7717) @MBilalShafi@mui/x-date-pickers@v6.0.0-beta.1 / @mui/x-date-pickers-pro@v6.0.0-beta.1aria-labelledby assignment to dialog (#7608) @LukasTyUTC with dayjs (#7610) @flaviendelangle@mui/x-codemod@v6.0.0-beta.1replace-toolbar-props-by-slot codemod (#7687) @alexfauquetteGridColumnMenuItemProps to column-menu-components-rename codemod (#7710) @MBilalShafiheaderHeight prop update to row-selection-props-rename codemod (#7711) @MBilalShaficomponents to slots renaming (#7533) @alexfauquettemigrate-to-components-componentsProps and replace-arrows-button-slot codemods (#7698) @alexfauquetterowsPerPageOptions prop to pageSizeOptions (#7603) @MBilalShafirename-should-disable-time codemod (#7709) @alexfauquetterow-selection-props-rename codemod (#7485) @MBilalShafirename-selectors-and-events codemod (#7699) @MBilalShafireplace-tabs-props codemod (#7639) @alexfauquetteslots (#7714) @Vivek-PrajapatiiDemoContainer components prop using a codemod (#7574) @alexfauquetteinnerslotProps typo (#7697) @LukasTyAfter a long period in alpha, we're glad to announce the first MUI X v6 beta! We encourage you to try out this version, packed with improvements, bug
Jan 20, 2023
After a long period in alpha, we're glad to announce the first MUI X v6 beta! We encourage you to try out this version, packed with improvements, bug fixes, and a few highlighted features ✨:
Data Grid
Date and Time pickers
You can check the migration guides for the Data Grid and Date Pickers in the documentation.
We'd like to offer a big thanks to the 10 contributors who made this release possible.
page and pageSize props into paginationModel@mui/x-data-grid@v6.0.0-beta.0 / @mui/x-data-grid-pro@v6.0.0-beta.0 / @mui/x-data-grid-premium@v6.0.0-beta.0The disableExtendRowFullWidth prop was removed.
Use showCellVerticalBorder or showColumnVerticalBorder props to show or hide right border for cells and header cells respectively.
The GridCellIdentifier type was removed. Use GridCellCoordinates instead.
The singleSelect column type now has a default value formatter that returns the label corresponding to the selected value when valueOptions is an array of objects.
As consequence, any existing value formatter will not be applied to the individual options anymore, but only to the text of the cell.
It is recommended to migrate valueOptions to an array of objects to be able to add a custom label for each value.
To override the label used for each option when the cell is in edit mode or in the filter panel, the following components now support a getOptionLabel prop.
This prop accepts a callback that is called with the item from valueOptions and must return the new label.
GridEditSingleSelectCellGridFilterInputSingleSelectGridFilterInputMultipleSingleSelectThe getGridSingleSelectQuickFilterFn function was removed.
You can copy the old function and pass it to the getApplyQuickFilterFn property of the singleSelect column definition.
The page and pageSize props and their respective event handlers onPageChange and onPageSizeChange were removed.
Use paginationModel and onPaginationModelChange instead.
<DataGrid
rows={rows}
columns={columns}
- page={page}
- pageSize={pageSize}
- onPageChange={handlePageChange}
- onPageSizeChange={handlePageSizeChange}
+ paginationModel={{ page, pageSize }}
+ onPaginationModelChange={handlePaginationModelChange}
/>
The properties initialState.pagination.page and initialState.pagination.pageSize were also removed.
Use initialState.pagination.paginationModel instead.
-initialState={{ pagination: { page: 1, pageSize: 10 } }}
+initialState={{ pagination: { paginationModel: { page: 1, pageSize: 10 } } }}
The rowsPerPageOptions prop was renamed to pageSizeOptions.
-<DataGrid rowsPerPageOptions={[10, 20, 50]} />
+<DataGrid pageSizeOptions={[10, 20, 50]} />
The error and onError props were removed - the grid no longer catches errors during rendering.
To catch errors that happen during rendering use the error boundary.
The components.ErrorOverlay slot was removed.
The GridErrorOverlay component was removed.
The componentError event was removed.
Use the error boundary to catch errors thrown during rendering.
The apiRef.current.showError method was removed.
The UI for errors is no longer handled by the grid.
The date and dateTime columns now only support Date objects as values.
To parse a string value, use the valueGetter:
<DataGrid
columns={[
{
field: 'date',
type: 'date',
valueGetter: (params) => new Date(params.value),
},
]}
/>
The following selectors have been renamed:
gridVisibleSortedRowIdsSelector renamed to gridExpandedSortedRowIdsSelectorgridVisibleSortedRowEntriesSelector renamed to gridExpandedSortedRowEntriesSelectorgridVisibleRowCountSelector renamed to gridExpandedRowCountSelectorgridVisibleSortedTopLevelRowEntriesSelector renamed to gridFilteredSortedTopLevelRowEntriesSelectorgridVisibleTopLevelRowCountSelector renamed to gridFilteredTopLevelRowCountSelectorThe apiRef.current.getVisibleRowModels method was removed. Use the gridVisibleSortedRowEntriesSelector selector instead.
The GridRowScrollEndParams["virtualRowsCount"] parameter was renamed to GridRowScrollEndParams["visibleRowsCount"].
singleSelect (#7290) @m4theushwpage and pageSize props into paginationModel (#7147) @MBilalShafiDate as value in date and dateTime column types (#7594) @cherniavskiiGridCellIdentifier redundant type (#7578) @MBilalShafidisableExtendRowFullWidth prop (#7373) @MBilalShafiisAnyOf operator input (#7592) @m4theushw@mui/x-date-pickers@v6.0.0-beta.0 / @mui/x-date-pickers-pro@v6.0.0-beta.0The showToolbar prop has been moved to the toolbar component slot props:
<DatePicker
- showToolbar
+ slotProps={{
+ toolbar: {
+ hidden: false,
+ }
+ }}
/>
The new pickers have replaced the legacy one.
If you were using the new pickers with their temporary name, you just have to change your imports.
-import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { Unstable_DesktopNextDatePicker as DesktopNextDatePicker } from '@mui/x-date-pickers/DesktopNextDatePicker';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
// Same for all the other pickers with an `Unstable_` prefix
If you were still using the legacy picker (DatePicker, DesktopDatePicker, ...), please take a look at our migration guide for detailed explanations on how to start using the new ones.
The fields components are no longer unstable
-import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
+import { DateField } from '@mui/x-date-pickers/DateField';
calendars prop on mobile (#7526) @flaviendelangleshowDaysOutsideCurrentMonth when calendars > 1 (#7529) @flaviendelanglerangePosition to view (#7602) @LukasTyUnstable_ prefix for field components (#7185) @flaviendelangleslots and slotProps on the date range view renderer (#7586) @flaviendelangleclassName and sx props are applied to the field / static root of the picker and never to the view (#7600) @flaviendelanglecomponents and componentSlots references (#7576) @LukasTyshowToolbar with toolbar slot hidden prop (#7498) @LukasTyDateCalendar and TimeClock (#7587) @flaviendelangleWrapperVariantContext in DateRangeCalendar (#7488) @flaviendelangle@mui/x-codemod@v6.0.0-beta.0disableExtendRowFullWidth prop (#7508) @MBilalShafifield components page (#7605) @flaviendelanglestatus: needs triage label on RFC @oliviertassinarix-codemod package tag change (#7617) @LukasTyCHANGELOG (#7611) @flaviendelangle[docs] Update the migration guide with the breaking changes between the legacy and the new pickers (#7345) @flaviendelangle
Jan 13, 2023
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
onColumnOrderChange behavior to match onRowsOrderChange (#7385) @DanailH@mui/x-data-grid@v6.0.0-alpha.15 / @mui/x-data-grid-pro@6.0.0-alpha.15 / @mui/x-data-grid-premium@6.0.0-alpha.15Remove the onCellFocusOut prop (#6302) @cherniavskii
The onCellFocusOut prop was removed. Use componentsProps.cell.onBlur instead:
<DataGrid
componentsProps={{
cell: {
onBlur: (event) => {
const cellElement = event.currentTarget;
const field = cellElement.getAttribute('data-field');
const rowId = cell.parentElement.getAttribute('data-id');
},
},
}}
/>
[DataGrid] Stop exporting editing selector (#7456) @m4theushw
The gridEditRowsStateSelector selector was removed.
[DataGrid] Rework column headers and virtual scroller positioning (#7001) @cherniavskii
The headerHeight prop was renamed to columnHeaderHeight.
[DataGrid] Remove the columnTypes prop (#7309) @cherniavskii
The columnTypes prop was removed. For custom column types see Custom column types docs.
[DataGrid] Rename linkOperators to logicOperators (#7310) @cherniavskii
The apiRef.current.setFilterLinkOperator method was renamed to apiRef.current.setFilterLogicOperator.
The GridLinkOperator enum was renamed to GridLogicOperator.
The GridFilterModel['linkOperator'] was renamed to GridFilterModel['logicOperator'].
The linkOperators prop of GridFilterForm and GridFilterPanel components was renamed to logicOperators.
The linkOperatorInputProps prop of GridFilterForm component was renamed to logicOperatorInputProps.
The filterFormProps.linkOperatorInputProps prop in GridFilterForm component was renamed to filterFormProps.logicOperatorInputProps.
The GridLocaleText['filterPanelLinkOperator'] property was renamed to GridLocaleText['filterPanelLogicOperator'].
The .MuiDataGrid-filterFormLinkOperatorInputCSS class was renamed to .MuiDataGrid-filterFormLogicOperatorInput.
[DataGrid] Remove Alt+C keyboard shortcut (#7466) @MBilalShafi
<kbd>Alt</kbd> (or <kbd>⌥ Option</kbd>) + <kbd>C</kbd> keyboard shortcut is no longer supported.
columnTypes prop (#7309) @cherniavskiionCellFocusOut prop (#6302) @cherniavskiilinkOperators to logicOperators (#7310) @cherniavskiionColumnOrderChange behavior to match onRowsOrderChange (#7385) @DanailH@mui/x-date-pickers@6.0.0-alpha.15 / @mui/x-date-pickers-pro@6.0.0-alpha.15[pickers] Stop using the WrapperVariantContext in MonthCalendar and YearCalendar (#7382) @flaviendelangle
The modeMobile and modeDesktop classes have been removed from the PickersMonth and PickersYear internal components.
If you were using those classes on responsive components,
you can import DEFAULT_DESKTOP_MODE_MEDIA_QUERY from @mui/x-date-pickers or @mui/x-date-pickers-pro (or use your custom media query if any):
<GlobalStyles
styles={{
- [`.${pickersYearClasses.modeDesktop}`]: {
- backgroundColor: 'red'
- }
+ [DEFAULT_DESKTOP_MODE_MEDIA_QUERY]: {
+ [`.${pickersYearClasses.root}`]: {
+ backgroundColor: 'red'
+ }
+ }
- [`.${pickersYearClasses.modeMobile}`]: {
- backgroundColor: 'red'
- }
+ [DEFAULT_DESKTOP_MODE_MEDIA_QUERY.replace('@media', '@media not')]: {
+ [`.${pickersYearClasses.root}`]: {
+ backgroundColor: 'red'
+ }
+ }
}}
/>
Works exactly the same way for PickersMonth.
[pickers] Refactor shouldDisableTime (#7299) @LukasTy
The shouldDisableTime prop signature has been changed. Either rename the prop usage to shouldDisableClock or refactor usage.
<DateTimePicker
- shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
+ shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
/>
<DateTimePicker
- shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
+ shouldDisableTime={(time, view) => view === 'hours' && value.hour() < 12}
/>
DesktopNextDateTimePicker (#7503) @flaviendelangleshouldDisableTime (#7299) @LukasTyWrapperVariantContext from DateTimePickerTabs (#7374) @LukasTyWrapperVariantContext in MonthCalendar and YearCalendar (#7382) @flaviendelanglecomponents and slots for new pickers (#7390) @alexfauquetteslotsProps by slotProps (#7528) @alexfauquetteDemoContainer (#7388) @LukasTycurrentView (#7441) @oliviertassinariDateRangeCalendar (#7378) @flaviendelanglecloseOnSelect to prop definition (#7459) @flaviendelangle[docs] Drop security fixes support for v4 (#7322) @oliviertassinari
Jan 5, 2023
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
SingleInputTimeRangeField and SingleInputDateTimeRangeField components (#7186) @alexfauquette@mui/x-data-grid@v6.0.0-alpha.14 / @mui/x-data-grid-pro@v6.0.0-alpha.14 / @mui/x-data-grid-premium@v6.0.0-alpha.14[DataGrid] Set default GridCellParams['value'] type to unknown (#6959) @cherniavskii
The default type of GridCellParams['value'] was changed from any to unknown.
singleSelect inside GridFilterInputValue (#7386) @m4theushwGridCellParams['value'] type to unknown (#6959) @cherniavskii@mui/x-date-pickers@v6.0.0-alpha.14 / @mui/x-date-pickers-pro@v6.0.0-alpha.14input slot of the fields to textField to avoid confusion (#7369) @flaviendelangleSingleInputTimeRangeField and SingleInputDateTimeRangeField components (#7186) @alexfauquetteinput slot of the fields to textField to avoid confusion (#7369) @flaviendelangleTimeField arrow edition (#7383) @flaviendelanglevariants in theme augmentation (#7356) @LukasTyPaperContent slot from the new pickers (#7342) @flaviendelangle@mui/x-codemod@v6.0.0-alpha.14disablePast and disableFuture definition swap (#7324) @alexfauquetteTimeClock (#7280) @flaviendelangle_redirects @oliviertassinariWe'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
Dec 24, 2022
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.0.0-alpha.13 / @mui/x-data-grid-pro@6.0.0-alpha.13 / @mui/x-data-grid-premium@6.0.0-alpha.13New column menu design and API (#6619) MBilalShafi
The currentColumn prop passed to components.ColumnMenu was renamed to colDef.
The column prop passed to the items of the column menu was renamed to colDef.
The DATA_GRID_DEFAULT_SLOTS_COMPONENTS export has been removed.
The following components and interfaces were been renamed for consistency:
Community Package:
-<GridFilterMenuItem />
+<GridColumnMenuFilterItem />
-<HideGridColMenuItem />
+<GridColumnMenuHideItem />
-<GridColumnsMenuItem />
+<GridColumnMenuColumnsItem />
-<SortGridMenuItems />
+<GridColumnMenuSortItem />
-interface GridFilterItemProps
+interface GridColumnMenuItemProps
Pro package:
-<GridColumnPinningMenuItems />
+<GridColumnMenuPinningItem />
Premium package:
-<GridAggregationColumnMenuItem />
+<GridColumnMenuAggregationItem />
-<GridRowGroupingColumnMenuItems />
-<GridRowGroupableColumnMenuItems />
+<GridColumnMenuGroupingItem />
Improve column definition typing (#7224) @cherniavskii
The GridColumns type was removed. Use GridColDef[] instead.
The GridActionsColDef interface was removed. Use GridColDef instead.
The GridEnrichedColDef type was removed. Use GridColDef instead.
The GridStateColDef type was removed.
If you use it to type searchPredicate, use GridColumnsPanelProps['searchPredicate'] instead.
If you use it to type getApplyFilterFn, GridFilterOperator['getApplyFilterFn'] can be used as a replacement.
Remove GridDensityType enum (#7304) @cherniavskii
The GridDensityTypes enum was removed. Use GridDensity type instead.
GridDensityType enum (#7304) @cherniavskiirowHeight and headerHeight from the state (#7199) @DanailHkey of the detail panels (#7302) @m4theushwexceljs import with the parcel (#7284) @alexfauquette@mui/x-date-pickers@6.0.0-alpha.13 / @mui/x-date-pickers-pro@6.0.0-alpha.13Require Luxon 3.0.2 or higher (#7249) @flaviendelangle
AdapterLuxon now requires luxon in version 3.0.2 or higher in order to work.
Take a look at the Upgrading Luxon guide if you are using an older version.
disabled and readOnly on multi-input picker (#7135) @LukasTyDateCalendar (#7247) @flaviendelangle@mui/x-codemod@6.0.0-alpha.13DateCalendar (#7053) @flaviendelangleWe'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 ✨:
🚀 The apiRef prop is now available in the @mui/x-data-grid package:
const apiRef = useGridApiRef();
return (
<DataGrid apiRef={apiRef} {...other} />
)
See the documentation for more information.
🎁 The DataGridPremium now supports cell selection:
<DataGridPremium unstable_cellSelection />
See the documentation for more information
🌍 Support the Right To Left orientation on the fields components
📚 Documentation improvements
🐞 Bugfixes
@mui/x-data-grid@v6.0.0-alpha.12 / @mui/x-data-grid-pro@v6.0.0-alpha.12 / @mui/x-data-grid-premium@v6.0.0-alpha.12showCellRightBorder was renamed to showCellVerticalBordershowColumnRightBorder was renamed to showColumnVerticalBorder.MuiDataGrid-withBorder CSS class was renamed to .MuiDataGrid-withBorderColor and it only sets border-color CSS property now.apiRef were removed: footerRef, headerRef, columnHeadersElementRef, columnHeadersContainerElementRefGridHeaderPlaceholder component was removed.MAX_PAGE_SIZE constant was removed.useGridScrollFn hook was removed.sortingOrder prop (#7180) @MBilalShafiapiRef in Community package (#6773) @cherniavskii@mui/x-date-pickers@v6.0.0-alpha.12 / @mui/x-date-pickers-pro@v6.0.0-alpha.12autoFocus behavior on fields and new pickers (#7153) @flaviendelangleStaticNextDateTime (#7187) @flaviendelangleDemoGrid component to unify demos with several components (#7057) @flaviendelangleDemoContainer and DemoItem on every picker demo (#7149) @flaviendelangleWe'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 ✨:
NextDateRangePicker) (#6763) @LukasTyday view (#7066) @flaviendelangleDataGridPremium (#7124) @m4theushw@mui/x-data-grid@v6.0.0-alpha.11 / @mui/x-data-grid-pro@v6.0.0-alpha.11 / @mui/x-data-grid-premium@v6.0.0-alpha.11filterPanelOperators translation key was renamed to filterPanelOperator (#7062) @MBilalShaficomponents.Header slot was removed. Use components.Toolbar slot instead (#6999) @cherniavskiiHeader slot (#6999) @cherniavskiifilterPanelOperators -> filterPanelOperator (#7062) @MBilalShafigroupId to aggregation function (#7003) @m4theushw@mui/x-date-pickers@v6.0.0-alpha.11 / @mui/x-date-pickers-pro@v6.0.0-alpha.11Remove the callback version of the action prop on the actionBar slot (#7038) @flaviendelangle
The action prop of the actionBar slot is no longer supporting a callback.
Instead, you can pass a callback at the slot level:
<DatePicker
componentsProps={{
- actionBar: {
- actions: (variant) => (variant === 'desktop' ? [] : ['clear']),
- },
+ actionBar: ({ wrapperVariant }) => ({
+ actions: wrapperVariant === 'desktop' ? [] : ['clear'],
+ }),
}}
/>
The selectedDays prop has been removed from the Day component (#7066) @flaviendelangle
If you need to access it, you can control the value and pass it to the slot using componentsProps:
function CustomDay({ selectedDay, ...other }) {
// do something with 'selectedDay'
return <PickersDay {...other} />;
}
function App() {
const [value, setValue] = React.useState(null);
return (
<DatePicker
value={value}
onChange={(newValue) => setValue(newValue)}
components={{ Day: CustomDay }}
componentsProps={{
day: { selectedDay: value },
}}
/>
);
}
The currentlySelectingRangeEnd / setCurrentlySelectingRangeEnd props on the Date Range Picker toolbar have been renamed to rangePosition / onRangePositionChange (#6989) @flaviendelangle
const CustomToolbarComponent = props => (
<div>
- <button onChange={() => props.setCurrentlySelectingRangeEnd('end')}>Edit end date</button>
+ <button onClick={() => props.onRangePositionChange('end')}>Edit end date</button>
- <div>Is editing end date: {props.currentlySelectingRangeEnd === 'end'}</div>
+ <div>Is editing end date: {props.rangePosition === 'end'}</div>
</div>
)
<DateRangePicker
components={{
Toolbar: CustomToolbarComponent
}}
/>
DayCalendar (#7066) @flaviendelangleaction prop in the actionBar component slot (#7038) @flaviendelangleGridCell change in migration guide (#7087) @MBilalShafiinternals-fields imports (#7119) @flaviendelangleApiPage.js with monorepo (#7073) @oliviertassinariWe'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.0.0-alpha.10 / @mui/x-data-grid-pro@v6.0.0-alpha.10 / @mui/x-data-grid-premium@v6.0.0-alpha.10[DataGrid] Removes GridCell fallback to valueToRender on null children (#7023) @MBilalShafi
Returning null in column.renderCell or column.renderEditCell now renders an empty cell instead of the default formatted value.
[DataGrid] Refactor GridFilterItem props (#6985) @MBilalShafi
Properties columnField and operatorValue of GridFilterItem are renamed field and operator. And operator property is now required.
filterModel: {
items: [{
- columnField: 'rating',
+ field: 'rating',
- operatorValue: '>',
+ operator: '>', // required
value: '2.5'
}],
},
GridFilterItem props (#6985) @MBilalShafi<GridCell /> fallback to valueToRender on null children (#7023) @MBilalShafi@mui/x-date-pickers@v6.0.0-alpha.10 / @mui/x-date-pickers-pro@v6.0.0-alpha.10Rename dateRangeIcon to dateIcon (#7024) @LukasTy
The dateRangeIcon prop has been renamed to dateIcon:
// Same on all other Date Time Picker variations
<DateTimePicker
componentsProps={{
tabs: {
- dateRangeIcon: <LightModeIcon />,
+ dateIcon: <LightModeIcon />,
}
}}
/>
dateRangeIcon to dateIcon (#7024) @LukasTyTimeClock (#6962) @flaviendelangle@date-io (#6972) @flaviendelangleLocalizationProvider from previews (#6869) @flaviendelangletest:unit with monorepo (#6907) @oliviertassinariWe'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 ✨:
🎁 Introduce the v6 pickers, built on top of the field components DatePicker, TimePicker, DateTimePicker, DateRangePicker.
The old (legacy) components will be removed at the end of the v6 beta.
💅 Add support for theme.vars in the pickers and the DataGrid (#6784, #6778) @alexfauquette
✨ Improve DataGrid theme augmentation (#5818) @iigrik
📚 Documentation improvements
🐞 Bugfixes
@mui/x-data-grid@v6.0.0-alpha.9 / @mui/x-data-grid-pro@v6.0.0-alpha.9 / @mui/x-data-grid-premium@v6.0.0-alpha.9<kbd>Ctrl</kbd> + <kbd>Enter</kbd> will no longer toggle the master detail panel (#6945) @MBilalShafi
You can restore the old behavior by listening to cellKeyDown and calling apiRef.current.toggleDetailPanel().
Remove unnecessary keyboard navigation events (#6863) @m4theushw
The cellNavigationKeyDown event was removed. Use cellKeyDown and check the key provided in the event argument.
The columnHeaderNavigationKeyDown event was removed. Use columnHeaderKeyDown and check the key provided in the event argument.
Rename rowsScroll event to scrollPositionChange (#6957) @DanailH
GridToolbar for better visibility (#6904) @MBilalShafistyleOverrides (#5818) @iigrikErrorOverlay to GridErrorOverlay (#6946) @MBilalShafitheme.vars (#6784) @alexfauquetterowsScroll event to scrollPositionChange (#6957) @DanailHupdateRows API method (#6976) @cherniavskiistyleOverrides (#6920) @m4theushwfilterOperatorBefore in Arabic (ar-SD) locale (#6884) @HassanGhazy@mui/x-date-pickers@v6.0.0-alpha.9 / @mui/x-date-pickers-pro@v6.0.0-alpha.9PickersCalendarHeader slots (#6943) @flaviendelangleLocalizationProvider with each a localeText prop (#6895) @flaviendelangleMobileDateRangePicker, DesktopDateRangePicker, DateRangePicker and StaticDateRangePicker based on MultiInputDateRangeField (#6888) @flaviendelangletheme.vars (#6778) @alexfauquettedescribeValidation (#6942) @flaviendelanglex-codemod package (#6876) @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@v6.0.0-alpha.8 / @mui/x-data-grid-pro@v6.0.0-alpha.8 / @mui/x-data-grid-premium@v6.0.0-alpha.8ErrorOverlay not receiving defined input props (#6819) @banoth-ravinder@types/react (#6797) @vizvapiRef methods private (#6700) @cherniavskiigetRowSpacing prop (#6707) @cherniavskii@mui/x-date-pickers@v6.0.0-alpha.8 / @mui/x-date-pickers-pro@v6.0.0-alpha.8The ClockPicker view component has been renamed to TimeClock to better fit its usage:
-<ClockPicker {...props} />
+<TimeClock {...props} />
Component name in the theme has changed as well:
-MuiClockPicker: {
+MuiTimeClock: {
DateRangeCalendar and multi input range fields (#6852) @flaviendelangleampm prop from the new pickers to their field (#6868) @flaviendelangleCalendarPickerView, ClockPickerView and CalendarOrClockPickerView (#6855) @flaviendelangleClockPicker into TimeClock (#6851) @flaviendelangledayjs to the dependencies (#6862) @m4theushwtest-types out of memory error (#6850) @LukasTy@mui/utils instead of @mui/material/utils (#6816) @cherniavskiionError call on the pickers (#6771) @alexfauquette⚙️ Removed everything marked as @deprecated
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
@deprecated@mui/x-data-grid@v6.0.0-alpha.7 / @mui/x-data-grid-pro@v6.0.0-alpha.7 / @mui/x-data-grid-premium@v6.0.0-alpha.7@deprecated (#6505) @DanailH@mui/x-date-pickers@v6.0.0-alpha.7 / @mui/x-date-pickers-pro@v6.0.0-alpha.7MobileDateTimePicker, DesktopDateTimePicker, DateTimePicker and StaticDateTimePicker based on DateTimeField (#6767) @flaviendelangleMobileTimePicker, DesktopTimePicker, TimePicker and StaticTimePicker based on TimeField (#6728) @flaviendelangleonError prop and add context on the onChange prop (#6731) @flaviendelangleWe'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 ✨:
🎁 Allow non-controlled usage of the calendar components (#6643) @flaviendelangle
<DateCalendar defaultValue={dayjs()} />
<MonthCalendar defaultValue={dayjs()} />
<YearCalendar defaultValue={dayjs()} />
🌍 Add Ukrainian (uk-UA) locale to pickers (#6661) @Dufran
📚 Documentation improvements
🐞 Bugfixes
@mui/x-data-grid@v6.0.0-alpha.6 / @mui/x-data-grid-pro@v6.0.0-alpha.6 / @mui/x-data-grid-premium@v6.0.0-alpha.6disableIgnoreModificationsIfProcessingProps prop has been removed and its behavior when true was incorporated as the default behavior.
The old behavior can be restored by using apiRef.current.stopRowEditMode({ ignoreModifications: true }) or apiRef.current.stopCellEditMode({ ignoreModifications: true }).rowSelection prop (#6499) @m4theushw@mui/material imports to @mui/utils (#6569) @LukasTydisableIgnoreModificationsIfProcessingProps prop (#6640) @m4theushwapiRef properties (#6388) @cherniavskii@mui/x-date-pickers@v6.0.0-alpha.6 / @mui/x-date-pickers-pro@v6.0.0-alpha.6MobileDatePicker and DatePicker based on DateField (#6690) @flaviendelangleStaticDatePicker component (#6708) @flaviendelangleinputFormat prop to format on the new pickers (#6722) @flaviendelangletypescript:ci failures (#6705) @LukasTy…names with Private prefix in order to avoid breaking changes in v5. These components were renamed:
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
@mui/x-data-grid@v6.0.0-alpha.5 / @mui/x-data-grid-pro@v6.0.0-alpha.5 / @mui/x-data-grid-premium@v6.0.0-alpha.5Stop exporting gridColumnsSelector (#6693) @m4theushw
The gridColumnsSelector was deprecated during v5 and is now removed from the export list.
Please consider using one of the following selectors as a replacement:
gridColumnFieldsSelector, to obtain the column fields in the order they appear on the screen;gridColumnLookupSelector, to access column definitions by field;gridColumnVisibilityModelSelector, for the visibility state of each column.setRows method not persisting new rows data after loading prop change (#6493) @cherniavskiiGridColumnsState['all'] to GridColumnsState['orderedFields'] (#6562) @DanailHReact.memo from GridCellCheckboxRenderer (#6655) @mattcornergridColumnsSelector (#6693)@mui/x-date-pickers@v6.0.0-alpha.5 / @mui/x-date-pickers-pro@v6.0.0-alpha.5[pickers] Rename remaining private components (#6550) @LukasTy
Previously we had 4 component names with Private prefix in order to avoid breaking changes in v5.
These components were renamed:
PrivatePickersMonth -> MuiPickersMonthPrivatePickersSlideTransition -> MuiPickersSlideTransitionPrivatePickersToolbarText -> MuiPickersToolbarTextPrivatePickersYear -> MuiPickersYearManual style overriding will need to use updated classes:
-.PrivatePickersMonth-root {
+.MuiPickersMonth-root {
-.PrivatePickersSlideTransition-root {
+.MuiPickersSlideTransition-root {
-.PrivatePickersToolbarText-root {
+.MuiPickersToolbarText-root {
-.PrivatePickersYear-root {
+.MuiPickersYear-root {
Component name changes are also reflected in themeAugmentation:
const theme = createTheme({
components: {
- PrivatePickersMonth: {
+ MuiPickersMonth: {
// overrides
},
- PrivatePickersSlideTransition: {
+ MuiPickersSlideTransition: {
// overrides
},
- PrivatePickersToolbarText: {
+ MuiPickersToolbarText: {
// overrides
},
- PrivatePickersYear: {
+ MuiPickersYear: {
// overrides
},
},
});
theme.rtl=true (#6636) @alexfauquetteprivate components (#6550) @LukasTyDesktopDatePicker based on DateField (#6548) @flaviendelangleno-response workflow (#6658) @cherniavskiiWe'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-data-grid@v6.0.0-alpha.4 / @mui/x-data-grid-pro@v6.0.0-alpha.4 / @mui/x-data-grid-premium@v6.0.0-alpha.4To avoid confusion with the props that will be added for the cell selection feature, some props related to row selection were renamed to have "row" in their name. The renamed props are the following:
| Old name | New name |
|---|---|
selectionModel |
rowSelectionModel |
onSelectionModelChange |
onRowSelectionModelChange |
disableSelectionOnClick |
disableRowSelectionOnClick |
disableMultipleSelection |
disableMultipleRowSelection |
The gridSelectionStateSelector selector was renamed to gridRowSelectionStateSelector.
The selectionChange event was renamed to rowSelectionChange.
searchPredicate prop to GridColumnsPanel component (#6557) @cherniavskiirowCount prop change (#5982) @cherniavskii@mui/x-date-pickers@v6.0.0-alpha.4 / @mui/x-date-pickers-pro@v6.0.0-alpha.4The ToolbarComponent has been replaced by a Toolbar component slot.
You can find more information about this pattern in the MUI Base documentation:
// Same on all other pickers
<DatePicker
- ToolbarComponent: MyToolbar,
+ components={{ Toolbar: MyToolbar }}
/>
The toolbarPlaceholder and toolbarFormat props have been moved to the toolbar components props slot:
// Same on all other pickers
<DatePicker
- toolbarPlaceholder="__"
- toolbarFormat="DD / MM / YYYY"
+ componentsProps={{
+ toolbar: {
+ toolbarPlaceholder: "__",
+ toolbarFormat: "DD / MM / YYYY",
+ }
+ }}
/>
The toolbarTitle prop has been moved to the localization object:
// Same on all other pickers
<DatePicker
- toolbarTitle="Title"
+ localeText={{ toolbarTitle: "Title" }}
/>
The toolbar related translation keys have been renamed to better fit their usage:
// Same on all other pickers
<DatePicker
localeText={{
- datePickerDefaultToolbarTitle: 'Date Picker',
+ datePickerToolbarTitle: 'Date Picker',
- timePickerDefaultToolbarTitle: 'Time Picker',
+ timePickerToolbarTitle: 'Time Picker',
- dateTimePickerDefaultToolbarTitle: 'Date Time Picker',
+ dateTimePickerToolbarTitle: 'Date Time Picker',
- dateRangePickerDefaultToolbarTitle: 'Date Range Picker',
+ dateRangePickerToolbarTitle: 'Date Range Picker',
}}
/>
The onChange / openView props on the toolbar have been renamed onViewChange / view
The hideTabs, dateRangeIcon, and timeIcon props have been moved to tabs component props:
// Same on all other Date Time picker variations
<DateTimePicker
- hideTabs={false}
- dateRangeIcon={<LightModeIcon />}
- timeIcon={<AcUnitIcon />}
+ componentsProps={{
+ tabs: {
+ hidden: false,
+ dateRangeIcon: <LightModeIcon />,
+ timeIcon: <AcUnitIcon />,
+ }
+ }}
/>
The onChange prop on DateTimePickerTabs component has been renamed to onViewChange to better fit its usage:
<DateTimePickerTabs
- onChange={() => {}}
+ onViewChange={() => {}}
/>
validationError property to the onChange callback (#6539) @flaviendelangleTabs component slot (#6543) @flaviendelangle@mui/material imports to @mui/utils (#6443) @LukasTydocsearch.js dependency (#6242) @oliviertassinari⚠️ These components are unstable. They might receive breaking changes on their props to have the best components possible by the time of the stable re…
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
⌚️ New components to edit date and time with <kbd>keyboard</kbd>—without using any modal or dropdown UI. Please check out our documentation to discover those new components.
DateField to edit dateTimeField to edit timeDateTimeField to edit date and timeMultiInputDateRangeField / SingleInputDateRangeField to edit date rangeMultiInputTimeRangeField to edit time range with two inputsMultiInputDateTimeRangeField to edit date and time range with two inputs⚠️ These components are unstable. They might receive breaking changes on their props to have the best components possible by the time of the stable release.
📝 Allow to limit to one filter per column for DataGridPro and DataGridPremium (#6333) @MBilalShafi
📚 New page describing the validation props on each picker (#6064) @flaviendelangle
📚 Documentation improvements
🐞 Bugfixes
@mui/x-data-grid@v6.0.0-alpha.3 / @mui/x-data-grid-pro@v6.0.0-alpha.3 / @mui/x-data-grid-premium@v6.0.0-alpha.3[DataGrid] Remove legacy editing API
The editing API that is enabled by default was replaced with a new API that contains better support for server-side persistence, validation and customization. This new editing feature was already available in v5 under the newEditingApi experimental flag. In v6, this flag can be removed.
<DataGrid
- experimentalFeatures={{ newEditingApi: true }}
/>
For users that didn't migrate to the new editing API in v5, additional work may be needed because the new API is not equivalent to the legacy API. Although, some migration steps are available to help in this task.
editCellPropsChange event was removed. If you still need it please file a new issue so we can propose an alternative.cellEditCommit event was removed and the processRowUpdate prop can be used in place. More information, check the docs section about the topic.editRowsModel and onEditRowsModelChange props were removed. The cellModesModel or rowModesModel props can be used to achieve the same goal.apiRef.current.stopCellEditMode to replace apiRef.current.commitCellChangeapiRef.current.startCellEditMode to replace apiRef.current.setCellMode(id, field, 'edit')apiRef.current.stopRowEditMode to replace apiRef.current.commitRowChangeapiRef.current.startRowMode to replace apiRef.current.setRowMode(id, 'edit')cellModesModel or rowModesModel props to replace apiRef.current.setEditRowsModeluseGridApiContext and useGridApiRef type overrides (#6423) @cherniavskii@mui/x-date-pickers@v6.0.0-alpha.3 / @mui/x-date-pickers-pro@v6.0.0-alpha.3All the props used by the mobile and desktop wrappers to override components or components' props have been replaced by component slots. You can find more information about this pattern in the MUI Base documentation.
Some of the names have also been prefixed by desktop when it was unclear that the behavior was only applied on the desktop version of the pickers (or the responsive version when used on a desktop).
The DialogProps prop has been replaced by a dialog component props slot on responsive and mobile pickers:
// Same on MobileDatePicker, DateTimePicker, MobileDateTimePicker,
// TimePicker, MobileTimePicker, DateRangePicker and MobileDateRangePicker.
<DatePicker
- DialogProps={{ backgroundColor: 'red' }}
+ componentsProps={{ dialog: { backgroundColor: 'red }}}
/>
The PaperProps prop has been replaced by a desktopPaper component props slot on all responsive and desktop pickers:
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
<DatePicker
- PaperProps={{ backgroundColor: 'red' }}
+ componentsProps={{ desktopPaper: { backgroundColor: 'red }}}
/>
The PopperProps prop has been replaced by a popper component props slot on all responsive and desktop pickers:
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
<DatePicker
- PopperProps={{ onClick: handleClick }}
+ componentsProps={{ popper: { onClick: handleClick }}}
/>
The TransitionComponent prop has been replaced by a DesktopTransition component slot on all responsive and desktop pickers:
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
<DatePicker
- TransitionComponent={Fade}
+ components={{ DesktopTransition: Fade }}
/>
The TrapFocusProps prop has been replaced by a desktopTrapFocus component props slot on all responsive and desktop pickers:
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
<DatePicker
- TrapFocusProps={{ isEnabled: () => false }}
+ componentsProps={{ desktopTrapFocus: { isEnabled: () => false }}}
/>
The view components allowing to pick a date or parts of a date without an input have been renamed to better fit their usage:
-<CalendarPicker {...props} />
+<DateCalendar {...props} />
-<DayPicker {...props} />
+<DayCalendar {...props} />
-<CalendarPickerSkeleton {...props} />
+<DayCalendarSkeleton {...props} />
-<MonthPicker {...props} />
+<MonthCalendar {...props} />
-<YearPicker {...props} />
+<YearCalendar {...props} />
Component names in the theme have changed as well:
-MuiCalendarPicker: {
+MuiDateCalendar: {
-MuiDayPicker: {
+MuiDayCalendar: {
-MuiCalendarPickerSkeleton: {
+MuiDayCalendarSkeleton: {
-MuiMonthPicker: {
+MuiMonthCalendar: {
-MuiYearPicker: {
+MuiYearCalendar: {
MultiInputDateTimeRangePicker and MultiInputTimeRangePicker (#6392) @alexfauquettePartial for components and componentsProps props (#6463) @flaviendelangleDateRangeCalendar (#6416) @flaviendelanglePicker prefix in the view component by Calendar (eg: MonthPicker => MonthCalendar) (#6389) @flaviendelangleXXXComponent and XXXProps (#6381) @flaviendelanglereact-text-mask package (#6408) @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@v6.0.0-alpha.2 / @mui/x-data-grid-pro@v6.0.0-alpha.2 / @mui/x-data-grid-premium@v6.0.0-alpha.2🎁 The aggregation is no longer experimental.
You can now use the aggregation without the experimentalFeatures.aggregation flag enabled.
<DataGridPremium
- experimentalFeatures={{ aggregation: true }}
/>
The aggregation of the columns through the column menu is now enabled by default on DataGridPremium. You can set disableAggregation={true} to disable it.
.MuiDataGrid-filterForm (#6313) @m4theushwvalueOptions (#6401) @DanailH@mui/x-date-pickers@v6.0.0-alpha.2 / @mui/x-date-pickers-pro@v6.0.0-alpha.2The renderDay prop has been replaced by a Day component slot.
You can find more information about this pattern in the MUI Base documentation.
// Same for any other date, date time or date range picker.
<DatePicker
- renderDay={(_, dayProps) => <CustomDay {...dayProps} />}
+ components={{ Day: CustomDay }}
/>
renderDay prop with a Day component slot (#6293) @flaviendelangleSelectorsDocs (#6103) @flaviendelangleReact.render with React.createRoot in e2e tests (#6393) @m4theushwWe'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@v6.0.0-alpha.1 / @mui/x-data-grid-pro@v6.0.0-alpha.1 / @mui/x-data-grid-premium@v6.0.0-alpha.1New internal rows structure for v6 (#4927) @flaviendelangle
Some selectors related to the rows have been renamed to better describe the type of rows they are returning:
-const result = gridRowsIdToIdLookupSelector(apiRef);
+const result = gridRowsDataRowIdToIdLookupSelector(apiRef);
-const result = gridRowTreeDepthSelector(apiRef);
+const result = gridRowMaximumTreeDepthSelector(apiRef);
The format of the tree nodes (the element accessible in params.node or with the apiRef.current.getRowNode method) have changed.
You have a new type property, which can be useful, for example, to apply custom behavior on groups.
Here is an example of the old and new approach showing how to apply a custom value formatter in groups for the grouping column:
<DataGridPremium
groupingColDef={() => ({
valueFormatter: (params) => {
if (params.id == null) {
return params.value;
}
const rowNode = apiRef.current.getRowNode(params.id!)!;
- if (rowNode.children?.length) {
+ if (rowNode.type === 'group') {
return `by ${rowNode.groupingKey ?? ''}`;
}
return params.value;
}
})}
/>
The GridFeatureModeConstant constant no longer exists (#6077) @DanailH
-import { GridFeatureModeConstant } from '@mui/x-data-grid';
GridPagination props typing (#6238) @cherniavskiiGridRow not forwarding ref to the root element (#6274) @cherniavskiiundefined value being showed in filter button tooltip text (#6259) @cherniavskiiprocessRowUpdate fails (#6185) @m4theushwthemeAugmentation module (#6270) @cherniavskii@mui/x-date-pickers@v6.0.0-alpha.1 / @mui/x-date-pickers-pro@v6.0.0-alpha.1[pickers] Do not support unparsed date formats anymore (#6170) @flaviendelangle
The value prop of the pickers now expects a parsed value.
Until now, it was possible to provide any format that your date management library was able to parse.
For instance, you could pass value={new Date()} when using AdapterDayjs.
This brought a lot of confusion so we decided to remove this behavior.
The format expected by the value prop is now the same as for any other prop holding a date.
Here is the syntax to initialize a date picker at the current date for each adapter:
// Date-fns
<DatePicker value={new Date()} />
// Dayjs
import dayjs from 'dayjs'
<DatePicker value={dayjs()} />
// Moment
import moment from 'moment'
<DatePicker value={moment()} />
// Luxon
import { DateTime } from 'luxon'
<DatePicker value={DateTime.now()} />
minDate and maxDate when opening a DatePicker or DateTimePicker (#6309) @alexfauquetteshouldDisableMonth and shouldDisableYear (#6266) @flaviendelangledisablePast and disableFuture validation props (#6226) @LukasTyautoFocus=false (#6304) @alexfauquetteexpandFormat and formatTokenMap (#6215) @alexfauquetteDateField component (#6048) @flaviendelangleAdapterLuxon (#6069) @alexfauquetteTimeField and DateTimeField (#6312) @flaviendelanglenext branch (#6275) @oliviertassinariuseField (#6311) @flaviendelangleGridFeatureModeConstant (#6077) @DanailHThe deprecated hide column property has been removed in favor of the columnVisibilityModel prop and initial state. (#5999) @flaviendelangle
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
localeText prop to all pickers to customize the translations (#6212) @flaviendelangle@mui/x-data-grid@v6.0.0-alpha.0 / @mui/x-data-grid-pro@v6.0.0-alpha.0 / @mui/x-data-grid-premium@v6.0.0-alpha.0The deprecated hide column property has been removed in favor of the columnVisibilityModel prop and initial state. (#5999) @flaviendelangle
<DataGrid
columns={[
field: 'id,
- hide: true,
]}
+ initialState={{
+ columns: {
+ columnVisibilityModel: { id: false },
+ }
+ }}
/>
You can find more information about this new API on our documentation.
The GridEvents enum is now a TypeScript type. (#6003) @flaviendelangle
-apiRef.current.subscribeEvent(GridEvents.rowClick', handleRowClick)
+apiRef.current.subscribeEvent('rowClick', handleRowClick)
cellFocusOut event if the row was removed (#6251) @cherniavskiiGridEvents enum (#6003) @flaviendelanglehide column property (#5999) @flaviendelangle@mui/x-date-pickers@v6.0.0-alpha.0 / @mui/x-date-pickers-pro@v6.0.0-alpha.0All the deprecated props that allowed you to set the text displayed in the pickers have been removed.
You can now use the localText prop available on all picker components:
| Removed prop | Property in the new localText prop |
|---|---|
endText |
end |
getClockLabelText |
clockLabelText |
getHoursClockNumberText |
hoursClockNumberText |
getMinutesClockNumberText |
minutesClockNumberText |
getSecondsClockNumberText |
secondsClockNumberText |
getViewSwitchingButtonText |
calendarViewSwitchingButtonAriaLabel |
leftArrowButtonText |
openPreviousView (or previousMonth when the button changes the visible month) |
rightArrowButtonText |
openNextView (or nextMonth when the button changes the visible month) |
startText |
start |
For instance if you want to replace the startText / endText
<DateRangePicker
- startText="From"
- endText="To"
+ localeText={{
+ start: 'From',
+ end: 'To',
+ }}
/>
You can find more information about the new api, including how to set those translations on all your components at once in the documentation
The component slots LeftArrowButton and RightArrowButton have been renamed PreviousIconButton and NextIconButton to better describe there usage:
<DatePicker
components={{
- LeftArrowButton: CustomButton,
+ PreviousIconButton: CustomButton,
- RightArrowButton: CustomButton,
+ NextIconButton: CustomButton,
}}
componentsProps={{
- leftArrowButton: {},
+ previousIconButton: {},
- rightArrowButton: {},
+ nextIconButton: {},
}}
/>
The date prop has been renamed value on MonthPicker / YearPicker, ClockPicker and CalendarPicker.
- <MonthPicker date={dayjs()} onChange={handleMonthChange} />
+ <MonthPicker value={dayjs()} onChange={handleMonthChange} />
- <YearPicker date={dayjs()} onChange={handleYearChange} />
+ <YearPicker value={dayjs()} onChange={handleYearChange} />
- <ClockPicker date={dayjs()} onChange={handleTimeChange} />
+ <ClockPicker value={dayjs()} onChange={handleTimeChange} />
- <CalendarPicker date={dayjs()} onChange={handleDateChange} />
+ <CalendarPicker value={dayjs()} onChange={handleDateChange} />
props.date contains a disabled date (#6146) @flaviendelanglelocaleText prop to all pickers to customize the translations (#6212) @flaviendelangleLocalizationProvider (#6011) @flaviendelanglePickersArrowSwitcher component (#5890) @flaviendelangleDateField day (#6071) @alexfauquettevalueStr from the field state (#6142) @flaviendelangledate prop value on MonthPicker / YearPicker, ClockPicker and CalendarPicker (#6128) @flaviendelangleonClose prop of PickersPopper onDismiss to simplify typing (#6155) @flaviendelanglesx prop on all public component with a root HTML elements (#5944) @flaviendelanglePickersMonth and PickersYear behaviors (#6034) @flaviendelangleshouldDisableMonth and shouldDisableYear for date validation (#6066) @flaviendelangleautoFocus=false (#6224) @alexfauquettepackage.json (#6172) @oliviertassinarigenerateUtilityClass from @mui/utils (#6216) @michaldudakv5.17.3 changelog to next branch (#6250) @flaviendelangleREADME (#6073) @oliviertassinarinext in NPM (#6256) @m4theushwnext branch for Prettier (#6097) @flaviendelangle@mui/monorepo instead of a fork (#6189) @oliviertassinariNothing published for this version
Nothing published for this version
Nothing published for this version
Your coding agent can read these notes before it upgrades. Set up the MCP server →