@mui/x-date-pickers-pro - npm Package Versions

8.0.0-alpha.13

Feb 28, 2025

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

• 📊 Decouple margin and axis-size. A new API to support multiple axes (#16418) @JCQuintas
• 🗺️ Added Bangla (bn-BD) locale
• 🗺️ Improve Russian (ru-RU) and Hungarian (hu-HU) locale on the Data Grid

Special thanks go out to the community members for their contributions: @denpiligrim, @lhilgert9, @noherczeg, @officialkidmax, @pcorpet. Following are all team members who have contributed to this release: @alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @MBilalShafi, @oliviertassinari, @romgrk.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid

Breaking changes

• The slots.baseFormControl component was removed.

• The "Reset" button in the column visibility panel now resets to the initial column visibility model. Previously it was reset to the model that was active at the time the panel was opened. The reset behavior follows these rules:

  1. If an initial columnVisibilityModel is provided, it resets to that model.
  2. If a controlled columnVisibilityModel is provided, it resets to the first model value.
  3. When the columns are updated (via the columns prop or updateColumns() API method), the reset reference point updates to the current columnVisibilityModel.

  To revert to the previous behavior, provide a custom component to the slots.columnsManagement.

• The deprecated LicenseInfo export has been removed from the @mui/x-data-grid-pro and @mui/x-data-grid-premium packages. You have to import it from @mui/x-license instead:

  - import { LicenseInfo } from '@mui/x-data-grid-pro';
  - import { LicenseInfo } from '@mui/x-data-grid-premium';
  + import { LicenseInfo } from '@mui/x-license';
  
   LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');
  

• The row selection model has been changed from GridRowId[] to { type: 'include' | 'exclude'; ids: Set<GridRowId> }. Using Set allows for a more efficient row selection management. The exclude selection type allows to select all rows except the ones in the ids set.

  This change impacts the following props:

  • rowSelectionModel
  • onRowSelectionModelChange
  • initialState.rowSelectionModel

  - const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>([]);
  + const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>({ type: 'include', ids: new Set() });
  

  This change also impacts the gridRowSelectionStateSelector selector. For convenience, use the gridRowSelectionManagerSelector selector to handle both selection types:

  - const rowSelection = gridRowSelectionStateSelector(apiRef);
  - const isRowSelected = rowSelection.includes(rowId);
  + const rowSelectionManager = gridRowSelectionManagerSelector(apiRef);
  + const isRowSelected = rowSelectionManager.has(rowId);
  

  There is also a createRowSelectionManager utility function that can be used to manage the row selection:

  const rowSelectionManager = createRowSelectionManager({
    type: 'include',
    ids: new Set(),
  });
  rowSelectionManager.select(rowId);
  rowSelectionManager.unselect(rowId);
  rowSelectionManager.has(rowId);
  

• The selectedIdsLookupSelector selector has been removed. Use the gridRowSelectionManagerSelector or gridRowSelectionStateSelector selectors instead.

• The selectedGridRowsSelector has been renamed to gridRowSelectionIdsSelector.

• The selectedGridRowsCountSelector has been renamed to gridRowSelectionCountSelector.

• The data source feature and its related props are now stable.

   <DataGridPro
  -  unstable_dataSource={dataSource}
  -  unstable_dataSourceCache={cache}
  -  unstable_lazyLoading
  -  unstable_lazyLoadingRequestThrottleMs={100}
  +  dataSource={dataSource}
  +  dataSourceCache={cache}
  +  lazyLoading
  +  lazyLoadingRequestThrottleMs={100}
   />
  

• The data source API is now stable.

  - apiRef.current.unstable_dataSource.getRows()
  + apiRef.current.dataSource.getRows()
  

• The signature of unstable_onDataSourceError() has been updated to support future use-cases.

   <DataGrid
  -  unstable_onDataSourceError={(error: Error, params: GridGetRowsParams) => {
  -    if (params.filterModel) {
  -      // do something
  -    }
  -  }}
  +  unstable_onDataSourceError={(error: GridGetRowsError | GridUpdateRowError) => {
  +    if (error instanceof GridGetRowsError && error.params.filterModel) {
  +      // do something
  +    }
  +  }}
   />
  

• Fix the type of the GridSortModel to allow readonly arrays.

• GridSortItem interface is not exported anymore.

• The showToolbar prop is now required to display the toolbar.

  It is no longer necessary to pass GridToolbar as a slot to display the default toolbar.

   <DataGrid
  +  showToolbar
  -  slots={{
  -    toolbar: GridToolbar,
  -  }}
   />
  

8.0.0-alpha.12

Feb 17, 2025

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

• 📦 Data Grid data source is now available in the Community plan
• ⚡ Improve Data Grid Excel export serialization performance
• 🚫 Add "No columns" overlay to Data Grid
• 🌍 Improve Polish (pl-PL) and Ukrainian (uk-UA) locales on the Data Grid
• 🐞 Bugfixes

Special thanks go out to the community contributors who have helped make this release possible: @Neonin, @nusr, and @pawelkula. Following are all team members who have contributed to this release: @alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @romgrk, and @mapache-salvaje.

Data Grid

Breaking changes

• The main--hasSkeletonLoadingOverlay class has been renamed to main--hiddenContent and is now also applied when the "No columns" overlay is displayed.

• The apiRef.current.forceUpdate() method was removed. Use selectors combined with useGridSelector() hook to react to changes in the state.

• The selectors signature has been updated. They are only accepting apiRef as a first argument and instanceId is no longer the third argument.

  -mySelector(state, arguments, instanceId)
  +mySelector(apiRef, arguments)
  

8.0.0-alpha.11

Feb 7, 2025

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

• ⚡ Mount and resize performance improvements for the Data Grid

Special thanks go out to the community contributors who have helped make this release possible: @lauri865. Following are all team members who have contributed to this release: @alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @romgrk.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid

Breaking changes

• createUseGridApiEventHandler() is not exported anymore.

• The filteredRowsLookup object of the filter state does not contain true values anymore. If the row is filtered out, the value is false. Otherwise, the row id is not present in the object. This change only impacts you if you relied on filteredRowsLookup to get ids of filtered rows. In this case,use gridDataRowIdsSelector selector to get row ids and check filteredRowsLookup for false values:

   const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
  -const filteredRowIds = Object.keys(filteredRowsLookup).filter((rowId) => filteredRowsLookup[rowId] === true);
  +const rowIds = gridDataRowIdsSelector(apiRef);
  +const filteredRowIds = rowIds.filter((rowId) => filteredRowsLookup[rowId] !== false);
  

• The visibleRowsLookup state does not contain true values anymore. If the row is not visible, the value is false. Otherwise, the row id is not present in the object:

   const visibleRowsLookup = gridVisibleRowsLookupSelector(apiRef);
  -const isRowVisible = visibleRowsLookup[rowId] === true;
  +const isRowVisible = visibleRowsLookup[rowId] !== false;
  

8.0.0-alpha.10

Jan 30, 2025

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

• 🎨 Data Grid theming improvements and default background color
• 📚 Documentation improvements
• 🐞 Bugfixes

Special thanks go out to the community contributors who have helped make this release possible: @k-rajat19, @lauri865, @mateuseap. Following are all team members who have contributed to this release: @alexfauquette, @flaviendelangle, @JCQuintas, @KenanYusuf, @MBilalShafi, @romgrk, @arminmeh.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid

Breaking changes

• viewportInnerSize.width now includes pinned columns' widths (fixes recursive loops in updating dimensions <-> columns)

• The Data Grid now has a default background color, and its customization has moved from theme.mixins.MuiDataGrid to theme.palette.DataGrid with the following properties:

  • bg: Sets the background color of the entire grid (new property)
  • headerBg: Sets the background color of the header (previously named containerBackground)
  • pinnedBg: Sets the background color of pinned rows and columns (previously named pinnedBackground)

   const theme = createTheme({
  -  mixins: {
  -    MuiDataGrid: {
  -      containerBackground: '#f8fafc',
  -      pinnedBackground: '#f1f5f9',
  -    },
  -  },
  +  palette: {
  +    DataGrid: {
  +      bg: '#f8fafc',
  +      headerBg: '#e2e8f0',
  +      pinnedBg: '#f1f5f9',
  +    },
  +  },
   });
  

• The detailPanels, pinnedColumns, and pinnedRowsRenderZone classes have been removed.

• Return type of the useGridApiRef() hook and the type of apiRef prop are updated to explicitly include the possibilty of null. In addition to this, useGridApiRef() returns a reference that is initialized with null instead of {}.

  Only the initial value and the type are updated. Logic that initializes the API and its availability remained the same, which means that if you could access API in a particular line of your code before, you are able to access it as well after this change.

  Depending on the context in which the API is being used, you can decide what is the best way to deal with null value. Some options are:

  • Use optional chaining
  • Use non-null assertion operator if you are sure your code is always executed when the apiRef is not null
  • Return early if apiRef is null
  • Throw an error if apiRef is null

7.25.0

Jan 31, 2025

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

• 🐞 Bugfixes

Special thanks go out to the community contributors who have helped make this release possible: @k-rajat19, @lauri865. Following are all team members who have contributed to this release: @KenanYusuf, @MBilalShafi, @arminmeh.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid

8.0.0-alpha.9

Jan 24, 2025

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

• 🌍 Improve Persian (fa-IR) and Urdu (ur-PK) locales on the Data Grid
• 📚 Documentation improvements
• 🐞 Bugfixes

Special thanks go out to the community contributors who have helped make this release possible: @AxharKhan, @lauri865, @mapache-salvaje, @mostafaRoosta74.

Following are all team members who have contributed to this release: @alexfauquette, @cherniavskii, @Janpot, @JCQuintas, @LukasTy, @arminmeh.

Data Grid

7.24.1

Jan 24, 2025

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

• 🐞 Bugfixes
• 🌍 Improve Persian (fa-IR) locale on the Data Grid

Special thanks go out to the community contributors who have helped make this release possible: @mostafaRoosta74, @lauri865.

Following are all team members who have contributed to this release: @alexfauquette, @JCQuintas, @cherniavskii, @LukasTy, @arminmeh.

Data Grid