MUI X v6.18.0 and the latest features before the next major
José Freitas
@joserodolfofreitas
We are happy to share the newest MUI X features, marking the release of MUI X v6.18.0 and sealing v6 with new components and solid functionalities.
As we gear up to develop the next major version, let's review the notable new features introduced since our last blog post.
Table of contents
New stable components
Charts
The stable version of MUI X charts supports the most commonly used chart plots you'll need in your day-to-day applications.
Featuring lines, areas, bars, pie charts and scatter plots, the latest versions also include:
Animations
Animations on bars, pie charts, and more to come.
Horizontal Bar Chart Support
Recently added, the horizontal bars can broaden your data visualization spectrum, especially when you need to display long labels for multiple categories. Check out Bar's layout documentation for more details.
Improved Text Customization
Customize the legend text to your heart's content, making your charts more readable and visually appealing.
Get started with charts now!
Tree view
After an extensive period of development and refinement in the lab and pre-release packages, and with the invaluable feedback we've received from you, the community, we're happy to share that the package is now officially stable!
Get started with tree view now!
Date Pickers
Smoothened animations
The animations have been smoothened, especially on Android devices, ensuring a more fluid user experience.
Clearable Field
A much-anticipated feature, the date and time fields now allow users to clear a selected date with a single click. You can learn how to use it at the clearable behavior documentation.
Customization Playgrounds
We're constantly improving our documentation and working to better communicate how to use our components effectively. With the new customization playgrounds, you can now tailor the style of Date Picker and experiment with multiple combinations of sub-components to achieve the look and feel you desire.
Data Grid
Column Autosizing
The new autosizing feature automatically adjusts the column width to accommodate the content within. You can include or exclude both headers and outliers from the calculation and expand to use the entire area of the grid. Learn more details at column autosizing section.
New examples
We're continuously improving our docs, and we're starting to add more advanced examples like bulk editing and lazy loading for tree data.
Sparkline as a column type
Based on @mui/x-charts package, you can now add sparkline columns to your Data Grid.
For more details on sparkline and other custom columns, please visit the documentation page.
Performance improvements
In our pursuit to enhance user experience, one of the most significant changes in latest v6 versions are related to performance boosts on filtering and scrolling.
To illustrate some of these improvements, the following table display a benchmark comparing the latest v5 (v5.17.26) with v6.18.0. The focus is to assess the raw filtering speed in a use case involving a one-column string filter over 100,000 rows.
| Version | N# of Tests | Min time (ms) | Max time (ms) | Median (ms) | Average (ms) | Deviation |
|---|---|---|---|---|---|---|
| v5.17.26 | 22 | 396 | 409 | 400 | 400.7 | 3.96 |
| v6.18.0 | 20 | 44 | 66 | 49.5 | 50.4 | 5.63 |
As we can see, the current version operates 7.9 times faster; the average time has dropped from 400.7 milliseconds in the previous version to just 50.4 milliseconds in the current one.
What's next?
We're now working on the next MUI X major, v7, which will include many new features and improvements.
Most notably:
- DateTime and TimeRangePicker
- Improved accessibility on date and time fields
- New UI for column management for the
DataGrid - Pivoting for the
DataGridPremium
For the new components, we will keep expanding our portfolio with new chart types such as Heat map, Funnel, Gantt, and explore virtualization and other advanced use cases for Tree view.
We encourage you to upvote issues on GitHub to help us prioritize. Your input directly influences our development schedule, so don't hesitate to let us know what matters most to you! You can use the following list for quick access to each components issues.
The next major release (v7) will be available through alpha and beta versions until March 2024, when it's planned for it to be officially promoted to the new stable version. At the same time, v6 will transition to Long-Term Support, while support for v5 will be discontinued.
Feedback
As usual, we are happy to hear from you and get your feedback, so if you'd like to share your pain points and use cases, please leave your contact info through this Google Form.
Naturally, you're welcome to request new features, report bugs, and join any discussion in MUI X GitHub repository; additionally, we're trying to establish a community in the MUI Discord server, and we'd love to see you there.
Cheers!