@mui/x-license-pro
Advanced tools
Changelog
7.0.0-beta.0
Jan 26, 2024
We are glad to announce MUI X v7 beta! This version has several improvements, bug fixes, and exciting features 🎉. We want to offer a big thanks to the 7 contributors who made this release possible ✨:
🚀 Release the Date Time Range Picker component (#9528) @LukasTy
<img src="https://github.com/mui/mui-x/assets/4941090/122bb7bc-5e72-4e11-a8e5-96f3026de922" width="510" height="652" alt="Date Time Range Picker example" />🎁 New column management panel design for the Data Grid (#11770) @MBilalShafi
<img width="310" alt="image" src="https://github.com/mui/mui-x/assets/12609561/a79dac8b-d54d-4e69-a63a-ef78f3993f37">🐞 Bugfixes
📚 Documentation improvements
The columns management component has been redesigned and the component was extracted from the ColumnsPanel
which now only serves as a wrapper to display the component above the headers as a panel. As a result, a new slot columnsManagement
and the related prop slotProps.columnsManagement
have been introduced. The props corresponding to the columns management component which were previously passed to the prop slotProps.columnsPanel
should now be passed to slotProps.columnsManagement
. slotProps.columnsPanel
could still be used to override props corresponding to the Panel
component used in ColumnsPanel
which uses Popper
component under the hood.
<DataGrid
slotProps={{
- columnsPanel: {
+ columnsManagement: {
sort: 'asc',
autoFocusSearchField: false,
},
}}
/>
Show all
and Hide all
buttons in the ColumnsPanel
have been combined into one Show/Hide All
toggle in the new columns management component. The related props disableShowAllButton
and disableHideAllButton
have been replaced with a new prop disableShowHideToggle
.
<DataGrid
- disableShowAllButton
- disableHideAllButton
+ disableShowHideToggle
/>
Changelog
7.0.0-alpha.9
Jan 19, 2024
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
SimpleTreeView
customization examples (#11424) @noraleonte@mui/material
peer dependency for all packages (#11692) @LukasTy
The minimum required version of @mui/material
is now 5.15.0
.The ariaV7
experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default.
If you were using the ariaV7
flag, you can remove it from the experimentalFeatures
prop:
-<DataGrid experimentalFeatures={{ ariaV7: true }} />
+<DataGrid />
The most notable changes that might affect your application or tests are:
The role="grid"
attribute along with related ARIA attributes are now applied to the inner div
element instead of the root div
element:
-<div class="MuiDataGrid-root" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false">
+<div class="MuiDataGrid-root">
<div class="MuiDataGrid-toolbarContainer"></div>
- <div class="MuiDataGrid-main"></div>
+ <div class="MuiDataGrid-main" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false"></div>
<div class="MuiDataGrid-footerContainer"></div>
</div>
When the Tree data feature is used, the grid role is now role="treegrid"
instead of role="grid"
.
The Data Grid cells now have role="gridcell"
instead of role="cell"
.
The buttons in toolbar composable components GridToolbarColumnsButton
, GridToolbarFilterButton
, GridToolbarDensity
, and GridToolbarExport
are now wrapped with a tooltip component and have a consistent interface. To override some props corresponding to the toolbar buttons or their corresponding tooltips, you can use the slotProps
prop. Following is an example diff. See Toolbar section for more details.
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton
- title="Custom filter" // 🛑 This was previously forwarded to the tooltip component
+ slotProps={{ tooltip: { title: 'Custom filter' } }} // ✅ This is the correct way now
/>
<GridToolbarDensitySelector
- variant="outlined" // 🛑 This was previously forwarded to the button component
+ slotProps={{ button: { variant: 'outlined' } }} // ✅ This is the correct way now
/>
</GridToolbarContainer>
);
}
Column grouping is now enabled by default. The flag columnGrouping
is no longer needed to be passed to the experimentalFeatures
prop to enable it.
-<DataGrid experimentalFeatures={{ columnGrouping: true }} />
+<DataGrid />
The column grouping API methods getColumnGroupPath
and getAllGroupDetails
are no longer prefixed with unstable_
.
The column grouping selectors gridFocusColumnGroupHeaderSelector
and gridTabIndexColumnGroupHeaderSelector
are no longer prefixed with unstable_
.
The disabled column specific features like hiding
, sorting
, filtering
, pinning
, row grouping
, etc could now be controlled programmatically using initialState
, respective controlled models, or the API object. See the related docs section.
Changelog
7.0.0-alpha.8
Jan 11, 2024
We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
AdapterDateFnsV3
.
// with date-fns v2.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import de from 'date-fns/locale/de';
// with date-fns v3.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
import { de } from 'date-fns/locale/de';
The import path for locales has been changed:
-import { enUS } from '@mui/x-data-grid';
+import { enUS } from '@mui/x-data-grid/locales';
-import { enUS } from '@mui/x-data-grid-pro';
+import { enUS } from '@mui/x-data-grid-pro/locales';
-import { enUS } from '@mui/x-data-grid-premium';
+import { enUS } from '@mui/x-data-grid-premium/locales';
Changelog
7.0.0-alpha.1
Nov 17, 2023
We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨: