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

latest releases: 7.18.0, 7.17.0, 7.16.0...
20 months ago

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.

  • ✨ Merge page and pageSize props into paginationModel
  • 🚀 Replace old masked picker components with field based ones
  • 🌍 Improve Swedish (sv-SE) and Italian (it-IT) locales
  • 📚 Documentation improvements
  • 🐞 Bug fixes

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

Breaking changes

  • The 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.

    • GridEditSingleSelectCell
    • GridFilterInputSingleSelect
    • GridFilterInputMultipleSingleSelect

  • The 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 gridExpandedSortedRowIdsSelector
    • gridVisibleSortedRowEntriesSelector renamed to gridExpandedSortedRowEntriesSelector
    • gridVisibleRowCountSelector renamed to gridExpandedRowCountSelector
    • gridVisibleSortedTopLevelRowEntriesSelector renamed to gridFilteredSortedTopLevelRowEntriesSelector
    • gridVisibleTopLevelRowCountSelector renamed to gridFilteredTopLevelRowCountSelector

  • The apiRef.current.getVisibleRowModels method was removed. Use the gridVisibleSortedRowEntriesSelector selector instead.

  • The GridRowScrollEndParams["virtualRowsCount"] parameter was renamed to GridRowScrollEndParams["visibleRowsCount"].

Changes

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

Breaking changes

  • The 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';

Changes

@mui/x-codemod@v6.0.0-beta.0

Changes

Docs

Core

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

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

NewReleases is sending notifications on new releases.

Get notifications