MUI X v6.11.0. A roundup of all new features

Since the first v6 stable release, we've continuously rolled out new major features. Now that we've reached MUI X v6.11.0, it's time to delve into the most recent additions to MUI X v6, and why you should get the latest version now.

Table of contents

• Date Pickers
  • Support for time zones
  • Digital clock
• Data Grid
  • Filter on column headers
  • Copy and paste
• Charts - alpha version
• Tree View is moving to MUI X
• Feedback

Date Pickers

Support for time zones

No more hassle displaying dates in the time zones of your choice. 🌎

You can effortlessly display and select dates and times in different time zones, without worrying about conversion logic or maintaining consistency with your backend.

Set the timezone prop to define which time zone the Date, Time, or DateTime should be displayed in.

<TimePicker
  value={value}
  onChange={setValue}
  timezone="Pacific/Honolulu" // Can be in any timezone of your choice
  label={'Rendered in "Pacific/Honolulu"'}
/>

Check the full instructions for more information on using this feature in your application.

Digital clock

The digital clock is an alternative to the Time Pickers' analog clock. The original proposal was mainly focused on mobile devices, whereas the new interface is designed for a desktop experience for better time precision. This new addition makes our Date Pickers even more versatile and user-friendly than before. It's available as the default variant for desktops on both the Time Picker and the Date Time Picker.

Check out all the possibilities in the Date Pickers—Digital clock documentation, and let us know your thoughts!

Data Grid

Filter on column headers

Filtering on column headers gives users the ability to quickly filter data without any additional menu. Use the the unstable_headerFilters prop to activate this feature.

The new filter fields are displayed below the headers, and are synchronized with the filter panel. If you prefer more simplicity, you can disable the default filter panel using the disableColumnFilter prop, and set filters to use only the default operator.

For more details on how to use and customize the filters, check out its documentation page.

Copy and paste

After setting the experimentalFeatures={{ clipboardPaste: true }} prop, you can copy and paste data directly to and from your Data Grid.

This new feature is extremely versatile, and you can exchange data from other fields, other grids, and even directly to and from the spreadsheet tool of your choice.

This feature is integrated with the editing API, so pasted data can be persisted using the processRowUpdate prop to update your data source through your usual editing validation process. The callbacks clipboardPasteStart and clipboardPasteEnd are fired during the clipboard paste operation, which can be useful for extra customizations around the event.

For more details on how to use clipboard copy and paste, check out the Data Grid—Clipboard documentation.

Charts - alpha version

We are delighted to announce the upcoming expansion of MUI X: a brand-new suite of components for building and customizing charts.

With MUI X Charts, you can choose from a wide range of chart types, including line charts, bar charts, pie charts, area charts, scatter plots, and more. Each chart type is thoughtfully crafted with attention to detail, ensuring that the visual representations are not only aesthetically pleasing, but also highly effective in conveying complex data.

And it ships with gorgeous palettes that were specially crafted by our designers!

Check out the video below, highlighting some of our Charts:

As we progress toward the stable version, we're committed to enhancing the overall experience for developers and users, so your feedback is fundamental!

We will also steadily expand our portfolio with new chart types such as Heat map, Funnel, Gantt, and more. If there's a specific chart visualization you'd like us to prioritize, we encourage you to upvote the respective issue on GitHub. Your input can directly influence our development schedule, so don't hesitate to let us know what matters most to you!

Get started with charts now!

Tree View is moving to MUI X

Tree View is being migrated from the lab to MUI X, it will soon have a first Alpha release!

The Tree View is a component that represents hierarchical in a tree-like format. Think of a file system navigator displaying folders and files or a navigation list.

Keep on the look out on our next blog for the Tree View migration.

We decided to migrate this component to MUI X as there are still many features that would be great to build (e.g. checkbox, drag & drop, virtualization) and it's usually not a significant component of a design system. Head to MUI Core vs. MUI X if you would like to learn more about this decision.

Feedback

We are always happy to get feedback, so if you'd like to share your pain points and use cases, please leave your contact info with us through this Google Form. As usual, you're welcome to request new features, report bugs and join the discussion in MUI X GitHub repository. If you haven't yet, join our growing community in the recently launched MUI Discord server.

Cheers!