1c176356.584382de.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{165:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),t.d(n,"b",(function(){return O}));var r=t(0),a=t.n(r);function l(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function c(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var b=a.a.createContext({}),d=function(e){var n=a.a.useContext(b),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},u=function(e){var n=d(e.components);return a.a.createElement(b.Provider,{value:n},e.children)},m="mdxType",p={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},s=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,l=e.originalType,o=e.parentName,b=c(e,["components","mdxType","originalType","parentName"]),u=d(t),m=r,s=u["".concat(o,".").concat(m)]||u[m]||p[m]||l;return t?a.a.createElement(s,i(i({ref:n},b),{},{components:t})):a.a.createElement(s,i({ref:n},b))}));function O(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var l=t.length,o=new Array(l);o[0]=s;var i={};for(var c in n)hasOwnProperty.call(n,c)&&(i[c]=n[c]);i.originalType=e,i[m]="string"==typeof e?e:r,o[1]=i;for(var b=2;b<l;b++)o[b]=t[b];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,t)}s.displayName="MDXCreateElement"},84:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return l})),t.d(n,"metadata",(function(){return o})),t.d(n,"toc",(function(){return i})),t.d(n,"default",(function(){return u}));var r=t(3),a=(t(0),t(165));const l={id:"multi",title:"Multi Sorting",hide_title:!0},o={unversionedId:"sort/multi",id:"sort/multi",isDocsHomePage:!1,title:"Multi Sorting",description:"Multi Sorting",source:"@site/demos/sort/multi.mdx",slug:"/sort/multi",permalink:"/demos/sort/multi",version:"current",sidebar:"sidebar",previous:{title:"Basic Sorting",permalink:"/demos/sort/basic"},next:{title:"Header and Cell",permalink:"/demos/style/header-cell"}},i=[{value:"Props",id:"props",children:[]},{value:"Usage",id:"usage",children:[]},{value:"Live Demo",id:"live-demo",children:[]}],c=(b="InfoBannerAboutGlobalVarsInDemos",function(e){return console.warn("Component "+b+" was not imported, exported, or provided by MDXProvider as global scope"),Object(a.b)("div",e)});var b;const d={toc:i};function u(e){let{components:n,...t}=e;return Object(a.b)("wrapper",Object(r.a)({},d,t,{components:n,mdxType:"MDXLayout"}),Object(a.b)("h1",{id:"multi-sorting"},"Multi Sorting"),Object(a.b)("h2",{id:"props"},"Props"),Object(a.b)("table",null,Object(a.b)("thead",{parentName:"table"},Object(a.b)("tr",{parentName:"thead"},Object(a.b)("th",{parentName:"tr",align:null},"Field"),Object(a.b)("th",{parentName:"tr",align:null},"Type"),Object(a.b)("th",{parentName:"tr",align:null},"default"),Object(a.b)("th",{parentName:"tr",align:null},"Description"))),Object(a.b)("tbody",{parentName:"table"},Object(a.b)("tr",{parentName:"tbody"},Object(a.b)("td",{parentName:"tr",align:null},Object(a.b)("inlineCode",{parentName:"td"},"options.defaultOrderByCollection")),Object(a.b)("td",{parentName:"tr",align:null},"{ orderBy: number; orderDirection: 'asc' or 'desc', sortOrder: number }[]"),Object(a.b)("td",{parentName:"tr",align:null},"[]"),Object(a.b)("td",{parentName:"tr",align:null},"The initial sort state")),Object(a.b)("tr",{parentName:"tbody"},Object(a.b)("td",{parentName:"tr",align:null},Object(a.b)("inlineCode",{parentName:"td"},"options.maxColumnSort")),Object(a.b)("td",{parentName:"tr",align:null},"number or 'all_columns'"),Object(a.b)("td",{parentName:"tr",align:null},"1"),Object(a.b)("td",{parentName:"tr",align:null},"Specifies the amount for of columns to be sorted")),Object(a.b)("tr",{parentName:"tbody"},Object(a.b)("td",{parentName:"tr",align:null},Object(a.b)("inlineCode",{parentName:"td"},"column.showColumnSortOrder")),Object(a.b)("td",{parentName:"tr",align:null},"boolean"),Object(a.b)("td",{parentName:"tr",align:null},"false"),Object(a.b)("td",{parentName:"tr",align:null},"Display on sort order in the table header")),Object(a.b)("tr",{parentName:"tbody"},Object(a.b)("td",{parentName:"tr",align:null},Object(a.b)("inlineCode",{parentName:"td"},"column.sortOrderIndicatorStyle")),Object(a.b)("td",{parentName:"tr",align:null},"React.CSSProperties"),Object(a.b)("td",{parentName:"tr",align:null},"undefined"),Object(a.b)("td",{parentName:"tr",align:null},"Style of the order indicator")),Object(a.b)("tr",{parentName:"tbody"},Object(a.b)("td",{parentName:"tr",align:null},Object(a.b)("inlineCode",{parentName:"td"},"column.onOrderCollectionChange")),Object(a.b)("td",{parentName:"tr",align:null},"(orderByCollection: OrderByCollection[]) => void;"),Object(a.b)("td",{parentName:"tr",align:null},"undefined"),Object(a.b)("td",{parentName:"tr",align:null},"The callback, once the collection changes")),Object(a.b)("tr",{parentName:"tbody"},Object(a.b)("td",{parentName:"tr",align:null},Object(a.b)("inlineCode",{parentName:"td"},"column.orderByCollection")),Object(a.b)("td",{parentName:"tr",align:null},"{ orderBy: number; orderDirection: 'asc' or 'desc', sortOrder: number }[]"),Object(a.b)("td",{parentName:"tr",align:null},"[]"),Object(a.b)("td",{parentName:"tr",align:null},"Override the current sort state")))),Object(a.b)("h2",{id:"usage"},"Usage"),Object(a.b)("pre",null,Object(a.b)("code",{parentName:"pre",className:"language-jsx"},'import MaterialTable from "@material-table/core";\n\n<MaterialTable\n  // ...\n  options={{\n    selection: false,\n    maxColumnSort: 2,\n    defaultOrderByCollection: orderCollection,\n    showColumnSortOrder: true,\n  }}\n  onOrderCollectionChange={onOrderCollectionChange}\n  columns={[\n    {\n      title: "Name",\n      field: "name",\n      sorting: false,\n    },\n    {\n      title: "Surname",\n      field: "surname",\n    },\n    {\n      title: "Birth Year",\n      field: "birthYear",\n    },\n    {\n      title: "Birth Place",\n      field: "birthCity",\n      lookup: {\n        34: "\u0130stanbul",\n        63: "\u015eanl\u0131urfa",\n      },\n    },\n  ]}\n/>;\n')),Object(a.b)("h2",{id:"live-demo"},"Live Demo"),Object(a.b)(c,{mdxType:"InfoBannerAboutGlobalVarsInDemos"}),Object(a.b)("pre",null,Object(a.b)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},'function MultiSortingDemo() {\n  const orderCollection = [\n    { orderBy: 1, orderDirection: "asc", sortOrder: 1 },\n    { orderBy: 2, orderDirection: "desc", sortOrder: 2 },\n  ];\n\n  const onOrderCollectionChange = (orderByCollection) => {\n    console.log("onOrderCollectionChange ===>", orderByCollection);\n  };\n  return (\n    <MaterialTable\n      data={[\n        {\n          name: "Mehmet",\n          surname: "Baran",\n          birthYear: 1987,\n          birthCity: 63,\n        },\n        {\n          name: "Zerya Bet\xfcl",\n          surname: "Baran",\n          birthYear: 2017,\n          birthCity: 34,\n        },\n      ]}\n      options={{\n        selection: false,\n        maxColumnSort: 2,\n        defaultOrderByCollection: orderCollection,\n        showColumnSortOrder: true,\n      }}\n      onOrderCollectionChange={onOrderCollectionChange}\n      columns={[\n        {\n          title: "Name",\n          field: "name",\n          /**\n           * remove sorting on specific column\n           */\n          sorting: false,\n        },\n        {\n          title: "Surname",\n          field: "surname",\n        },\n        {\n          title: "Birth Year",\n          field: "birthYear",\n          type: "numeric",\n        },\n        {\n          title: "Birth Place",\n          field: "birthCity",\n          lookup: {\n            34: "\u0130stanbul",\n            63: "\u015eanl\u0131urfa",\n          },\n        },\n      ]}\n    />\n  );\n}\n')))}u.isMDXComponent=!0}}]);