MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
Published by m4theushw about 2 years ago
We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
GridPagination
props typing (#6295) @cherniavskiiGridRow
not forwarding ref
to the root element (#6303) @cherniavskiiundefined
value being showed in filter button tooltip text (#6271) @cherniavskiiprocessRowUpdate
fails (#6319) @m4theushwthemeAugmentation
module (#6316) @cherniavskiiPublished by m4theushw about 2 years ago
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
New 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/[email protected]
/ @mui/[email protected]
[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) @DanailHPublished by flaviendelangle about 2 years ago
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/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
The 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/[email protected]
/ @mui/[email protected]
All 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) @oliviertassinariPublished by flaviendelangle about 2 years ago
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
cellFocusOut
event if the row was removed (#6251) @cherniavskii@mui/[email protected]
/ @mui/[email protected]
autoFocus=false
(#6224) @alexfauquette@mui/monorepo
instead of a fork (#6189) @oliviertassinariPublished by m4theushw about 2 years ago
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
@mui/[email protected]
/ @mui/[email protected]
@mui/x-date-pickers
theme augmentation and style overriding (#6156) @LukasTy@mui/x-date-pickers-pro
theme augmentation (#6096) @LukasTyPublished by flaviendelangle about 2 years ago
This release will the last regular release for our v5
packages.
From now on, we'll be focusing on developing MUI X v6.
You can check the roadmap for more details on what's coming next.
And if you'd like to help, please consider volunteering to give us a user interview.
We'd love to know more about your use cases, pain points and expectations for the future.
The v5
packages will only get new versions to patch critical bug fixes.
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
@mui/[email protected]
/ @mui/[email protected]
sx
prop to the equality check of PickersDay
(#6030) @TheUnlockedopenTo
is invalid based on available views
(#6042) @LukasTyyarn release:tag
script (#5169) @DanailHPublished by DanailH about 2 years ago
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
Published by DanailH about 2 years ago
π We are excited to finally introduce a stable release (v5.0.0) for the @mui/x-date-pickers
and @mui/x-date-pickers-pro
packages!
If you are still using picker components from the lab
, take a look at the migration guide.
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights β¨:
π Implement Lazy loading (#5214) @DanailH
Pro users now can try the experimental lazy loading feature.
In a few steps, you can load your data on demand, as the rows are displayed.
To enable this feature, add experimentalFeatures={{ lazyLoading: true }}
.
Lazy Loading requires a few other settings.
See the documentation to explore the example in detail.
π Improve pickers
focus management (#5820) @alexfauquette
π Enable disabling day
on date range picker depending on position
(#5773) @alexfauquette
β¨ Various improvements
π Documentation improvements
π Bugfixes
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
sort
prop to columns panel slot (#5888) @gavbrennanfieldToFocus
cannot be found (#5871) @cherniavskiigetRowId
in the replaceRows
method (#5988) @flaviendelanglepinnedRows
+ getRowClassName
props and rows=[]
(#5851) @cherniavskiigroupingValueGetter
changes (#5919) @flaviendelangle@mui/[email protected]
/ @mui/[email protected]
day
depending on position
(#5773) @alexfauquettetabs
component slot (#5972) @LukasTydate-fns
elements in field components (#5975) @flaviendelangledate-fns
in @mui/x-date-pickers-pro
(#5941) @flaviendelangleuseField
(#5901) @flaviendelanglecommunity
package themeAugmentation
in pro
package types (#5969) @LukasTyDateRangeField
into SingleInputDateRangeField
(#5961) @flaviendelangleisSameError
on field components (#5984) @flaviendelangledescription
and default
to pickers slots (#5893) @alexfauquetteonYearPicker
to onYearChange
(#5954) @alexfauquetteGridCellParams
's value
description (#5849) @cherniavskiiREADME.md
to match Introduction section of the docs (#5754) @samuelsycamoreuserEvent.mousePress
instead of fireClickEvent
(#5920) @cherniavskiiPublished by cherniavskii about 2 years ago
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights β¨:
π Introduce column grouping for data grid (#5133) @alexfauquette
You can now group columns using the columnGroupingModel
prop. This lets you to display more structured data.
To enable this feature, add experimentalFeatures={{ columnGrouping: true }}
.
The grouping header can be fully customized.
See the documentation to explore everything it has to offer.
π Bugfixes
π New locales for pickers thanks to @tesseractjh and @drastus
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
disableVirtualization
prop change (#5889) @cherniavskiiGridRowModel
typing (#5734) @cherniavskiiGridColDef
hide
property (#5886) @cherniavskii@mui/[email protected]
/ @mui/[email protected]
className
prop provided on DatePicker to renderInput
(#5471) @CruseCtrla11y
support (#5809) @LukasTyPaperContent
component slot (#5801) @LukasTylocaleText
(#5143) @alexfauquetteminDate
/ maxDate
when null
value is passed (#5397) @flaviendelanglemigration from lab
(#5277) @chuckwireddayjs
instead of date-fns
in doc examples (#5481) @flaviendelanglecolumns
in useDemoData
hook (#5848) @cherniavskiiPublished by m4theushw about 2 years ago
We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
GridOverlays
bypassing pointer events (#5674) @philjones88@mui/[email protected]
/ @mui/[email protected]
PickersActionBarProps
with DialogActionProps
(#5798) @LukasTylogLevel
prop to false (#5784) @HwangTaehyunInputBase
for pickers inputs (#5597) @cherniavskiiPublished by LukasTy about 2 years ago
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
@mui/[email protected]
/ @mui/[email protected]
react-dom
to peerDependencies (#5752) @cherniavskiinone
(#5758) @LukasTydisableHighlightToday
on MonthPicker
and YearPicker
(#5562) @flaviendelanglematchMedia
is unavailable (#5684) @LukasTyonChange
when clearing or accepting Invalid date
(#5740) @LukasTyGridExportStateParams
page (#5654) @oliviertassinariFUNDING.yml
file (#5656) @oliviertassinariPublished by cherniavskii about 2 years ago
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights β¨:
apiRef
(#5273) @flaviendelangle@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
initialOpen
prop to GridEditSingleSelectCell
to allow overriding initial open state (#5645) @shapaaaref
to root element in GridEditInputCell
(#5631) @ZenooGridToolbar
(#5503) @cherniavskii@mui/[email protected]
/ @mui/[email protected]
maxDateTime
prop (#5639) @jurecuhalevdate-fns
dependency when opening Codesandbox demo (#5692) @cherniavskiiGRID_EXPERIMENTAL_ENABLED
env variable (#5669) @ar7casperPublished by alexfauquette about 2 years ago
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights β¨:
π Introduce aggregation (#5592) @flaviendelangle
Premium users can now aggregate data in the grid.
Extract information like sum, average, count, and others with a couple of clicks.
To enable this feature, add experimentalFeatures={{ aggregation: true }}
.
Aggregation functions are customizable and they combine well with row grouping.
See the documentation to explore everything it has to offer.
π Introduce row pinning (#4863) @cherniavskii
Pro users can now pin rows on top or bottom of the grid.
To do so, enable the feature with experimentalFeatures={{ rowPinning: true }}
and provide the pinned rows data to the pinnedRows
prop.
For more details, see the documentation.
π Add simplified Chinese (zh-CN) locale to pickers (#5584) @gamecss
π Documentation improvements
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
@mui/[email protected]
/ @mui/[email protected]
valueParser
(#5450) @alexfauquettePublished by DanailH over 2 years ago
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights β¨:
GridBooleanCell
component from data grid (#5537) @cliedeman@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
GridPreProcessEditCellProps
(#5510) @YunosukeYGridBooleanCell
component (#5537) @cliedemandate
/dateTime
edit input font size to match view mode (#5304) @cherniavskii@mui/[email protected]
/ @mui/[email protected]
apiRef
(#5273) @flaviendelangleisPrintableKey
(#5458) @mnajdovaPublished by m4theushw over 2 years ago
We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
@mui/[email protected]
/ @mui/[email protected]
Published by flaviendelangle over 2 years ago
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
loading
prop changes (#5213) @flaviendelangleapi
prop in the grid components (#5205) @flaviendelangleDataGridPremium
(#5264) @flaviendelangle@mui/[email protected]
/ @mui/[email protected]
@mui/x-date-pickers
and @mui/x-date-pickers-pro
(#5204) @flaviendelangleDataGridPremium
to all API sections (#5196) @flaviendelangleDateRangePicker
documentation (#5259) @flaviendelangleGridFilterInputMultipleSingleSelect
(#5206) @flaviendelangleinputFormat
when testing with different date adapters (#5291) @cherniavskiiResizeObserver
(#5215) @m4theushwPublished by flaviendelangle over 2 years ago
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights β¨:
π @mui/x-date-pickers
and @mui/x-date-pickers-pro
are now in beta!
β¨ Allow detail panel's height to match its content (#5163) @m4theushw
<DataGridPro getDetailPanelHeight={() => 'auto'} />
π Add Romanian (ro-RO) locale on the data grid (#5345) @rolule
π Documentation improvements
π Bugfixes
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
autoHeight
and scroll x (#5401) @flaviendelangle@mui/[email protected]
/ @mui/[email protected]
useKeepGroupedColumnsHiddren
from the grid package on remaining demo (#5382) @flaviendelanglePublished by alexfauquette over 2 years ago
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights β¨:
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
autoHeight
is enabled (#5164) @m4theushwgetRowId
doc section (#5156) @flaviendelangleuseGridDimensions
on DataGridProColumnHeaders
(#5201) @flaviendelangleGridColTypeDef
type (#5167) @cherniavskiiGridColTypeDef
usage in demo (#5197) @cherniavskiiwaitFor
before asserting height (#5203) @m4theushwPublished by DanailH over 2 years ago
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights β¨:
reason
to onFilterModelChange
(#4938) @m4theushw@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
reason
to onFilterModelChange
(#4938) @m4theushwgetRowId
in row reordering (#5093) @flaviendelangle@mui/[email protected]
/ @mui/[email protected]
maxDate
/ minDate
/ disableFuture
and disablePast
(#5081) @flaviendelangleinputFormat
(#5060) @alexfauquetteshouldDisableDate
in range pickers (#5123) @flaviendelanglelocalText
for remaining texts (#4986) @alexfauquette301
link to render cell (#5106) @oliviertassinariapiRef
type in row reorder pre processors #5125 @DanailHGridEvents
in technical doc (#5157) @flaviendelanglePublished by cherniavskii over 2 years ago
We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights β¨:
π Introduce support for dynamic row height (#4859) @m4theushw
β οΈ Remove deprecated row grouping feature from @mui/x-data-grid-pro
Row grouping is available through the @mui/x-data-grid-premium
package - see Premium plan release blogpost.
π Bug fixes and improvements
@mui/[email protected]
/ @mui/[email protected]
/ @mui/[email protected]
onMenuOpen
and onMenuClose
props (#4825) @DanailHGridActionsColDef
to match GridColDef
(#4982) @subvertallchrissetRowIndex
when dragging a column over a row (#4987) @flaviendelangle@mui/[email protected]
/ @mui/[email protected]
[pickers] Restructure props in MonthPicker
/ YearPicker
and DayPicker
(#4814) @flaviendelangle
The props of MonthPicker
/ YearPicker
and DayPicker
have been reworked to make them more consistent for a standalone usage (#4814) @flaviendelangle
MonthPicker: The prop onMonthChange
has been removed, you can use onChange
instead since every change is a month change
YearPicker: The prop onYearPicker
has been removed, you can use onChange
instead since every change is a year change
DayPicker: The prop isDateDisabled
has been removed, you can now use the same validation props as for the other components (maxDate
, minDate
, shouldDisableDate
, disableFuture
and disablePast
)
renderCell
(#4254) @alexfauquette