npm @mui/x-data-grid-pro 6.0.0-alpha.11
v6.0.0-alpha.11

latest releases: 7.22.1, 7.22.0, 7.21.0...
23 months ago

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

  • 🚀 Add dragging support for the new Date Range Picker (NextDateRangePicker) (#6763) @LukasTy
  • ⚡️ Improve performance of the day view (#7066) @flaviendelangle
  • ✨ Fix lazy-loading feature not working in DataGridPremium (#7124) @m4theushw
  • 🐞 Bugfixes

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

Breaking changes

  • The filterPanelOperators translation key was renamed to filterPanelOperator (#7062) @MBilalShafi
  • The components.Header slot was removed. Use components.Toolbar slot instead (#6999) @cherniavskii

Changes

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

Breaking changes

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

Changes

Docs

Core

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

NewReleases is sending notifications on new releases.