b8539170.a39e3598.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{133:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"toc",(function(){return l})),n.d(t,"default",(function(){return s}));var a=n(3),o=(n(0),n(165)),r=n(196);const i={id:"breaking-changes",title:"Breaking Changes",slug:"/breaking-changes"},c={unversionedId:"getting-started/breaking-changes",id:"getting-started/breaking-changes",isDocsHomePage:!1,title:"Breaking Changes",description:"A list of breaking changes since forking from mbrn/material-table (fork was created around mbrn/material-table v1.60.0)",source:"@site/docs/getting-started/breaking-changes.mdx",slug:"/breaking-changes",permalink:"/docs/breaking-changes",editUrl:"https://github.com/material-table-core/website/tree/master/docs/getting-started/breaking-changes.mdx",version:"current",sidebar:"docs",previous:{title:"With @material-ui v5",permalink:"/docs/material-ui-v5"},next:{title:"Compatibility",permalink:"/docs/compatibility"}},l=[{value:"v3.x.x",id:"v3xx",children:[{value:"<code>padding</code>",id:"padding",children:[]},{value:"<code>onChangeRowsPerPage</code>",id:"onchangerowsperpage",children:[]},{value:"<code>onChangePage</code>",id:"onchangepage",children:[]},{value:"<code>Detail Panel</code>",id:"detail-panel",children:[]},{value:"<code>Id</code>",id:"id",children:[]}]},{value:"v2.x.x",id:"v2xx",children:[{value:"Exporting",id:"exporting",children:[]},{value:"Columns Button",id:"columns-button",children:[]},{value:"Column Hidden Defaults",id:"column-hidden-defaults",children:[]},{value:"Data and column object reference",id:"data-and-column-object-reference",children:[]},{value:"Functions in the <code>options</code>/<code>columns</code> props",id:"functions-in-the-optionscolumns-props",children:[]}]}],b={toc:l};function s(e){let{components:t,...n}=e;return Object(o.b)("wrapper",Object(a.a)({},b,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"A list of breaking changes since forking from ",Object(o.b)("inlineCode",{parentName:"p"},"mbrn/material-table")," (fork was created around ",Object(o.b)("inlineCode",{parentName:"p"},"mbrn/material-table v1.60.0"),")"),Object(o.b)("h2",{id:"v3xx"},"v3.x.x"),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",{parentName:"div",className:"admonition-heading"},Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",{parentName:"h5",className:"admonition-icon"},Object(o.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(o.b)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),Object(o.b)("div",{parentName:"div",className:"admonition-content"},Object(o.b)("p",{parentName:"div"},Object(o.b)("strong",{parentName:"p"},"Version 3.0.0 is where we started supporting Material-UI v4.12. If you are using anything above v3.0.0 you should be good to use Material-UI v4.12")),Object(o.b)("p",{parentName:"div"},Object(o.b)("strong",{parentName:"p"},"If you use Material-UI v5, try out the next branch")))),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",{parentName:"div",className:"admonition-heading"},Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",{parentName:"h5",className:"admonition-icon"},Object(o.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(o.b)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),Object(o.b)("div",{parentName:"div",className:"admonition-content"},Object(o.b)("p",{parentName:"div"},Object(o.b)("strong",{parentName:"p"},"Version 3.x.x inherits all breaking changes from v2.x.x")))),Object(o.b)("div",{className:"admonition admonition-warning alert alert--danger"},Object(o.b)("div",{parentName:"div",className:"admonition-heading"},Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",{parentName:"h5",className:"admonition-icon"},Object(o.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},Object(o.b)("path",{parentName:"svg",fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"}))),"warning")),Object(o.b)("div",{parentName:"div",className:"admonition-content"},Object(o.b)("p",{parentName:"div"},Object(o.b)("strong",{parentName:"p"},"Most support for v2.x.x has been dropped, we are actively deploying to v3.x.x and will working on moving to v5 permanently")))),Object(o.b)("p",null,"The following breaking changes are specific to ",Object(o.b)("inlineCode",{parentName:"p"},"@material-ui")," v5"),Object(o.b)("h3",{id:"padding"},Object(o.b)("inlineCode",{parentName:"h3"},"padding")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"padding")," now accepts 'normal' or 'dense'"),Object(o.b)("h3",{id:"onchangerowsperpage"},Object(o.b)("inlineCode",{parentName:"h3"},"onChangeRowsPerPage")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"onChangeRowsPerPage")," has been renamed to ",Object(o.b)("inlineCode",{parentName:"p"},"onRowsPerPageChange")),Object(o.b)("h3",{id:"onchangepage"},Object(o.b)("inlineCode",{parentName:"h3"},"onChangePage")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"onChangePage")," has been renamed to ",Object(o.b)("inlineCode",{parentName:"p"},"onPageChange")),Object(o.b)("h3",{id:"detail-panel"},Object(o.b)("inlineCode",{parentName:"h3"},"Detail Panel")),Object(o.b)("p",null,"The detail panel is now a full react component and allows hooks and animations. To access the passed data passed as props,\ndeconstruct them instead of accessing directly as previously:"),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"}," detailPanel={({ rowData }) => {...}")),Object(o.b)("pre",null,Object(o.b)("code",{parentName:"pre"},"detailPanel={[\n        {\n          tooltip: 'Show Name',\n          render: ({ rowData }) => {...}\n        }\n")),Object(o.b)("h3",{id:"id"},Object(o.b)("inlineCode",{parentName:"h3"},"Id")),Object(o.b)("p",null,"To persist edit/sort/detail panel state between renders, a new unique key was added to the rows/data props: ",Object(o.b)("inlineCode",{parentName:"p"},"id"),".\nIf an unique id is added to each row, the state can be persisted between renders similar to the key prop of reacts rendering of arrays.\nIt is not required and the index will be used as a fallback. Nevertheless, a console warning will be displayed.\nFor more details, see this ",Object(o.b)("a",{parentName:"p",href:"https://github.com/material-table-core/core/pull/259"},"PR")," or this ",Object(o.b)("a",{parentName:"p",href:"https://github.com/material-table-core/core/issues/59"},"issue"),"."),Object(o.b)("p",null,"The default key ",Object(o.b)("inlineCode",{parentName:"p"},"id")," can be overridden with the option ",Object(o.b)("inlineCode",{parentName:"p"},"idSynonym")," in case the data provided has a different property for the id. More in the ",Object(o.b)("a",{parentName:"p",href:"https://github.com/material-table-core/core/blob/master/types/index.d.ts#L335"},"types"),"."),Object(o.b)("h2",{id:"v2xx"},"v2.x.x"),Object(o.b)("h3",{id:"exporting"},"Exporting"),Object(o.b)("p",null,"Due to ",Object(o.b)("inlineCode",{parentName:"p"},"jspdf")," absolutely ",Object(o.b)("a",{parentName:"p",href:"https://github.com/material-table-core/core/issues/45"},"bloating our bundle"),", we had to make breaking changes to the way exporting data is handled."),Object(o.b)("p",null,"See ",Object(o.b)("a",{parentName:"p",href:"/docs/api/props/options#exportmenu"},"here")," for more."),Object(o.b)("h3",{id:"columns-button"},"Columns Button"),Object(o.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(o.b)("div",{parentName:"div",className:"admonition-heading"},Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",{parentName:"h5",className:"admonition-icon"},Object(o.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(o.b)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"}))),"note")),Object(o.b)("div",{parentName:"div",className:"admonition-content"},Object(o.b)("p",{parentName:"div"},"This is also referred to as the ",Object(o.b)("inlineCode",{parentName:"p"},"exportMenu")))),Object(o.b)("p",null,"Is the action which shows a menu that allows a user to hide/show columns."),Object(o.b)("div",{style:{textAlign:"center"}},Object(o.b)("div",null,Object(o.b)("img",{alt:"Columns_Button",src:Object(r.a)("img/breaking-changes/columns-btn-before.png"),style:{width:"25rem",border:"1px solid black"}}),";"),Object(o.b)("div",null,Object(o.b)("img",{alt:"Columns_Button_Menu",src:Object(r.a)("img/breaking-changes/columns-btn-after.png"),style:{height:"15rem",width:"7.5rem",border:"1px solid black"}}),";")),Object(o.b)("h3",{id:"column-hidden-defaults"},"Column Hidden Defaults"),Object(o.b)("p",null,"All columns used to be hidden from the Columns Button Menu by default, this has since changed."),Object(o.b)("p",null,"In order to achieve the same behavior as before this breaking change, you have two options:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"Set the ",Object(o.b)("a",{parentName:"li",href:"http://localhost:3000/docs/api/props/columns#hiddenbycolumnsbutton"},Object(o.b)("inlineCode",{parentName:"a"},"hiddenByColumnsButton"))," prop to ",Object(o.b)("inlineCode",{parentName:"li"},"false")," for each ",Object(o.b)("a",{parentName:"li",href:"http://localhost:3000/docs/api/props/columns"},"column")),Object(o.b)("li",{parentName:"ul"},"Override the ",Object(o.b)("a",{parentName:"li",href:"/docs/api/components/mtabletoolbar"},Object(o.b)("inlineCode",{parentName:"a"},"MTableToolbar"))," component and set the ",Object(o.b)("a",{parentName:"li",href:"/docs/api/components/mtabletoolbar/#columnshiddenincolumnsbutton"},Object(o.b)("inlineCode",{parentName:"a"},"columnsHiddenInColumnsButton"))," to ",Object(o.b)("inlineCode",{parentName:"li"},"true")," (while spreading the rest of the props)",Object(o.b)("ul",{parentName:"li"},Object(o.b)("li",{parentName:"ul"},"No longer have to set ",Object(o.b)("inlineCode",{parentName:"li"},"hiddenByColumnsButton")," for each column")))),Object(o.b)("h3",{id:"data-and-column-object-reference"},"Data and column object reference"),Object(o.b)("p",null,"The mutation of data and columns to add the tableData object was removed."),Object(o.b)("p",null,"This will remove the object reference for the callbacks as well, so that if you rely on object comparision to find your data, this will no longer work\n(",Object(o.b)("a",{parentName:"p",href:"https://github.com/mbrn/material-table/pull/1174"},"Thread"),"):"),Object(o.b)("pre",null,Object(o.b)("code",{parentName:"pre"},"onRowClick={(event, clickedRow)=> {\n    // Will now always return undefined because reference changed\n    const existingRow = data.find(d => d === clickedRow)\n}\n")),Object(o.b)("p",null,"Instead this works:"),Object(o.b)("pre",null,Object(o.b)("code",{parentName:"pre"},"onRowClick={(event, clickedRow)=> {\n    // Finding the object with an internal id/unique property\n    const existingRow = data.find(d => d.id === clickedRow.id)\n    // Accessing the index\n    const existingRow = data[clickedRow.tableData.id]\n}\n")),Object(o.b)("h3",{id:"functions-in-the-optionscolumns-props"},"Functions in the ",Object(o.b)("inlineCode",{parentName:"h3"},"options"),"/",Object(o.b)("inlineCode",{parentName:"h3"},"columns")," props"),Object(o.b)("p",null,"Due to the removal of the mutation of the column and data props, if columns or options changed by a deep comparison, the data gets rested to reflect the new state, e.g. new pageSize or current page."),Object(o.b)("p",null,"Since functions can only be compared by object reference, the reference of the optional rowStyle or cellStyle function must be stable between renders. This also applies to the column array."),Object(o.b)("pre",null,Object(o.b)("code",{parentName:"pre"},"options={{cellStyle: () => ({color: 'red'})}} // This will result in a reset of the table state between renders.\n")),Object(o.b)("p",null,"Use React.useCallback or declare these functions outside of the component function to create a stable object reference."),Object(o.b)("pre",null,Object(o.b)("code",{parentName:"pre"},"const cellStyle = React.useCallback(() => ({color: 'red'}), [])\noptions={{cellStyle: cellStyle}} // useCallback will create a stable reference\n")),Object(o.b)("p",null,Object(o.b)("strong",{parentName:"p"},Object(o.b)("em",{parentName:"strong"},"See ",Object(o.b)("a",{parentName:"em",href:"/demos/columns/hide"},"here")," for more info + Live Demos (editable playground)"))))}s.isMDXComponent=!0},165:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return h}));var a=n(0),o=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var b=o.a.createContext({}),s=function(e){var t=o.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=s(e.components);return o.a.createElement(b.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},u=o.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,i=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),d=s(n),p=a,u=d["".concat(i,".").concat(p)]||d[p]||m[p]||r;return n?o.a.createElement(u,c(c({ref:t},b),{},{components:n})):o.a.createElement(u,c({ref:t},b))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,i=new Array(r);i[0]=u;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c[p]="string"==typeof e?e:a,i[1]=c;for(var b=2;b<r;b++)i[b]=n[b];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},196:function(e,t,n){"use strict";n.d(t,"b",(function(){return r})),n.d(t,"a",(function(){return i}));var a=n(20),o=n(203);function r(){const{siteConfig:{baseUrl:e="/",url:t}={}}=Object(a.default)();return{withBaseUrl:(n,a)=>function(e,t,n,a){let{forcePrependBaseUrl:r=!1,absolute:i=!1}=void 0===a?{}:a;if(!n)return n;if(n.startsWith("#"))return n;if(Object(o.b)(n))return n;if(r)return t+n;const c=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+c:c}(t,e,n,a)}}function i(e,t){void 0===t&&(t={});const{withBaseUrl:n}=r();return n(e,t)}},203:function(e,t,n){"use strict";function a(e){return!0===/^(\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!a(e)}n.d(t,"b",(function(){return a})),n.d(t,"a",(function(){return o}))}}]);