diff --git a/docs/pages/blog/mui-x-end-v8.js b/docs/pages/blog/mui-x-end-v8.js new file mode 100644 index 00000000000000..270d2e5428e4e6 --- /dev/null +++ b/docs/pages/blog/mui-x-end-v8.js @@ -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 ; +} diff --git a/docs/pages/blog/mui-x-end-v8.md b/docs/pages/blog/mui-x-end-v8.md new file mode 100644 index 00000000000000..40cfc2341091f1 --- /dev/null +++ b/docs/pages/blog/mui-x-end-v8.md @@ -0,0 +1,248 @@ +--- +title: MUI X v8 — Highlights since last major release +description: Grid x Charts integration, Chart interactions, server-side Data Grid pivoting, Range Picker ergonomics, Tree View polish, and more. +date: 2025-11-11T08:00:00.000Z +authors: ['josefreitas', 'alelthomas'] +tags: ['MUI X', 'Product'] +manualCard: false +--- + + + + + + + +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 what's new. + +## Table of contents + +- [Charts](#charts) + - [Brush selection](#brush-selection) + - [Zoom and pan that feel right](#zoom-and-pan-that-feel-right)[](/x/introduction/licensing/#pro-plan 'Pro plan') + - [Zoom slider with preview](#zoom-slider-with-preview)[](/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)[](/x/introduction/licensing/#pro-plan 'Pro plan') + - [Clearer axes for dense categories](#clearer-axes-for-dense-categories) + - [Performance and export](#performance-and-export)[](/x/introduction/licensing/#pro-plan 'Pro plan') +- [Data Grid](#data-grid) + - [Server-side pivoting](#server-side-pivoting)[](/x/introduction/licensing/#premium-plan 'Premium plan') + - [Row grouping that adapts as you explore](#row-grouping-that-adapts-as-you-explore)[](/x/introduction/licensing/#premium-plan 'Premium plan') + - [Charts integration](#charts-integration)[](/x/introduction/licensing/#premium-plan 'Premium plan') + - [Smoother reordering with clear affordances](#smoother-reordering-with-clear-affordances)[](/x/introduction/licensing/#pro-plan 'Pro plan') + - [Pinned areas and scrolling polish](#pinned-areas-and-scrolling-polish) + - [Export resilience](#export-resilience)[](/x/introduction/licensing/#premium-plan 'Premium plan') +- [Date and Time Pickers](#date-and-time-pickers) + - [Better range defaults](#better-range-defaults)[](/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) +- [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: + +
+ +
Brush a range to zoom or select data.
+
+ +[Brush and selection](/x/react-charts/brush/) + +### Intuitive zooming and panning[](/x/introduction/licensing/#pro-plan 'Pro plan') + +Zooming and panning now match expected interactions. Wheel or pinch to zoom, press-and-drag to pan, and tap-and-drag on touch to zoom without fiddly gestures. + +Tune the interaction config (for example, require CTRL to zoom and SHIFT to pan) so charts play nicely with your page shortcuts. + +
+ +
Natural zoom and pan on desktop and touch.
+
+ +[Zoom and pan guide](/x/react-charts/zoom-and-pan/) + +### Zoom slider with preview [](/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: + +
+ +
Stay oriented while zoomed in.
+
+ +[Zoom slider](/x/react-charts/zoom-and-pan/#zoom-slider) + +### Keyboard navigation and a11y improvements + +Charts are more comfortable to explore from the keyboard. Focus highlights stay in sync as you move and tooltips and axes cooperate so you can read values without a mouse: + +
+ +
Keyboard-first exploration of series and points.
+
+ +[Accessibility and keyboard navigation](/x/react-charts/accessibility/) + +### Sankey and upgraded charts [](/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: + +
+ Sankey Chart +
Tell flow and conversion stories clearly.
+
+ +[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: + +
+ Grouped axes labels +
Multi-level category labels.
+
+ +[Axes and labeling](/x/react-charts/axis/) + +### Performance and export [](/x/introduction/licensing/#pro-plan 'Pro plan') + +Heavy dashboards feel lighter thanks to faster string measurement, tuned bar rendering, and an SVG batch renderer for large scatter plots. When it's time to share, capture the exact view with **image export** or **print/PDF**. + +
+ +
Faster charts; one-click export.
+
+ +[Performance tips](/x/react-charts/scatter/#performance) • [Export guide](/x/react-charts/export/) + +## Data Grid + +### Server-side pivoting [](/x/introduction/licensing/#premium-plan 'Premium plan') + +Pivot at scale without locking the browser. The Grid coordinates with your back-end to compute pivots and aggregates, so the UI stays snappy while you slice by any model you can dream up: + +[Pivoting docs](/x/react-data-grid/pivoting/) + +### Row grouping that adapts as you explore [](/x/introduction/licensing/#premium-plan 'Premium plan') + +Reorder grouping levels on the fly and stay in place. Expanded groups stay open even as data updates, so you don't lose context during refreshes: + +
+ +
Drag to reorder groups; expansion persists.
+
+ +[Row grouping guide](/x/react-data-grid/row-grouping/) + +### Charts integration [](/x/introduction/licensing/#premium-plan 'Premium plan') + +Turn selections into visuals in seconds. An integrated panel renders the right chart for the current view and stays in sync with Grid interactions—ideal for quick investigations and stakeholder snapshots: + +
+ +
One click from table to chart.
+
+ +[Charts integration docs](/x/react-data-grid/charts-integration/) + +### Smoother reordering with clear affordances [](/x/introduction/licensing/#pro-plan 'Pro plan') + +Drag-and-drop row reordering now shows a precise drop indicator, so teams can reprioritize with confidence—perfect for backlogs and ranked lists: + +
+ +
A clear target as you drag rows.
+
+ +[Row reordering docs](/x/react-data-grid/row-ordering/) + +### Pinned areas and scrolling polish + +Pinned rows and aggregates cooperate with the scrollbar and scroll shadows making wide, tall tables easier to parse at a glance: + +
+ +
+ +[Pinning guide](/x/react-data-grid/column-pinning/) • [Scrolling guide](/x/react-data-grid/scrolling/) + +### Export resilience [](/x/introduction/licensing/#premium-plan 'Premium plan') + +Excel export now relies on our own internally vetted and private `ExcelJS` fork to avoid transitive vulnerabilities and keep exports reliable at scale: + +
+ Export to Excel from the Data Grid +
Safer, sturdier exports for compliance workflows.
+
+ +[Export docs](/x/react-data-grid/export/) + +## Date and Time Pickers + +### Better range defaults [](/x/introduction/licensing/#pro-plan 'Pro plan') + +Range components can use different reference dates for start and for end, so pickers open where users expect—e.g., next Monday through Friday for travel, or “this month” for reporting: + +
+ Range picker with different reference dates +
Open ranges where users naturally start.
+
+ +[Reference dates in ranges](/x/react-date-pickers/base-concepts/#reference-date) + +### Polished inputs across devices + +Edits feel steadier. Compact one-column time layouts keep the intended format, view switching behaves predictably, and browser quirks are smoothed out so the field stays readable and consistent: + +
+ Date and time picker input polish +
Consistent typing, formats, and labels.
+
+ +[Date Pickers quickstart](/x/react-date-pickers/) + +## Tree View + +### Drag-and-drop support and other improvements + +Between refined editing, ordering, and selection behaviors, trees hold up better as they grow. Reorder with drag-and-drop, wire up inline renaming, and keep identifiers flexible so you can mirror your domain model precisely: + +
+ +
Scale up without losing your place.
+
+ +[Rich Tree View guides](/x/react-tree-view/) + +## What's next + +We're targeting a v9 stable release by the end of March. After that, we'll invest heavily in **customization** and rewrite our components over Base UI to fully embrace composition, cleaner slots API, and a more modern **DevEx**. The aim is to make it easier to swap parts without forking, line up with your design tokens, and build complex UIs with less prop-surface ceremony. + +If you rely on deep customization today, now is the perfect time to tell us what hurts—[your input](https://tally.so/forms/w8X8Po) will shape the plan. + +## Feedback + +We're excited to hear from you about how we can keep improving MUI X! Please share requests, pain points, and use cases through [this short form](https://tally.so/forms/w8X8Po). + +Cheers! diff --git a/docs/public/static/blog/mui-x-end-v8/intro.png b/docs/public/static/blog/mui-x-end-v8/intro.png new file mode 100644 index 00000000000000..631aa39f1aee53 Binary files /dev/null and b/docs/public/static/blog/mui-x-end-v8/intro.png differ