[blog] Whats new since MUI X v8 [DX-51] #47140
+255
−0
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| /// <reference types="next" /> | ||
| /// <reference types="next/image-types/global" /> | ||
| /// <reference path="./export/types/routes.d.ts" /> | ||
|
|
||
| // NOTE: This file should not be edited | ||
| // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import * as React from 'react'; | ||
| import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; | ||
| import { docs } from './mui-x-end-v8.md?muiMarkdown'; | ||
|
|
||
| export default function Page() { | ||
| return <TopLayoutBlog docs={docs} />; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,251 @@ | ||||||
| --- | ||||||
| title: MUI X v8 — Highlights before the next major | ||||||
|
Check warning on line 2 in docs/pages/blog/mui-x-end-v8.md
|
||||||
| description: New chart interactions, server-side pivoting, Grid ↔ Charts integration, range picker ergonomics, Tree View polish, and more — grouped by component. | ||||||
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
| date: 2025-11-11T08:00:00.000Z | ||||||
| authors: ['josefreitas', 'alelthomas'] | ||||||
| tags: ['MUI X', 'Product'] | ||||||
| manualCard: false | ||||||
| --- | ||||||
|
|
||||||
| <style> | ||||||
| #blog-responsive-image { | ||||||
| height: 230px; | ||||||
| @media (max-width: 600px) { | ||||||
| height: 167px; | ||||||
| } | ||||||
| } | ||||||
| </style> | ||||||
|
|
||||||
| <a href="https://github.com/mui/mui-x/releases/tag/v8.20.0"> | ||||||
| <img | ||||||
| id="blog-responsive-image" | ||||||
| src="/static/blog/mui-x-end-v8/intro.png" | ||||||
| alt="" | ||||||
| height="2400" | ||||||
| width="800" | ||||||
| style="width: 100%; object-fit: cover; object-position: center; border: 0px;" | ||||||
| /> | ||||||
| </a> | ||||||
|
|
||||||
| We’re happy to share the newest MUI X features shipped over the past months. As we gear up for the next major, here’s a tour of everything new. | ||||||
|
Check warning on line 30 in docs/pages/blog/mui-x-end-v8.md
|
||||||
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| ## Table of contents | ||||||
|
|
||||||
| - [Charts](#charts) | ||||||
| - [Brush selection](#brush-selection) | ||||||
| - [Zoom and pan that feel right](#zoom-and-pan-that-feel-right)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') | ||||||
| - [Zoom slider with preview](#zoom-slider-with-preview)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') | ||||||
| - [Keyboard navigation and a11y improvements](#keyboard-navigation-and-a11y-improvements) | ||||||
| - [Sankey and upgraded charts](#sankey-and-upgraded-charts)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') | ||||||
| - [Clearer axes for dense categories](#clearer-axes-for-dense-categories) | ||||||
| - [Performance and export](#performance-and-export)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') | ||||||
| - [Data Grid](#data-grid) | ||||||
| - [Server-side pivoting](#server-side-pivoting)[<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') | ||||||
| - [Row grouping that adapts as you explore](#row-grouping-that-adapts-as-you-explore)[<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') | ||||||
| - [Charts integration](#charts-integration)[<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') | ||||||
| - [Smoother reordering with clear affordances](#smoother-reordering-with-clear-affordances)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') | ||||||
| - [Pinned areas and scrolling polish](#pinned-areas-and-scrolling-polish) | ||||||
| - [Export resilience](#export-resilience)[<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') | ||||||
| - [Date and Time Pickers](#date-and-time-pickers) | ||||||
| - [Better range defaults](#better-range-defaults)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') | ||||||
| - [Polished inputs across devices](#polished-inputs-across-devices) | ||||||
| - [Tree View](#tree-view) | ||||||
| - [Drag and drop support and other improvements](#drag-and-drop-support-and-other-improvements) | ||||||
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
| - [What’s next](#whats-next) | ||||||
| - [Feedback](#feedback) | ||||||
|
|
||||||
| ## Charts | ||||||
|
|
||||||
| ### Brush selection | ||||||
|
|
||||||
| Drag a **brush** across any cartesian chart to focus the conversation: zoom a busy week on a time series, isolate a cluster in scatter, or feed the selected window to your own logic. The brush overlay gives a crisp visual cue while you work. | ||||||
|
|
||||||
| <figure style="margin:16px 0;"> | ||||||
| <video src="/static/blog/mui-x-end-v8/charts-brush.mp4" autoplay muted loop playsinline controls style="width:100%;max-width:960px;border-radius:12px;"></video> | ||||||
| <figcaption style="text-align:center;margin-top:8px;">Brush a range to zoom or select data.</figcaption> | ||||||
| </figure> | ||||||
|
|
||||||
| [Explore brush and selection](/x/react-charts/brush/) | ||||||
|
|
||||||
| ### Zoom and pan that feel right [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') | ||||||
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| Zooming and panning now match how people expect to interact: wheel or pinch to zoom, **press-and-drag** to pan, and on touch you can **tap-and-drag** to zoom without fiddly gestures. If needed, tune the interaction config (for example, require Ctrl to zoom and Shift to pan) so charts play nicely with your page shortcuts. | ||||||
alelthomas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| <figure style="margin:16px 0;"> | ||||||
| <video src="/static/blog/mui-x-end-v8/charts-zoom-gestures.mp4" autoplay muted loop playsinline controls style="width:100%;max-width:960px;border-radius:12px;"></video> | ||||||
| <figcaption style="text-align:center;margin-top:8px;">Natural zoom and pan on desktop and touch.</figcaption> | ||||||
| </figure> | ||||||
|
|
||||||
| [Zoom and pan guide](/x/react-charts/zoom-and-pan/) | ||||||
|
|
||||||
| ### Zoom slider with preview [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') | ||||||
|
|
||||||
| A compact **slider** under the axis makes long ranges effortless to navigate, and the optional **preview** shows exactly what’s in view — the dashboard equivalent of a map’s mini-overview. | ||||||
alelthomas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| <figure style="margin:16px 0;"> | ||||||
| <img src="/static/blog/mui-x-end-v8/charts-zoom-preview.png" alt="Zoom slider and preview" style="width:100%;max-width:960px;border-radius:12px;"> | ||||||
| <figcaption style="text-align:center;margin-top:8px;">Stay oriented while zoomed in.</figcaption> | ||||||
| </figure> | ||||||
|
|
||||||
| [Play with the zoom slider](/x/react-charts/zoom-and-pan/#zoom-slider) | ||||||
|
|
||||||
| ### Keyboard navigation and a11y improvements | ||||||
|
|
||||||
| Charts are comfortable to explore from the keyboard: focus highlights stay in sync as you move, and tooltips/axes cooperate so you can read values without a mouse. | ||||||
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| <figure style="margin:16px 0;"> | ||||||
| <img src="/static/blog/mui-x-end-v8/charts-a11y.png" alt="Keyboard navigation in charts" style="width:100%;max-width:960px;border-radius:12px;"> | ||||||
| <figcaption style="text-align:center;margin-top:8px;">Keyboard-first exploration of series and points.</figcaption> | ||||||
| </figure> | ||||||
|
|
||||||
| [Accessibility and keyboard](/x/react-charts/accessibility/) | ||||||
|
|
||||||
| ### Sankey and upgraded charts [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') | ||||||
|
|
||||||
| A **Sankey** diagram joins the lineup for flow visualization, while **Funnel** charts gain polished presets (including pyramid/step-pyramid) so conversion stories read at a glance. | ||||||
|
|
||||||
| <figure style="margin:16px 0;"> | ||||||
| <img src="/static/blog/mui-x-end-v8/charts-sankey-funnel.png" alt="Sankey and Funnel charts" style="width:100%;max-width:960px;border-radius:12px;"> | ||||||
| <figcaption style="text-align:center;margin-top:8px;">Tell flow and conversion stories clearly.</figcaption> | ||||||
| </figure> | ||||||
|
|
||||||
| [Sankey docs](/x/react-charts/sankey/) • [Funnel docs](/x/react-charts/funnel/) | ||||||
|
|
||||||
| ### Clearer axes for dense categories | ||||||
|
|
||||||
| Multi-level **label groups** on band/point axes tidy up long category lists and comparisons — perfect for “Region Country City” break-downs. | ||||||
|
||||||
| Multi-level **label groups** on band/point axes tidy up long category lists and comparisons — perfect for “Region Country City” break-downs. | |
| Multi-level **label groups** on band and point axes tidy up long category lists and comparisons—perfect for "region/country/city" break-downs. |
alelthomas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
alelthomas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
alelthomas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
alelthomas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
alelthomas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
alelthomas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
alelthomas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
alelthomas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
Check failure on line 243 in docs/pages/blog/mui-x-end-v8.md
GitHub Actions / runner / vale
[vale] reported by reviewdog 🐶
[MUI.MuiBrandName] Use a non-breaking space (option+space on Mac, Alt+0160 on Windows or AltGr+Space on Linux, instead of space) for brand name ('Base UI' instead of 'Base UI')
Raw Output:
{"message": "[MUI.MuiBrandName] Use a non-breaking space (option+space on Mac, Alt+0160 on Windows or AltGr+Space on Linux, instead of space) for brand name ('Base UI' instead of 'Base UI')", "location": {"path": "docs/pages/blog/mui-x-end-v8.md", "range": {"start": {"line": 243, "column": 148}}}, "severity": "ERROR"}
Check warning on line 243 in docs/pages/blog/mui-x-end-v8.md
GitHub Actions / runner / vale
[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'we'.
Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'we'.", "location": {"path": "docs/pages/blog/mui-x-end-v8.md", "range": {"start": {"line": 243, "column": 63}}}, "severity": "WARNING"}
Check warning on line 243 in docs/pages/blog/mui-x-end-v8.md
GitHub Actions / runner / vale
[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'We'.
Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'We'.", "location": {"path": "docs/pages/blog/mui-x-end-v8.md", "range": {"start": {"line": 243, "column": 1}}}, "severity": "WARNING"}
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
Check warning on line 245 in docs/pages/blog/mui-x-end-v8.md
GitHub Actions / runner / vale
[vale] reported by reviewdog 🐶
[Google.Will] Avoid using 'will'.
Raw Output:
{"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/pages/blog/mui-x-end-v8.md", "range": {"start": {"line": 245, "column": 101}}}, "severity": "WARNING"}
Check warning on line 245 in docs/pages/blog/mui-x-end-v8.md
GitHub Actions / runner / vale
[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'us'.
Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'us'.", "location": {"path": "docs/pages/blog/mui-x-end-v8.md", "range": {"start": {"line": 245, "column": 74}}}, "severity": "WARNING"}
Check failure on line 249 in docs/pages/blog/mui-x-end-v8.md
GitHub Actions / runner / vale
[vale] reported by reviewdog 🐶
[MUI.MuiBrandName] Use a non-breaking space (option+space on Mac, Alt+0160 on Windows or AltGr+Space on Linux, instead of space) for brand name ('MUI X' instead of 'MUI X')
Raw Output:
{"message": "[MUI.MuiBrandName] Use a non-breaking space (option+space on Mac, Alt+0160 on Windows or AltGr+Space on Linux, instead of space) for brand name ('MUI X' instead of 'MUI X')", "location": {"path": "docs/pages/blog/mui-x-end-v8.md", "range": {"start": {"line": 249, "column": 48}}}, "severity": "ERROR"}
Check warning on line 249 in docs/pages/blog/mui-x-end-v8.md
GitHub Actions / runner / vale
[vale] reported by reviewdog 🐶
[MUI.NoCompanyName] We avoid referencing the company name 'MUI X'. Instead you can reference a product or the team.
Raw Output:
{"message": "[MUI.NoCompanyName] We avoid referencing the company name 'MUI X'. Instead you can reference a product or the team.", "location": {"path": "docs/pages/blog/mui-x-end-v8.md", "range": {"start": {"line": 249, "column": 48}}}, "severity": "WARNING"}
Check warning on line 249 in docs/pages/blog/mui-x-end-v8.md
GitHub Actions / runner / vale
[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'We'.
Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'We'.", "location": {"path": "docs/pages/blog/mui-x-end-v8.md", "range": {"start": {"line": 249, "column": 1}}}, "severity": "WARNING"}
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.