github mui/mui-x v7.0.0-alpha.9
on GitHub

latest releases: v8.0.0-alpha.0, v7.22.2, v7.22.1...
pre-release10 months ago

7.0.0-alpha.9

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

  • 🎁 The Data Grid headers have been refactored to bring immense improvements to scrolling, state management, and overall performance of the grid.
  • ⚙️ The Data Grid disabled column-specific features like filtering, sorting, grouping, etc. could now be accessed programmatically. See the related docs section.
  • 🚀 Uplift the SimpleTreeView customization examples (#11424) @noraleonte
  • 🌍 Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11668) on the Data Grid @BCaspari
  • 🐞 Bugfixes
  • 💔 Bump @mui/material peer dependency for all packages (#11692) @LukasTy
    The minimum required version of @mui/material is now 5.15.0.

Data Grid

Breaking changes

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

@mui/x-data-grid@7.0.0-alpha.9

@mui/x-data-grid-pro@7.0.0-alpha.9 pro

Same changes as in @mui/x-data-grid@7.0.0-alpha.9, plus:

  • [DataGridPro] Allow non-pinnable columns to be pinned programmatically (#11680) @MBilalShafi

@mui/x-data-grid-premium@7.0.0-alpha.9 premium

Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.9, plus:

  • [DataGridPremium] Allow aggregation to be applied for non-aggregable columns (#11574) @MBilalShafi
  • [DataGridPremium] Allow programmatically grouping non-groupable columns (#11539) @MBilalShafi

Date Pickers

Breaking changes

  • The locales export has been removed from the root of the packages.
    If you were importing locales from the root, be sure to update it: 

    -import { frFR } from '@mui/x-date-pickers';
+import { frFR } from '@mui/x-date-pickers/locales';

@mui/x-date-pickers@7.0.0-alpha.9

@mui/x-date-pickers-pro@7.0.0-alpha.9 pro

Same changes as in @mui/x-date-pickers@7.0.0-alpha.9.

Charts / @mui/x-charts@7.0.0-alpha.9

Tree View

Breaking changes

  • The expandIcon / defaultExpandIcon props, used to expand the children of a node (rendered when it is collapsed),
    is now defined as a slot both on the Tree View and the Tree Item components.

    If you were using the ChevronRight icon from @mui/icons-material,
    you can stop passing it to your component because it is now the default value: 

    -import ChevronRightIcon from '@mui/icons-material/ChevronRight';

 <SimpleTreeView
-  defaultExpandIcon={<ChevronRightIcon />}
 >
   {items}
 </SimpleTreeView>

    If you were passing another icon to your Tree View component,
    you need to use the new expandIcon slot on this component: 

     <SimpleTreeView
-  defaultExpandIcon={<MyCustomExpandIcon />}
+  slots={{ expandIcon: MyCustomExpandIcon }}
 >
   {items}
 </SimpleTreeView>

    If you were passing another icon to your Tree Item component,
    you need to use the new expandIcon slot on this component: 

      <SimpleTreeView>
    <TreeItem
      nodeId="1"
      label="Node 1"
-     expandIcon={<MyCustomExpandIcon />}
+     slots={{ expandIcon: MyCustomExpandIcon }}
    />
  </SimpleTreeView>

  • The collapseIcon / defaultCollapseIcon props, used to collapse the children of a node (rendered when it is expanded),
    is now defined as a slot both on the Tree View and the Tree Item components.

    If you were using the ExpandMore icon from @mui/icons-material,
    you can stop passing it to your component because it is now the default value: 

    - import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

  <SimpleTreeView
-   defaultCollapseIcon={<ExpandMoreIcon />}
  >
    {items}
  </SimpleTreeView>

    If you were passing another icon to your Tree View component,
    you need to use the new collapseIcon slot on this component: 

      <SimpleTreeView
-   defaultCollapseIcon={<MyCustomCollapseIcon />}
+   slots={{ collapseIcon: MyCustomCollapseIcon }}
  >
    {items}
  </SimpleTreeView>

    If you were passing another icon to your Tree Item component,
    you need to use the new collapseIcon slot on this component: 

      <SimpleTreeView>
    <TreeItem
      nodeId="1"
      label="Node 1"
-     collapseIcon={<MyCustomCollapseIcon />}
+     slots={{ collapseIcon: MyCustomCollapseIcon }}
    />
  </SimpleTreeView>

  • The useTreeItem hook has been renamed useTreeItemState.
    This will help create a new headless version of the TreeItem component based on a future useTreeItem hook. 

    -import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';
+import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem';

 const CustomContent = React.forwardRef((props, ref) => {
-  const { disabled } = useTreeItem(props.nodeId);
+  const { disabled } = useTreeItemState(props.nodeId);

   // Render some UI
 });

 function App() {
   return (
     <SimpleTreeView>
       <TreeItem ContentComponent={CustomContent} />
     </SimpleTreeView>
   )
 }

  • The parentIcon prop has been removed from the Tree View components.

    If you were passing an icon to your Tree View component,
    you can achieve the same behavior
    by passing the same icon to both the collapseIcon and the expandIcon slots on this component: 

      <SimpleTreeView
-   defaultParentIcon={<MyCustomParentIcon />}
+   slots={{ collapseIcon: MyCustomParentIcon, expandIcon: MyCustomParentIcon }}
  >
    {items}
  </SimpleTreeView>

  • The endIcon / defaultEndIcon props, rendered next to an item without children,
    is now defined as a slot both on the Tree View and the Tree Item components.

    If you were passing an icon to your Tree View component,
    you need to use the new endIcon slot on this component: 

      <SimpleTreeView
-   defaultEndIcon={<MyCustomEndIcon />}
+   slots={{ endIcon: MyCustomEndIcon }}
  >
    {items}
  </SimpleTreeView>

    If you were passing an icon to your Tree Item component,
    you need to use the new endIcon slot on this component: 

      <SimpleTreeView>
    <TreeItem
      nodeId="1"
      label="Node 1"
-     endIcon={<MyCustomEndIcon />}
+     slots={{ endIcon: MyCustomEndIcon }}
    />
  </SimpleTreeView>

  • The icon prop, rendered next to an item without children,
    is now defined as a slot on the Tree Item component.

    If you were passing an icon to your Tree Item component,
    you need to use the new icon slot on this component: 

      <SimpleTreeView>
    <TreeItem
      nodeId="1"
      label="Node 1"
-     icon={<MyCustomIcon />}
+     slots={{ icon: MyCustomIcon }}
    />
  </SimpleTreeView>

@mui/x-tree-view@7.0.0-alpha.9

Docs

Core

Check out latest releases or
releases around mui/mui-x v7.0.0-alpha.9

Don't miss a new mui-x release

NewReleases is sending notifications on new releases.

Get notifications