(this["webpackJsonpmaterial-app"]=this["webpackJsonpmaterial-app"]||[]).push([[21],{4057:function(e,a,t){"use strict";t.r(a);var i=t(5),r=t(1),s=t.n(r),n=t(11),c=t(15),d=t(3710),l=t(3711),m=t(2636),o=t(3689),b=t(227),j=t(179),h=t(3715),f=t(426),N=t(48),g=t(0);const u=Object(i.e)(d.a)(N.c),O=Object(i.e)(l.a)(N.c),p=Object(i.e)(m.a)(N.c),x=Object(i.e)(o.a)(N.c),w=Object(i.e)(b.a)(N.c),y=[{field:"id",headerName:"ID",width:150},{field:"firstName",headerName:"First name",width:200,editable:!0},{field:"lastName",headerName:"Last name",width:200,editable:!0},{field:"age",headerName:"Age",type:"number",width:150,editable:!0},{field:"fullName",headerName:"Full name",description:"This column has a value getter and is not sortable.",sortable:!1,width:250,valueGetter:e=>"".concat(e.getValue(e.id,"firstName")||""," ").concat(e.getValue(e.id,"lastName")||"")}],v=[{id:1,lastName:"Snow",firstName:"Jon",age:35},{id:2,lastName:"Lannister",firstName:"Cersei",age:42},{id:3,lastName:"Lannister",firstName:"Jaime",age:45},{id:4,lastName:"Stark",firstName:"Arya",age:16},{id:5,lastName:"Targaryen",firstName:"Daenerys",age:null},{id:6,lastName:"Melisandre",firstName:null,age:150},{id:7,lastName:"Clifford",firstName:"Ferrara",age:44},{id:8,lastName:"Frances",firstName:"Rossini",age:36},{id:9,lastName:"Roxie",firstName:"Harvey",age:65}];function D(){return Object(g.jsxs)(u,{mb:6,children:[Object(g.jsxs)(O,{pb:1,children:[Object(g.jsx)(j.a,{variant:"h6",gutterBottom:!0,children:"Data Grid"}),Object(g.jsxs)(j.a,{variant:"body2",gutterBottom:!0,children:["A fast and extendable data table and data grid for React, made by Material-UI."," ",Object(g.jsx)(h.a,{href:"https://material-ui.com/components/data-grid/",target:"_blank",rel:"noreferrer noopener",children:"Official docs"}),"."]})]}),Object(g.jsx)(w,{children:Object(g.jsx)("div",{style:{height:400,width:"100%"},children:Object(g.jsx)(f.a,{rowsPerPageOptions:[5,10,25],rows:v,columns:y,pageSize:5,checkboxSelection:!0})})})]})}a.default=function(){return Object(g.jsxs)(s.a.Fragment,{children:[Object(g.jsx)(c.a,{title:"Data Grid"}),Object(g.jsx)(j.a,{variant:"h3",gutterBottom:!0,display:"inline",children:"Data Grid"}),Object(g.jsxs)(x,{"aria-label":"Breadcrumb",mt:2,children:[Object(g.jsx)(h.a,{component:n.c,to:"/",children:"Dashboard"}),Object(g.jsx)(h.a,{component:n.c,to:"/",children:"Tables"}),Object(g.jsx)(j.a,{children:"Data Grid"})]}),Object(g.jsx)(p,{my:6}),Object(g.jsx)(D,{})]})}}}]);
//# sourceMappingURL=21.36f2bb3e.chunk.js.map