npm @mui/x-data-grid-pro 6.0.0-alpha.0
v6.0.0-alpha.0
on Node.js NPM

latest releases: 7.19.0, 7.18.0, 7.17.0...
2 years ago

We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:

  • 🌍 Add a localeText prop to all pickers to customize the translations (#6212) @flaviendelangle
  • 🌍 Add Finnish (fi-FI) locale to the pickers (#6219) @PetroSilenius
  • 🌍 Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
  • 📚 Documentation improvements
  • 🐞 Bugfixes

@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.0

Breaking changes

  • 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)

Changes

@mui/x-date-pickers@v6.0.0-alpha.0 / @mui/x-date-pickers-pro@v6.0.0-alpha.0

Breaking changes

  • 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} />

Changes

Docs

Core

Check out latest releases or
releases around @mui/x-data-grid-pro 6.0.0-alpha.0

Don't miss a new x-data-grid-pro release

NewReleases is sending notifications on new releases.

Get notifications