6459b84b.a3df04f7.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{163:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return l})),a.d(t,"toc",(function(){return o})),a.d(t,"default",(function(){return s}));var n=a(3),r=(a(0),a(165));a(289),a(167),a(105);const i={id:"install",title:"Installation",hide_title:!0,slug:"/"},l={unversionedId:"getting-started/install",id:"getting-started/install",isDocsHomePage:!1,title:"Installation",description:"Installation",source:"@site/docs/getting-started/installation.mdx",slug:"/",permalink:"/docs/",editUrl:"https://github.com/material-table-core/website/tree/master/docs/getting-started/installation.mdx",version:"current",sidebar:"docs",next:{title:"With @material-ui v5",permalink:"/docs/material-ui-v5"}},o=[{value:"Installation",id:"installation",children:[{value:"yarn",id:"yarn",children:[]},{value:"npm",id:"npm",children:[]}]},{value:"Basic Usage",id:"basic-usage",children:[{value:"TypeScript",id:"typescript",children:[]},{value:"JavaScript",id:"javascript",children:[]}]}],c={toc:o};function s(e){let{components:t,...a}=e;return Object(r.b)("wrapper",Object(n.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(r.b)("h2",{id:"installation"},"Installation"),Object(r.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(r.b)("div",{parentName:"div",className:"admonition-heading"},Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",{parentName:"h5",className:"admonition-icon"},Object(r.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},Object(r.b)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"tip")),Object(r.b)("div",{parentName:"div",className:"admonition-content"},Object(r.b)("p",{parentName:"div"},"Already using ",Object(r.b)("inlineCode",{parentName:"p"},"material-table"),"? After installing ",Object(r.b)("inlineCode",{parentName:"p"},"@material-table/core"),", simply update your imports and you're good to go! "),Object(r.b)("p",{parentName:"div"},Object(r.b)("em",{parentName:"p"},"See ",Object(r.b)("a",{parentName:"em",href:"breaking-changes"},"here")," for more on breaking changes")))),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-diff"},"- import MaterialTable from 'material-table';\n+ import MaterialTable from '@material-table/core';\n")),Object(r.b)("h3",{id:"yarn"},"yarn"),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-javascript"},"yarn add @material-ui/core\nyarn add @material-table/core\n")),Object(r.b)("h3",{id:"npm"},"npm"),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-javascript"},"npm install @material-ui/core\nnpm install @material-table/core\n")),Object(r.b)("h2",{id:"basic-usage"},"Basic Usage"),Object(r.b)("p",null,"This basic examples should help get you started."),Object(r.b)("h3",{id:"typescript"},"TypeScript"),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-typescript",metastring:'title="myFirstTable.ts"',title:'"myFirstTable.ts"'},'import React from "react";\nimport MaterialTable, { Column } from "@material-table/core";\n\ninterface IPerson {\n  firstName: string;\n  lastName: string;\n  birthYear: number;\n  availability: boolean;\n}\n\nconst lookup = { true: "Available", false: "Unavailable" };\n\nconst columns: Array<Column<IPerson>> = [\n  { title: "First Name", field: "firstName" },\n  { title: "Last Name", field: "lastName" },\n  { title: "Birth Year", field: "birthYear", type: "numeric" },\n  { title: "Availablity", field: "availability", lookup }\n];\n\nconst data: Array<IPerson> = [\n  { firstName: "Tod", lastName: "Miles", birthYear: 1987, availability: true },\n  { firstName: "Jess", lastName: "Smith", birthYear: 2000, availability: false }\n];\n\nexport const App = () => <MaterialTable columns={columns} data={data} />;\n')),Object(r.b)("h3",{id:"javascript"},"JavaScript"),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-javascript",metastring:'title="myFirstTable.js"',title:'"myFirstTable.js"'},'import React from "react";\nimport MaterialTable, { Column } from "@material-table/core";\n\nconst lookup = { true: "Available", false: "Unavailable" };\n\nconst columns = [\n  { title: "First Name", field: "firstName" },\n  { title: "Last Name", field: "lastName" },\n  { title: "Birth Year", field: "birthYear", type: "numeric" },\n  { title: "Availablity", field: "availability", lookup }\n];\n\nconst data = [\n  { firstName: "Tod", lastName: "Miles", birthYear: 1987, availability: true },\n  { firstName: "Jess", lastName: "Smith", birthYear: 2000, availability: false }\n];\n\nexport const App = () => <MaterialTable columns={columns} data={data} />;\n')))}s.isMDXComponent=!0},165:function(e,t,a){"use strict";a.d(t,"a",(function(){return m})),a.d(t,"b",(function(){return f}));var n=a(0),r=a.n(n);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function o(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?l(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function c(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},m=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},b="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),m=p(a),b=n,d=m["".concat(l,".").concat(b)]||m[b]||u[b]||i;return a?r.a.createElement(d,o(o({ref:t},s),{},{components:a})):r.a.createElement(d,o({ref:t},s))}));function f(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,l=new Array(i);l[0]=d;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o[b]="string"==typeof e?e:n,l[1]=o;for(var s=2;s<i;s++)l[s]=a[s];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},167:function(e,t,a){"use strict";function n(e){var t,a,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(a=n(e[t]))&&(r&&(r+=" "),r+=a);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}t.a=function(){for(var e,t,a=0,r="";a<arguments.length;)(e=arguments[a++])&&(t=n(e))&&(r&&(r+=" "),r+=t);return r}},289:function(e,t,a){"use strict";var n=a(0),r=a(290);t.a=function(){const e=Object(n.useContext)(r.a);if(null==e)throw new Error("`useUserPreferencesContext` is used outside of `Layout` Component.");return e}},290:function(e,t,a){"use strict";var n=a(0);const r=Object(n.createContext)(void 0);t.a=r}}]);