1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[321],{45096:(n,a,s)=>{"use strict";s.r(a),s.d(a,{default:()=>i});var e=s(72881),t=s(82890);let o={en:{description:"We are excited to introduce MUI\xa0X v5.0.0!",location:"/docs/pages/blog/mui-x-v5.md",rendered:['<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="error-icon" viewBox="0 0 20 20">\n<path fill-rule="evenodd" d="M2 7.4v5.2a2 2 0 0 0 .586 1.414l3.4 3.4A2 2 0 0 0 7.4 18h5.2a2 2 0 0 0 1.414-.586l3.4-3.4A2 2 0 0 0 18 12.6V7.4a2 2 0 0 0-.586-1.414l-3.4-3.4A2 2 0 0 0 12.6 2H7.4a2 2 0 0 0-1.414.586l-3.4 3.4A2 2 0 0 0 2 7.4Zm11.03-.43a.75.75 0 0 1 0 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 1.06-1.06L10 8.94l1.97-1.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="warning-icon" viewBox="0 0 20 20">\n<path d="M2.33 17a.735.735 0 0 1-.665-.375.631.631 0 0 1-.094-.375.898.898 0 0 1 .115-.396L9.353 3.062a.621.621 0 0 1 .281-.27.85.85 0 0 1 .729 0 .622.622 0 0 1 .281.27l7.667 12.792c.07.125.108.257.114.396a.63.63 0 0 1-.093.375.842.842 0 0 1-.271.27.728.728 0 0 1-.394.105H2.33Zm7.664-2.5c.211 0 .39-.072.536-.214a.714.714 0 0 0 .218-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.531-.22.736.736 0 0 0-.536.215.714.714 0 0 0-.219.531c0 .212.072.39.215.536.143.146.32.219.531.219Zm0-2.5c.211 0 .39-.072.536-.216a.72.72 0 0 0 .218-.534v-2.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.531-.216.734.734 0 0 0-.536.216.72.72 0 0 0-.219.534v2.5c0 .212.072.39.215.534a.72.72 0 0 0 .531.216Z"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="success-icon" viewBox="0 0 20 20">\n<path d="m8.938 10.875-1.25-1.23a.718.718 0 0 0-.521-.228.718.718 0 0 0-.521.229.73.73 0 0 0 0 1.062l1.77 1.771c.153.153.327.23.521.23a.718.718 0 0 0 .521-.23l3.896-3.896a.73.73 0 0 0 0-1.062.718.718 0 0 0-.52-.23.718.718 0 0 0-.521.23l-3.376 3.354ZM10 18a7.796 7.796 0 0 1-3.104-.625 8.065 8.065 0 0 1-2.552-1.719 8.064 8.064 0 0 1-1.719-2.552A7.797 7.797 0 0 1 2 10c0-1.111.208-2.15.625-3.115a8.064 8.064 0 0 1 4.27-4.26A7.797 7.797 0 0 1 10 2c1.111 0 2.15.208 3.115.625a8.096 8.096 0 0 1 4.26 4.26C17.792 7.851 18 8.89 18 10a7.797 7.797 0 0 1-.625 3.104 8.066 8.066 0 0 1-4.26 4.271A7.774 7.774 0 0 1 10 18Z"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="info-icon" viewBox="0 0 20 20">\n<path d="M9.996 14c.21 0 .39-.072.535-.216a.72.72 0 0 0 .219-.534v-3.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.532-.216.734.734 0 0 0-.535.216.72.72 0 0 0-.219.534v3.5c0 .213.071.39.214.534a.72.72 0 0 0 .532.216Zm0-6.5c.21 0 .39-.071.535-.214a.714.714 0 0 0 .219-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.532-.219.736.736 0 0 0-.535.214.714.714 0 0 0-.219.532c0 .21.071.39.214.535.143.146.32.219.532.219Zm.01 10.5a7.81 7.81 0 0 1-3.11-.625 8.065 8.065 0 0 1-2.552-1.719 8.066 8.066 0 0 1-1.719-2.551A7.818 7.818 0 0 1 2 9.99c0-1.104.208-2.14.625-3.105a8.066 8.066 0 0 1 4.27-4.26A7.818 7.818 0 0 1 10.009 2a7.75 7.75 0 0 1 3.106.625 8.083 8.083 0 0 1 4.26 4.265A7.77 7.77 0 0 1 18 9.994a7.81 7.81 0 0 1-.625 3.11 8.066 8.066 0 0 1-1.719 2.552 8.083 8.083 0 0 1-2.546 1.719 7.77 7.77 0 0 1-3.104.625Z"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="copied-icon" viewBox="0 0 24 24">\n<path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.24 11.28L9.69 11.2c-.38-.39-.38-1.01 0-1.4.39-.39 1.02-.39 1.41 0l1.36 1.37 4.42-4.46c.39-.39 1.02-.39 1.41 0 .38.39.38 1.01 0 1.4l-5.13 5.17c-.37.4-1.01.4-1.4 0zM3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1z" />\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="copy-icon" viewBox="0 0 24 24">\n<path d="M15 20H5V7c0-.55-.45-1-1-1s-1 .45-1 1v13c0 1.1.9 2 2 2h10c.55 0 1-.45 1-1s-.45-1-1-1zm5-4V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2zm-2 0H9V4h9v12z" />\n+</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
1\n<symbol id="anchor-link-icon" viewBox="0 0 12 6">\n<path d="M8.9176 0.083252H7.1676C6.84677 0.083252 6.58427 0.345752 6.58427 0.666585C6.58427 0.987419 6.84677 1.24992 7.1676 1.24992H8.9176C9.8801 1.24992 10.6676 2.03742 10.6676 2.99992C10.6676 3.96242 9.8801 4.74992 8.9176 4.74992H7.1676C6.84677 4.74992 6.58427 5.01242 6.58427 5.33325C6.58427 5.65409 6.84677 5.91659 7.1676 5.91659H8.9176C10.5276 5.91659 11.8343 4.60992 11.8343 2.99992C11.8343 1.38992 10.5276 0.083252 8.9176 0.083252ZM3.6676 2.99992C3.6676 3.32075 3.9301 3.58325 4.25094 3.58325H7.75094C8.07177 3.58325 8.33427 3.32075 8.33427 2.99992C8.33427 2.67909 8.07177 2.41659 7.75094 2.41659H4.25094C3.9301 2.41659 3.6676 2.67909 3.6676 2.99992ZM4.83427 4.74992H3.08427C2.12177 4.74992 1.33427 3.96242 1.33427 2.99992C1.33427 2.03742 2.12177 1.24992 3.08427 1.24992H4.83427C5.1551 1.24992 5.4176 0.987419 5.4176 0.666585C5.4176 0.345752 5.1551 0.083252 4.83427 0.083252H3.08427C1.47427 0.083252 0.167603 1.38992 0.167603 2.99992C0.167603 4.60992 1.47427 5.91659 3.08427 5.91659H4.83427C5.1551 5.91659 5.4176 5.65409 5.4176 5.33325C5.4176 5.01242 5.1551 4.74992 4.83427 4.74992Z" />\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="comment-link-icon" viewBox="0 0 24 24">\n<path d="M22.8481 4C22.8481 2.9 21.9481 2 20.8481 2H4.84814C3.74814 2 2.84814 2.9 2.84814 4V16C2.84814 17.1 3.74814 18 4.84814 18H18.8481L22.8481 22V4ZM16.8481 11H13.8481V14C13.8481 14.55 13.3981 15 12.8481 15C12.2981 15 11.8481 14.55 11.8481 14V11H8.84814C8.29814 11 7.84814 10.55 7.84814 10C7.84814 9.45 8.29814 9 8.84814 9H11.8481V6C11.8481 5.45 12.2981 5 12.8481 5C13.3981 5 13.8481 5.45 13.8481 6V9H16.8481C17.3981 9 17.8481 9.45 17.8481 10C17.8481 10.55 17.3981 11 16.8481 11Z" />\n</symbol>\n</svg>','<p>We are excited to introduce <a href="https://github.com/mui/mui-x/releases/tag/v5.0.0">MUI\xa0X v5.0.0</a>!</p>\n<p><a href="/x/">MUI\xa0X</a> is our collection of advanced components (with both MIT and commercially licensed "Pro" features).\nCurrently, it only includes a data grid.\nSoon it will include more components like date picker and tree view.\nThis release continues our focus on making the data grid the best in the industry.\nRead on to learn more!</p>\n<img src="/static/blog/mui-x-v5/card.png" alt="" width="2400" height="1256" /><p>This release features some major highlights:</p>\n<ul>\n<li><a href="#a-new-virtualization-engine">High-level goals for v5</a></li>\n<li><a href="#a-new-virtualization-engine">A new virtualization engine</a></li>\n<li><a href="#improved-state-management">Improved state management</a><ul>\n<li><a href="#improved-dx-when-using-the-state">Improved DX when using the state</a></li>\n<li><a href="#synchronous-state-initialization">Synchronous state initialization</a></li>\n</ul>\n</li>\n<li><a href="#simplified-style-customization">Simplified style customization</a><ul>\n<li><a href="#limitations">Limitations</a></li>\n</ul>\n</li>\n<li><a href="#v4-migration">v4 migration</a></li>\n<li><a href="#whats-next">What's next?</a><ul>\n<li><a href="#public-roadmap">Public roadmap</a></li>\n</ul>\n</li>\n<li><a href="#thank-you">Thank you</a></li>\n</ul>\n<h2 id="high-level-goals-for-v5"><a href="#high-level-goals-for-v5" class="title-link-to-anchor">High-level goals for v5<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="high-level-goals-for-v5"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>We develop different React components in two areas: <a href="/core/">MUI\xa0Core</a> and <a href="/x/">MUI\xa0X</a>.\nThis approach recognizes that the problems solved by the components in these two products are different.\nThe paths to success require different strategies.\nMany of the developers using MUI\xa0X also use Material\xa0UI, Base\xa0UI, and MUI\xa0System, these users care a lot about consistency (design, docs, dependencies, etc.).</p>\n<p>With the <a href="/blog/mui-core-v5/">release of MUI\xa0Core v5</a> two months ago MUI\xa0X had to work on providing a cohesive experience.\nThe primary objective of this new major is to have MUI\xa0X provide a great <strong>compatibility with MUI\xa0Core v5</strong>.</p>\n<h2 id="a-new-virtualization-engine"><a href="#a-new-virtualization-engine" class="title-link-to-anchor">A new virtualization engine<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="a-new-virtualization-engine"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p><code>DataGrid</code> and <code>DataGridPro</code> now feature a brand-new virtualization engine!\nWe decided to rewrite it to address the many issues raised by the community and to make it easier to release new features that impact the rendering of rows and columns.\nAn advantage over the previous version is that we now use the native scroll.\nThis means that scrolling the grid is like scrolling a webpage,\nso any jittering caused when the scroll is overridden is gone.</p>\n<p>Talking about performance, one of the main problems we had was that scrolling horizontally was laggy compared to vertical scrolling.\nAfter investigation we found that, although the columns were virtualized, a lot of unnecessary renders were occurring.\nThis can be seen in the top part of the screenshot below, where it compares <code>v5.0.0-beta.4</code> (the last version before the new virtualization engine) with <code>v5.0.0</code>.\nOn each scroll event it renders again, and each frame takes a long time to be drawn (some are even lost).\nTo address these problems, we took the following actions:</p>\n<ul>\n<li>Avoid rendering the entire grid during scroll.</li>\n<li>Pass the correct value to the <code>key</code> prop to ensure that React will reuse the existing DOM nodes.</li>\n<li>Reduced the number of event listeners attached to each cell.</li>\n<li>Increased the number of columns rendered in the overscan (the extra columns rendered to make scroll smoother).</li>\n<li>Delay the rendering of new columns whenever possible.</li>\n</ul>\n<p>The result of these changes is shown in the bottom part of the comparison.\nThe number of frames that could be drawn in the same amount of time dramatically increased, compared to the previous virtualization approach.\nIn our <a href="https://github.com/mui/mui-x/pull/2673">benchmark</a>, the FPS (frames per second) went from 22 to 42, on average.\nThe time each frame takes to be rendered, indicated by the width of each block, was reduced.<
1/p>\n<p>The idea of delaying the re-rendering also can be seen in the large voids between the blocks.\nEach void means that a re-render was not necessary since the required columns were already rendered by the overscan.</p>\n<img src="/static/blog/mui-x-v5/performance.png" alt="Performance comparison between v5.0.0-beta.4 and v5.0.0" loading="lazy" width="1920" height="860" /><p>Some of the mentioned improvements were also applied to the rows, however the gains were more subtle.\nBesides the better performance, the new virtualization engine also brings the following fixes:</p>\n<ul>\n<li>Horizontal and vertical scroll share the same logic.</li>\n<li>No more jumps when changing the rendered rows.</li>\n<li>Calling <code>apiRef.current.scrollToIndexes</code> works no matter where the cell is.</li>\n<li>Improved support for when <code>disableVirtualization</code> is used.</li>\n<li>Fixes keyboard navigation with arrow keys.</li>\n</ul>\n<h2 id="improved-state-management"><a href="#improved-state-management" class="title-link-to-anchor">Improved state management<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="improved-state-management"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Several enhancements were made to state management to improve developer experience, performance, and consistency in the execution order.</p>\n<h3 id="improved-dx-when-using-the-state"><a href="#improved-dx-when-using-the-state" class="title-link-to-anchor">Improved DX when using the state<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="improved-dx-when-using-the-state"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>We have worked on simplifying the state structure and the tools to access it.\nThese changes improved the developer experience when using the <code>apiRef</code> methods:</p>\n<ul>\n<li>We removed the <code>state</code> structure from the public API. Access to data in the state should always be done through <code>apiRef</code> methods (<code>apiRef.current.getSelectedRows</code>) or selectors (<code>selectedGridRowsSelector</code>).</li>\n<li>We renamed most selectors to have a consistent naming convention, making it easier to deduce their name or infer purpose.</li>\n<li>We restructured our state so that each feature has a single sub-state, and the feature hook is the only one to update it (for example <code>state.filter</code> is only managed by the <code>useGridFilter</code> hook, which exposes methods for both internal and 3rd party code to interact with this state).</li>\n</ul>\n<p>The work on this topic isn't over. We have several developments in progress or under discussion to improve the developer experience when using the advanced features of the grid.\nHere are a few that should be release in the following months:</p>\n<ul>\n<li>Strict typing of event listeners and publishers.</li>\n<li>Examples for the event listeners.</li>\n<li>Documentation and examples for selectors.</li>\n<li>Add the ability to export and restore some parts of the grid state.</li>\n</ul>\n<h3 id="synchronous-state-initialization"><a href="#synchronous-state-initialization" class="title-link-to-anchor">Synchronous state initialization<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="synchronous-state-initialization"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>In previous versions, the state was first populated with default values, and then in a <code>useEffect</code>, given the values provided as props (<code>props.pageSize</code> for instance), or derived from the props (the sorted and filtered rows derived from the <code>props.rows</code>, <code>props.sortModel</code> and <code>props.filterModel</code>).\nThis was causing an additional render with useless data, and then we had to be careful to avoid flickering between the fake and real data.\nIn v5, the state is initialized synchronously during the first render.</p>\n<p>Note that for now, the state updates coming from controlled props are still asynchronous.\nIf you pass <code>props.pageSize</code>, we will apply it to the state in a <code>useEffect</code>, and therefore if you read the state just after the render (for instance in a <code>useLayoutEffect</code>), you will still see the old version.</p>\n<h2 id="simplified-style-customization"><a href="#simplified-style-customization" class="title-link-to-anchor">Simplified style customization<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="simplified-style-customization"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>In previous versions, most of the built-in CSS of the <code>DataGrid</code> and <code>DataGridPro</code> components had a <a href="https://web.dev/learn/css/specificity/">CSS specificity</a> of 2.\nThis means that the CSS you would normally add would have less priority than the built-in CSS of the data grid.\nThis was requiring you to open your dev tools, look at the DOM/CSSOM tree in order to use the correct CSS selector.\nWith MUI\xa0X v5 we have reduced the CSS specificity of most of the internal <code>DataGrid</code> and <code>DataGridPro</code>
1 components to 1.\nThis enables developers to more easily change the look and feel of the grid's components.</p>\n<p><strong>Before</strong></p>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token keyword">const</span> GridToolbarContainerStyled <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span>GridToolbarContainer<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token string-property property">\'&.MuiDataGrid-toolbarContainer\'</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">MyCustomToolbar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">GridToolbarContainerStyled</span></span><span class="token punctuation">></span></span>My custom toolbar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">GridToolbarContainerStyled</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">\'100%\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">DataGrid</span></span> <span class="token attr-name">components</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">Toolbar</span><span class="token operator">:</span> MyCustomToolbar <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> <span class="MuiCode-copyKeypressKey" role="img" aria-label="Ctrl or CMD"></span>C<span>)</span></span></button></div>\n<p><strong>After</strong></p>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token keyword">const</span> GridToolbarContainerStyled <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span>GridToolbarContainer<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">MyCustomToolbar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">GridToolbarContainerStyled</span></span><span class="token punctuation">></span></span>\n My custom toolbar\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">GridToolbarContainer</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">\'100%\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
1\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">DataGrid</span></span> <span class="token attr-name">components</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">Toolbar</span><span class="token operator">:</span> MyCustomToolbar <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> <span class="MuiCode-copyKeypressKey" role="img" aria-label="Ctrl or CMD"></span>C<span>)</span></span></button></div>\n<p>Another way to customize this will be to use the <code>sx</code> prop.</p>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token keyword">function</span> <span class="token function">MyCustomToolbar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// means "padding: theme.spacing(5)", NOT "5px"</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">GridToolbarContainer</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">p</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>My custom toolbar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">GridToolbarContainer</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">\'100%\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">DataGrid</span></span> <span class="token attr-name">components</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">Toolbar</span><span class="token operator">:</span> MyCustomToolbar <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> <span class="MuiCode-copyKeypressKey" role="img" aria-label="Ctrl or CMD"></span>C<span>)</span></span></button></div>\n<h3 id="limitations"><a href="#limitations" class="title-link-to-anchor">Limitations<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="limitations"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Although this was a clear improvement, we still had to keep a CSS specificity of 2 for some parts of the <code>DataGrid</code> and <code>DataGridPro</code>, specifically the <code>GridColumnHeaderItem</code>, <code>GridRow</code> and <code>GridCell</code> along with all of the components that are nested in them.\nThis is due to performance implications related to how <a href="https://emotion.sh/docs/introduction">Emotion</a> injects styles into the page,\nand was necessary to keep the performance of our virtualization engine at its optimal.</p>\n<h2 id="v4-migration"><a href="#v4-migration" class="title-link-to-anchor">v4 migration<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="v4-migration"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>We strongly recommend you migrate MUI\xa0X to v5.\nIn MUI\xa0X v5 we have not only added additional features but also made significant internal improvements and performance optimizations that won't be included in v4.\nAll-new <code>DataGrid</code> and <code>DataGridPro</code> features will be only available in MUI\xa0X v5.</p>\n<p>Please check <a href="/x/migration/migration-data-grid-v4/">
1the v4 migration guide</a> to accelerate the transition.</p>\n<h2 id="whats-next"><a href="#whats-next" class="title-link-to-anchor">What's next?<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="whats-next"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>More exciting things are coming! We have big plans for the rest of this quarter in terms of features we expect to release in both the <code>DataGrid</code> and <code>DataGridPro</code> components.\nFeatures such as <strong><a href="/x/react-data-grid/tree-data/">tree data</a></strong>, <strong><a href="/x/react-data-grid/column-pinning/">column pinning</a></strong>, and <strong><a href="https://github.com/mui/mui-x/issues/438">variable row height</a></strong> are part of our roadmap.</p>\n<h3 id="public-roadmap"><a href="#public-roadmap" class="title-link-to-anchor">Public roadmap<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="public-roadmap"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>As a general rule, the data grid is the cornerstone of any application manipulating large amounts of data.\nWe plan to focus on it as long as necessary to deliver most of the advanced features.</p>\n<p>Once we would have grown the team and made enough progress, we will expand to more components.</p>\n<p>You can view our <a href="https://github.com/orgs/mui/projects/35">public roadmap</a> on GitHub to learn about what features we're working on, what stage they're at, and when we expect to bring them to you.</p>\n<h2 id="thank-you"><a href="#thank-you" class="title-link-to-anchor">Thank you<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="thank-you"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Finally, one last thank you to everyone who's contributed to MUI\xa0X v5.\nWe're very excited about this release, and we'll continue to push forward and deliver the next generation of Enterprise React UI components!\nIt's just the beginning.</p>\n'],toc:[{text:"High-level goals for v5",level:2,hash:"high-level-goals-for-v5",children:[]},{text:"A new virtualization engine",level:2,hash:"a-new-virtualization-engine",children:[]},{text:"Improved state management",level:2,hash:"improved-state-management",children:[{text:"Improved DX when using the state",level:3,hash:"improved-dx-when-using-the-state"},{text:"Synchronous state initialization",level:3,hash:"synchronous-state-initialization"}]},{text:"Simplified style customization",level:2,hash:"simplified-style-customization",children:[{text:"Limitations",level:3,hash:"limitations"}]},{text:"v4 migration",level:2,hash:"v4-migration",children:[]},{text:"What's next?",level:2,hash:"whats-next",children:[{text:"Public roadmap",level:3,hash:"public-roadmap"}]},{text:"Thank you",level:2,hash:"thank-you",children:[]}],title:"Introducing MUI\xa0X v5",headers:{title:"Introducing MUI\xa0X v5",description:"We are excited to introduce MUI\xa0X v5.0.0!",date:"2021-11-22T00:00:00.000Z",authors:["oliviertassinari","m4theushw","flaviendelangle","DanailH","alexfauquette"],manualCard:"true",tags:["MUI X","Product"],components:[],hooks:[]}}};function i(){return(0,e.jsx)(t.A,{docs:o})}},94247:(n,a,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/mui-x-v5",function(){return s(45096)}])}},n=>{n.O(0,[5129,77240,92076,21032,26132,99013,78618,82890,90636,46593,38792],()=>n(n.s=94247)),_N_E=n.O()}]); 2//# sourceMappingURL=mui-x-v5-a763ba49d9c46554.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.