%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[40],{1130:function(e,n,a){"use strict";a.d(n,"a",(function(){return P}));var t=a(118),l=a(1100),r=a(1109),o=a(1090),i=a(1117),s=a(1119),c=a(5),d=a(0),b=a(1024),m=a(551),h=a(1087),p=a(1099),u=a(11),g=a(370),j=a(371),T=a(1131),f=a.n(T),x=a(1);const w=Object(b.a)({productionPrefix:"iframe-"});class C extends d.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(g.a)({...Object(m.a)(),plugins:[...Object(m.a)().plugins,Object(j.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(x.jsxs)(x.Fragment,{children:[Object(x.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(x.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:a}=this.props;return Object(x.jsx)(f.a,{head:this.renderHead(),ref:this.handleRef,className:Object(c.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(x.jsx)(h.b,{jss:this.state.jss,generateClassName:w,sheetsManager:this.state.sheetsManager,children:Object(x.jsx)(p.a,{theme:a,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var y=Object(u.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(C);function O(e){const[n,a]=Object(d.useState)(e.currentTabIndex),{component:b,raw:m,iframe:h,className:p}=e;return Object(x.jsxs)(r.a,{className:Object(c.a)(p,"shadow"),children:[Object(x.jsx)(l.a,{position:"static",color:"default",className:"shadow-0",children:Object(x.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){a(n)},children:[b&&Object(x.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(x.jsx)(o.a,{children:"remove_red_eye"})}),m&&Object(x.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(x.jsx)(o.a,{children:"code"})})]})}),Object(x.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(x.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:b&&(h?Object(x.jsx)(y,{children:Object(x.jsx)(b,{})}):Object(x.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(x.jsx)(b,{})}))}),Object(x.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:m&&Object(x.jsx)("div",{className:"flex flex-1",children:Object(x.jsx)(t.a,{component:"pre",className:"language-javascript w-full",children:m.default})})})]})]})}O.defaultProps={currentTabIndex:0};var P=O},2286:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return u}));a(0);var t=a(1072),l=a(1220),r=a(1223),o=a(1199),i=a(1495),s=a(1221),c=a(1222),d=a(193),b=a(1);const m=Object(t.a)({table:{minWidth:650}});function h(e,n,a,t,l){return{name:e,calories:n,fat:a,carbs:t,protein:l}}const p=[h("Frozen yoghurt",159,6,24,4),h("Ice cream sandwich",237,9,37,4.3),h("Eclair",262,16,24,6),h("Cupcake",305,3.7,67,4.3),h("Gingerbread",356,16,49,3.9)];function u(){const e=m();return Object(b.jsx)(i.a,{component:d.a,children:Object(b.jsxs)(l.a,{className:e.table,"aria-label":"simple table",children:[Object(b.jsx)(s.a,{children:Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{children:"Dessert (100g serving)"}),Object(b.jsx)(o.a,{align:"right",children:"Calories"}),Object(b.jsx)(o.a,{align:"right",children:"Fat\xa0(g)"}),Object(b.jsx)(o.a,{align:"right",children:"Carbs\xa0(g)"}),Object(b.jsx)(o.a,{align:"right",children:"Protein\xa0(g)"})]})}),Object(b.jsx)(r.a,{children:p.map((e=>Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{component:"th",scope:"row",children:e.name}),Object(b.jsx)(o.a,{align:"right",children:e.calories}),Object(b.jsx)(o.a,{align:"right",children:e.fat}),Object(b.jsx)(o.a,{align:"right",children:e.carbs}),Object(b.jsx)(o.a,{align:"right",children:e.protein})]},e.name)))})]})})}},2287:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\nimport Paper from '@material-ui/core/Paper';\n\nconst useStyles = makeStyles({\n table: {\n minWidth: 650,\n },\n});\n\nfunction createData(name, calories, fat, carbs, protein) {\n return { name, calories, fat, carbs, protein };\n}\n\nconst rows = [\n createData('Frozen yoghurt', 159, 6.0, 24, 4.0),\n createData('Ice cream sandwich', 237, 9.0, 37, 4.3),\n createData('Eclair', 262, 16.0, 24, 6.0),\n createData('Cupcake', 305, 3.7, 67, 4.3),\n createData('Gingerbread', 356, 16.0, 49, 3.9),\n];\n\nexport default function BasicTable() {\n const classes = useStyles();\n\n return (\n <TableContainer component={Paper}>\n <Table className={classes.table} aria-label=\"simple table\">\n <TableHead>\n <TableRow>\n <TableCell>Dessert (100g serving)</TableCell>\n <TableCell align=\"right\">Calories</TableCell>\n <TableCell align=\"right\">Fat (g)</TableCell>\n <TableCell align=\"right\">Carbs (g)</TableCell>\n <TableCell align=\"right\">Protein (g)</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {rows.map((row) => (\n <TableRow key={row.name}>\n <TableCell component=\"th\" scope=\"row\">\n {row.name}\n </TableCell>\n <TableCell align=\"right\">{row.calories}</TableCell>\n <TableCell align=\"right\">{row.fat}</TableCell>\n <TableCell align=\"right\">{row.carbs}</TableCell>\n <TableCell align=\"right\">{row.protein}</TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n );\n}\n"},2288:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return i}));a(0);var t=a(2289),l=a(1);const r=[{field:"id",headerName:"ID",width:90},{field:"firstName",headerName:"First name",width:150,editable:!0},{field:"lastName",headerName:"Last name",width:150,editable:!0},{field:"age",headerName:"Age",type:"number",width:110,editable:!0},{field:"fullName",headerName:"Full name",description:"This column has a value getter and is not sortable.",sortable:!1,width:160,valueGetter:e=>"".concat(e.getValue(e.id,"firstName")||""," ").concat(e.getValue(e.id,"lastName")||"")}],o=[{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 i(){return Object(l.jsx)("div",{style:{height:400,width:"100%"},children:Object(l.jsx)(t.a,{rows:o,columns:r,pageSize:5,checkboxSelection:!0,disableSelectionOnClick:!0})})}},2295:function(e,n,a){"use strict";a.r(n),n.default="import * as React from 'react';\nimport { DataGrid } from '@material-ui/data-grid';\n\nconst columns = [\n { field: 'id', headerName: 'ID', width: 90 },\n {\n field: 'firstName',\n headerName: 'First name',\n width: 150,\n editable: true,\n },\n {\n field: 'lastName',\n headerName: 'Last name',\n width: 150,\n editable: true,\n },\n {\n field: 'age',\n headerName: 'Age',\n type: 'number',\n width: 110,\n editable: true,\n },\n {\n field: 'fullName',\n headerName: 'Full name',\n description: 'This column has a value getter and is not sortable.',\n sortable: false,\n width: 160,\n valueGetter: (params) =>\n `${params.getValue(params.id, 'firstName') || ''} ${\n params.getValue(params.id, 'lastName') || ''\n }`,\n },\n];\n\nconst rows = [\n { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },\n { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },\n { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },\n { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },\n { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },\n { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },\n { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },\n { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },\n { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },\n];\n\nexport default function DataTable() {\n return (\n <div style={{ height: 400, width: '100%' }}>\n <DataGrid\n rows={rows}\n columns={columns}\n pageSize={5}\n checkboxSelection\n disableSelectionOnClick\n />\n </div>\n );\n}\n"},2296:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return u}));a(0);var t=a(1072),l=a(1220),r=a(1223),o=a(1199),i=a(1495),s=a(1221),c=a(1222),d=a(193),b=a(1);const m=Object(t.a)({table:{minWidth:650}});function h(e,n,a,t,l){return{name:e,calories:n,fat:a,carbs:t,protein:l}}const p=[h("Frozen yoghurt",159,6,24,4),h("Ice cream sandwich",237,9,37,4.3),h("Eclair",262,16,24,6),h("Cupcake",305,3.7,67,4.3),h("Gingerbread",356,16,49,3.9)];function u(){const e=m();return Object(b.jsx)(i.a,{component:d.a,children:Object(b.jsxs)(l.a,{className:e.table,size:"small","aria-label":"a dense table",children:[Object(b.jsx)(s.a,{children:Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{children:"Dessert (100g serving)"}),Object(b.jsx)(o.a,{align:"right",children:"Calories"}),Object(b.jsx)(o.a,{align:"right",children:"Fat\xa0(g)"}),Object(b.jsx)(o.a,{align:"right",children:"Carbs\xa0(g)"}),Object(b.jsx)(o.a,{align:"right",children:"Protein\xa0(g)"})]})}),Object(b.jsx)(r.a,{children:p.map((e=>Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{component:"th",scope:"row",children:e.name}),Object(b.jsx)(o.a,{align:"right",children:e.calories}),Object(b.jsx)(o.a,{align:"right",children:e.fat}),Object(b.jsx)(o.a,{align:"right",children:e.carbs}),Object(b.jsx)(o.a,{align:"right",children:e.protein})]},e.name)))})]})})}},2297:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\nimport Paper from '@material-ui/core/Paper';\n\nconst useStyles = makeStyles({\n table: {\n minWidth: 650,\n },\n});\n\nfunction createData(name, calories, fat, carbs, protein) {\n return { name, calories, fat, carbs, protein };\n}\n\nconst rows = [\n createData('Frozen yoghurt', 159, 6.0, 24, 4.0),\n createData('Ice cream sandwich', 237, 9.0, 37, 4.3),\n createData('Eclair', 262, 16.0, 24, 6.0),\n createData('Cupcake', 305, 3.7, 67, 4.3),\n createData('Gingerbread', 356, 16.0, 49, 3.9),\n];\n\nexport default function DenseTable() {\n const classes = useStyles();\n\n return (\n <TableContainer component={Paper}>\n <Table className={classes.table} size=\"small\" aria-label=\"a dense table\">\n <TableHead>\n <TableRow>\n <TableCell>Dessert (100g serving)</TableCell>\n <TableCell align=\"right\">Calories</TableCell>\n <TableCell align=\"right\">Fat (g)</TableCell>\n <TableCell align=\"right\">Carbs (g)</TableCell>\n <TableCell align=\"right\">Protein (g)</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {rows.map((row) => (\n <TableRow key={row.name}>\n <TableCell component=\"th\" scope=\"row\">\n {row.name}\n </TableCell>\n <TableCell align=\"right\">{row.calories}</TableCell>\n <TableCell align=\"right\">{row.fat}</TableCell>\n <TableCell align=\"right\">{row.carbs}</TableCell>\n <TableCell align=\"right\">{row.protein}</TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n );\n}\n"},2298:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return K}));var t=a(0),l=a.n(t),r=a(5),o=a(1072),i=a(31),s=a(1220),c=a(1223),d=a(1199),b=a(1495),m=a(1221),h=a(2511),p=a(1222),u=a(2715),g=a(1101),j=a(194),T=a(193),f=a(1165),x=a(1028),w=a(1097),C=a(1094),y=a(1095),O=a(1190),P=a.n(O),R=a(2299),S=a.n(R),v=a(1);function N(e,n,a,t,l){return{name:e,calories:n,fat:a,carbs:t,protein:l}}const k=[N("Cupcake",305,3.7,67,4.3),N("Donut",452,25,51,4.9),N("Eclair",262,16,24,6),N("Frozen yoghurt",159,6,24,4),N("Gingerbread",356,16,49,3.9),N("Honeycomb",408,3.2,87,6.5),N("Ice cream sandwich",237,9,37,4.3),N("Jelly Bean",375,0,94,0),N("KitKat",518,26,65,7),N("Lollipop",392,.2,98,0),N("Marshmallow",318,0,81,2),N("Nougat",360,19,9,37),N("Oreo",437,18,63,4)];function D(e,n,a){return n[a]<e[a]?-1:n[a]>e[a]?1:0}function B(e,n){return"desc"===e?(e,a)=>D(e,a,n):(e,a)=>-D(e,a,n)}function I(e,n){const a=e.map(((e,n)=>[e,n]));return a.sort(((e,a)=>{const t=n(e[0],a[0]);return 0!==t?t:e[1]-a[1]})),a.map((e=>e[0]))}const H=[{id:"name",numeric:!1,disablePadding:!0,label:"Dessert\xa0(100g serving)"},{id:"calories",numeric:!0,disablePadding:!1,label:"Calories"},{id:"fat",numeric:!0,disablePadding:!1,label:"Fat\xa0(g)"},{id:"carbs",numeric:!0,disablePadding:!1,label:"Carbs\xa0(g)"},{id:"protein",numeric:!0,disablePadding:!1,label:"Protein\xa0(g)"}];function A(e){const{classes:n,onSelectAllClick:a,order:t,orderBy:l,numSelected:r,rowCount:o,onRequestSort:i}=e;return Object(v.jsx)(m.a,{children:Object(v.jsxs)(p.a,{children:[Object(v.jsx)(d.a,{padding:"checkbox",children:Object(v.jsx)(f.a,{indeterminate:r>0&&r<o,checked:o>0&&r===o,onChange:a,inputProps:{"aria-label":"select all desserts"}})}),H.map((e=>{return Object(v.jsx)(d.a,{align:e.numeric?"right":"left",padding:e.disablePadding?"none":"normal",sortDirection:l===e.id&&t,children:Object(v.jsxs)(u.a,{active:l===e.id,direction:l===e.id?t:"asc",onClick:(a=e.id,e=>{i(e,a)}),children:[e.label,l===e.id?Object(v.jsx)("span",{className:n.visuallyHidden,children:"desc"===t?"sorted descending":"sorted ascending"}):null]})},e.id);var a}))]})})}const F=Object(o.a)((e=>({root:{paddingLeft:e.spacing(2),paddingRight:e.spacing(1)},highlight:"light"===e.palette.type?{color:e.palette.secondary.main,backgroundColor:Object(i.j)(e.palette.secondary.light,.85)}:{color:e.palette.text.primary,backgroundColor:e.palette.secondary.dark},title:{flex:"1 1 100%"}}))),z=e=>{const n=F(),{numSelected:a}=e;return Object(v.jsxs)(g.a,{className:Object(r.a)(n.root,{[n.highlight]:a>0}),children:[a>0?Object(v.jsxs)(j.a,{className:n.title,color:"inherit",variant:"subtitle1",component:"div",children:[a," selected"]}):Object(v.jsx)(j.a,{className:n.title,variant:"h6",id:"tableTitle",component:"div",children:"Nutrition"}),a>0?Object(v.jsx)(w.a,{title:"Delete",children:Object(v.jsx)(x.a,{"aria-label":"delete",children:Object(v.jsx)(P.a,{})})}):Object(v.jsx)(w.a,{title:"Filter list",children:Object(v.jsx)(x.a,{"aria-label":"filter list",children:Object(v.jsx)(S.a,{})})})]})},q=Object(o.a)((e=>({root:{width:"100%"},paper:{width:"100%",marginBottom:e.spacing(2)},table:{minWidth:750},visuallyHidden:{border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",top:20,width:1}})));function K(){const e=q(),[n,a]=l.a.useState("asc"),[t,r]=l.a.useState("calories"),[o,i]=l.a.useState([]),[m,u]=l.a.useState(0),[g,j]=l.a.useState(!1),[x,w]=l.a.useState(5),O=x-Math.min(x,k.length-m*x);return Object(v.jsxs)("div",{className:e.root,children:[Object(v.jsxs)(T.a,{className:e.paper,children:[Object(v.jsx)(z,{numSelected:o.length}),Object(v.jsx)(b.a,{children:Object(v.jsxs)(s.a,{className:e.table,"aria-labelledby":"tableTitle",size:g?"small":"medium","aria-label":"enhanced table",children:[Object(v.jsx)(A,{classes:e,numSelected:o.length,order:n,orderBy:t,onSelectAllClick:e=>{if(e.target.checked){const e=k.map((e=>e.name));i(e)}else i([])},onRequestSort:(e,l)=>{a(t===l&&"asc"===n?"desc":"asc"),r(l)},rowCount:k.length}),Object(v.jsxs)(c.a,{children:[I(k,B(n,t)).slice(m*x,m*x+x).map(((e,n)=>{const a=(t=e.name,-1!==o.indexOf(t));var t;const l="enhanced-table-checkbox-".concat(n);return Object(v.jsxs)(p.a,{hover:!0,onClick:n=>((e,n)=>{const a=o.indexOf(n);let t=[];-1===a?t=t.concat(o,n):0===a?t=t.concat(o.slice(1)):a===o.length-1?t=t.concat(o.slice(0,-1)):a>0&&(t=t.concat(o.slice(0,a),o.slice(a+1))),i(t)})(0,e.name),role:"checkbox","aria-checked":a,tabIndex:-1,selected:a,children:[Object(v.jsx)(d.a,{padding:"checkbox",children:Object(v.jsx)(f.a,{checked:a,inputProps:{"aria-labelledby":l}})}),Object(v.jsx)(d.a,{component:"th",id:l,scope:"row",padding:"none",children:e.name}),Object(v.jsx)(d.a,{align:"right",children:e.calories}),Object(v.jsx)(d.a,{align:"right",children:e.fat}),Object(v.jsx)(d.a,{align:"right",children:e.carbs}),Object(v.jsx)(d.a,{align:"right",children:e.protein})]},e.name)})),O>0&&Object(v.jsx)(p.a,{style:{height:(g?33:53)*O},children:Object(v.jsx)(d.a,{colSpan:6})})]})]})}),Object(v.jsx)(h.a,{rowsPerPageOptions:[5,10,25],component:"div",count:k.length,rowsPerPage:x,page:m,onPageChange:(e,n)=>{u(n)},onRowsPerPageChange:e=>{w(parseInt(e.target.value,10)),u(0)}})]}),Object(v.jsx)(C.a,{control:Object(v.jsx)(y.a,{checked:g,onChange:e=>{j(e.target.checked)}}),label:"Dense padding"})]})}},2300:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { lighten, makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport Paper from '@material-ui/core/Paper';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Switch from '@material-ui/core/Switch';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport FilterListIcon from '@material-ui/icons/FilterList';\n\nfunction createData(name, calories, fat, carbs, protein) {\n return { name, calories, fat, carbs, protein };\n}\n\nconst rows = [\n createData('Cupcake', 305, 3.7, 67, 4.3),\n createData('Donut', 452, 25.0, 51, 4.9),\n createData('Eclair', 262, 16.0, 24, 6.0),\n createData('Frozen yoghurt', 159, 6.0, 24, 4.0),\n createData('Gingerbread', 356, 16.0, 49, 3.9),\n createData('Honeycomb', 408, 3.2, 87, 6.5),\n createData('Ice cream sandwich', 237, 9.0, 37, 4.3),\n createData('Jelly Bean', 375, 0.0, 94, 0.0),\n createData('KitKat', 518, 26.0, 65, 7.0),\n createData('Lollipop', 392, 0.2, 98, 0.0),\n createData('Marshmallow', 318, 0, 81, 2.0),\n createData('Nougat', 360, 19.0, 9, 37.0),\n createData('Oreo', 437, 18.0, 63, 4.0),\n];\n\nfunction descendingComparator(a, b, orderBy) {\n if (b[orderBy] < a[orderBy]) {\n return -1;\n }\n if (b[orderBy] > a[orderBy]) {\n return 1;\n }\n return 0;\n}\n\nfunction getComparator(order, orderBy) {\n return order === 'desc'\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy);\n}\n\nfunction stableSort(array, comparator) {\n const stabilizedThis = array.map((el, index) => [el, index]);\n stabilizedThis.sort((a, b) => {\n const order = comparator(a[0], b[0]);\n if (order !== 0) return order;\n return a[1] - b[1];\n });\n return stabilizedThis.map((el) => el[0]);\n}\n\nconst headCells = [\n { id: 'name', numeric: false, disablePadding: true, label: 'Dessert\xa0(100g serving)' },\n { id: 'calories', numeric: true, disablePadding: false, label: 'Calories' },\n { id: 'fat', numeric: true, disablePadding: false, label: 'Fat\xa0(g)' },\n { id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs\xa0(g)' },\n { id: 'protein', numeric: true, disablePadding: false, label: 'Protein\xa0(g)' },\n];\n\nfunction EnhancedTableHead(props) {\n const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;\n const createSortHandler = (property) => (event) => {\n onRequestSort(event, property);\n };\n\n return (\n <TableHead>\n <TableRow>\n <TableCell padding=\"checkbox\">\n <Checkbox\n indeterminate={numSelected > 0 && numSelected < rowCount}\n checked={rowCount > 0 && numSelected === rowCount}\n onChange={onSelectAllClick}\n inputProps={{ 'aria-label': 'select all desserts' }}\n />\n </TableCell>\n {headCells.map((headCell) => (\n <TableCell\n key={headCell.id}\n align={headCell.numeric ? 'right' : 'left'}\n padding={headCell.disablePadding ? 'none' : 'normal'}\n sortDirection={orderBy === headCell.id ? order : false}\n >\n <TableSortLabel\n active={orderBy === headCell.id}\n direction={orderBy === headCell.id ? order : 'asc'}\n onClick={createSortHandler(headCell.id)}\n >\n {headCell.label}\n {orderBy === headCell.id ? (\n <span className={classes.visuallyHidden}>\n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\n </span>\n ) : null}\n </TableSortLabel>\n </TableCell>\n ))}\n </TableRow>\n </TableHead>\n );\n}\n\nEnhancedTableHead.propTypes = {\n classes: PropTypes.object.isRequired,\n numSelected: PropTypes.number.isRequired,\n onRequestSort: PropTypes.func.isRequired,\n onSelectAllClick: PropTypes.func.isRequired,\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\n orderBy: PropTypes.string.isRequired,\n rowCount: PropTypes.number.isRequired,\n};\n\nconst useToolbarStyles = makeStyles((theme) => ({\n root: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n },\n highlight:\n theme.palette.type === 'light'\n ? {\n color: theme.palette.secondary.main,\n backgroundColor: lighten(theme.palette.secondary.light, 0.85),\n }\n : {\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.secondary.dark,\n },\n title: {\n flex: '1 1 100%',\n },\n}));\n\nconst EnhancedTableToolbar = (props) => {\n const classes = useToolbarStyles();\n const { numSelected } = props;\n\n return (\n <Toolbar\n className={clsx(classes.root, {\n [classes.highlight]: numSelected > 0,\n })}\n >\n {numSelected > 0 ? (\n <Typography className={classes.title} color=\"inherit\" variant=\"subtitle1\" component=\"div\">\n {numSelected} selected\n </Typography>\n ) : (\n <Typography className={classes.title} variant=\"h6\" id=\"tableTitle\" component=\"div\">\n Nutrition\n </Typography>\n )}\n\n {numSelected > 0 ? (\n <Tooltip title=\"Delete\">\n <IconButton aria-label=\"delete\">\n <DeleteIcon />\n </IconButton>\n </Tooltip>\n ) : (\n <Tooltip title=\"Filter list\">\n <IconButton aria-label=\"filter list\">\n <FilterListIcon />\n </IconButton>\n </Tooltip>\n )}\n </Toolbar>\n );\n};\n\nEnhancedTableToolbar.propTypes = {\n numSelected: PropTypes.number.isRequired,\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n paper: {\n width: '100%',\n marginBottom: theme.spacing(2),\n },\n table: {\n minWidth: 750,\n },\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1,\n },\n}));\n\nexport default function EnhancedTable() {\n const classes = useStyles();\n const [order, setOrder] = React.useState('asc');\n const [orderBy, setOrderBy] = React.useState('calories');\n const [selected, setSelected] = React.useState([]);\n const [page, setPage] = React.useState(0);\n const [dense, setDense] = React.useState(false);\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\n\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === 'asc';\n setOrder(isAsc ? 'desc' : 'asc');\n setOrderBy(property);\n };\n\n const handleSelectAllClick = (event) => {\n if (event.target.checked) {\n const newSelecteds = rows.map((n) => n.name);\n setSelected(newSelecteds);\n return;\n }\n setSelected([]);\n };\n\n const handleClick = (event, name) => {\n const selectedIndex = selected.indexOf(name);\n let newSelected = [];\n\n if (selectedIndex === -1) {\n newSelected = newSelected.concat(selected, name);\n } else if (selectedIndex === 0) {\n newSelected = newSelected.concat(selected.slice(1));\n } else if (selectedIndex === selected.length - 1) {\n newSelected = newSelected.concat(selected.slice(0, -1));\n } else if (selectedIndex > 0) {\n newSelected = newSelected.concat(\n selected.slice(0, selectedIndex),\n selected.slice(selectedIndex + 1),\n );\n }\n\n setSelected(newSelected);\n };\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n const handleChangeDense = (event) => {\n setDense(event.target.checked);\n };\n\n const isSelected = (name) => selected.indexOf(name) !== -1;\n\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);\n\n return (\n <div className={classes.root}>\n <Paper className={classes.paper}>\n <EnhancedTableToolbar numSelected={selected.length} />\n <TableContainer>\n <Table\n className={classes.table}\n aria-labelledby=\"tableTitle\"\n size={dense ? 'small' : 'medium'}\n aria-label=\"enhanced table\"\n >\n <EnhancedTableHead\n classes={classes}\n numSelected={selected.length}\n order={order}\n orderBy={orderBy}\n onSelectAllClick={handleSelectAllClick}\n onRequestSort={handleRequestSort}\n rowCount={rows.length}\n />\n <TableBody>\n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n <TableRow\n hover\n onClick={(event) => handleClick(event, row.name)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.name}\n selected={isItemSelected}\n >\n <TableCell padding=\"checkbox\">\n <Checkbox\n checked={isItemSelected}\n inputProps={{ 'aria-labelledby': labelId }}\n />\n </TableCell>\n <TableCell component=\"th\" id={labelId} scope=\"row\" padding=\"none\">\n {row.name}\n </TableCell>\n <TableCell align=\"right\">{row.calories}</TableCell>\n <TableCell align=\"right\">{row.fat}</TableCell>\n <TableCell align=\"right\">{row.carbs}</TableCell>\n <TableCell align=\"right\">{row.protein}</TableCell>\n </TableRow>\n );\n })}\n {emptyRows > 0 && (\n <TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>\n <TableCell colSpan={6} />\n </TableRow>\n )}\n </TableBody>\n </Table>\n </TableContainer>\n <TablePagination\n rowsPerPageOptions={[5, 10, 25]}\n component=\"div\"\n count={rows.length}\n rowsPerPage={rowsPerPage}\n page={page}\n onPageChange={handleChangePage}\n onRowsPerPageChange={handleChangeRowsPerPage}\n />\n </Paper>\n <FormControlLabel\n control={<Switch checked={dense} onChange={handleChangeDense} />}\n label=\"Dense padding\"\n />\n </div>\n );\n}\n"},2301:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return T}));a(0);var t=a(11),l=a(1072),r=a(1220),o=a(1223),i=a(1199),s=a(1495),c=a(1221),d=a(1222),b=a(193),m=a(1);const h=Object(t.a)((e=>({head:{backgroundColor:e.palette.common.black,color:e.palette.common.white},body:{fontSize:14}})))(i.a),p=Object(t.a)((e=>({root:{"&:nth-of-type(odd)":{backgroundColor:e.palette.action.hover}}})))(d.a);function u(e,n,a,t,l){return{name:e,calories:n,fat:a,carbs:t,protein:l}}const g=[u("Frozen yoghurt",159,6,24,4),u("Ice cream sandwich",237,9,37,4.3),u("Eclair",262,16,24,6),u("Cupcake",305,3.7,67,4.3),u("Gingerbread",356,16,49,3.9)],j=Object(l.a)({table:{minWidth:700}});function T(){const e=j();return Object(m.jsx)(s.a,{component:b.a,children:Object(m.jsxs)(r.a,{className:e.table,"aria-label":"customized table",children:[Object(m.jsx)(c.a,{children:Object(m.jsxs)(d.a,{children:[Object(m.jsx)(h,{children:"Dessert (100g serving)"}),Object(m.jsx)(h,{align:"right",children:"Calories"}),Object(m.jsx)(h,{align:"right",children:"Fat\xa0(g)"}),Object(m.jsx)(h,{align:"right",children:"Carbs\xa0(g)"}),Object(m.jsx)(h,{align:"right",children:"Protein\xa0(g)"})]})}),Object(m.jsx)(o.a,{children:g.map((e=>Object(m.jsxs)(p,{children:[Object(m.jsx)(h,{component:"th",scope:"row",children:e.name}),Object(m.jsx)(h,{align:"right",children:e.calories}),Object(m.jsx)(h,{align:"right",children:e.fat}),Object(m.jsx)(h,{align:"right",children:e.carbs}),Object(m.jsx)(h,{align:"right",children:e.protein})]},e.name)))})]})})}},2302:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\nimport Paper from '@material-ui/core/Paper';\n\nconst StyledTableCell = withStyles((theme) => ({\n head: {\n backgroundColor: theme.palette.common.black,\n color: theme.palette.common.white,\n },\n body: {\n fontSize: 14,\n },\n}))(TableCell);\n\nconst StyledTableRow = withStyles((theme) => ({\n root: {\n '&:nth-of-type(odd)': {\n backgroundColor: theme.palette.action.hover,\n },\n },\n}))(TableRow);\n\nfunction createData(name, calories, fat, carbs, protein) {\n return { name, calories, fat, carbs, protein };\n}\n\nconst rows = [\n createData('Frozen yoghurt', 159, 6.0, 24, 4.0),\n createData('Ice cream sandwich', 237, 9.0, 37, 4.3),\n createData('Eclair', 262, 16.0, 24, 6.0),\n createData('Cupcake', 305, 3.7, 67, 4.3),\n createData('Gingerbread', 356, 16.0, 49, 3.9),\n];\n\nconst useStyles = makeStyles({\n table: {\n minWidth: 700,\n },\n});\n\nexport default function CustomizedTables() {\n const classes = useStyles();\n\n return (\n <TableContainer component={Paper}>\n <Table className={classes.table} aria-label=\"customized table\">\n <TableHead>\n <TableRow>\n <StyledTableCell>Dessert (100g serving)</StyledTableCell>\n <StyledTableCell align=\"right\">Calories</StyledTableCell>\n <StyledTableCell align=\"right\">Fat (g)</StyledTableCell>\n <StyledTableCell align=\"right\">Carbs (g)</StyledTableCell>\n <StyledTableCell align=\"right\">Protein (g)</StyledTableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {rows.map((row) => (\n <StyledTableRow key={row.name}>\n <StyledTableCell component=\"th\" scope=\"row\">\n {row.name}\n </StyledTableCell>\n <StyledTableCell align=\"right\">{row.calories}</StyledTableCell>\n <StyledTableCell align=\"right\">{row.fat}</StyledTableCell>\n <StyledTableCell align=\"right\">{row.carbs}</StyledTableCell>\n <StyledTableCell align=\"right\">{row.protein}</StyledTableCell>\n </StyledTableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n );\n}\n"},2303:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return k}));var t=a(0),l=a.n(t),r=a(1072),o=a(43),i=a(1220),s=a(1223),c=a(1199),d=a(1495),b=a(2610),m=a(2511),h=a(1222),p=a(193),u=a(1028),g=a(1314),j=a.n(g),T=a(1198),f=a.n(T),x=a(1197),w=a.n(x),C=a(1313),y=a.n(C),O=a(1);const P=Object(r.a)((e=>({root:{flexShrink:0,marginLeft:e.spacing(2.5)}})));function R(e){const n=P(),a=Object(o.a)(),{count:t,page:l,rowsPerPage:r,onPageChange:i}=e;return Object(O.jsxs)("div",{className:n.root,children:[Object(O.jsx)(u.a,{onClick:e=>{i(e,0)},disabled:0===l,"aria-label":"first page",children:"rtl"===a.direction?Object(O.jsx)(y.a,{}):Object(O.jsx)(j.a,{})}),Object(O.jsx)(u.a,{onClick:e=>{i(e,l-1)},disabled:0===l,"aria-label":"previous page",children:"rtl"===a.direction?Object(O.jsx)(w.a,{}):Object(O.jsx)(f.a,{})}),Object(O.jsx)(u.a,{onClick:e=>{i(e,l+1)},disabled:l>=Math.ceil(t/r)-1,"aria-label":"next page",children:"rtl"===a.direction?Object(O.jsx)(f.a,{}):Object(O.jsx)(w.a,{})}),Object(O.jsx)(u.a,{onClick:e=>{i(e,Math.max(0,Math.ceil(t/r)-1))},disabled:l>=Math.ceil(t/r)-1,"aria-label":"last page",children:"rtl"===a.direction?Object(O.jsx)(j.a,{}):Object(O.jsx)(y.a,{})})]})}function S(e,n,a){return{name:e,calories:n,fat:a}}const v=[S("Cupcake",305,3.7),S("Donut",452,25),S("Eclair",262,16),S("Frozen yoghurt",159,6),S("Gingerbread",356,16),S("Honeycomb",408,3.2),S("Ice cream sandwich",237,9),S("Jelly Bean",375,0),S("KitKat",518,26),S("Lollipop",392,.2),S("Marshmallow",318,0),S("Nougat",360,19),S("Oreo",437,18)].sort(((e,n)=>e.calories<n.calories?-1:1)),N=Object(r.a)({table:{minWidth:500}});function k(){const e=N(),[n,a]=l.a.useState(0),[t,r]=l.a.useState(5),o=t-Math.min(t,v.length-n*t);return Object(O.jsx)(d.a,{component:p.a,children:Object(O.jsxs)(i.a,{className:e.table,"aria-label":"custom pagination table",children:[Object(O.jsxs)(s.a,{children:[(t>0?v.slice(n*t,n*t+t):v).map((e=>Object(O.jsxs)(h.a,{children:[Object(O.jsx)(c.a,{component:"th",scope:"row",children:e.name}),Object(O.jsx)(c.a,{style:{width:160},align:"right",children:e.calories}),Object(O.jsx)(c.a,{style:{width:160},align:"right",children:e.fat})]},e.name))),o>0&&Object(O.jsx)(h.a,{style:{height:53*o},children:Object(O.jsx)(c.a,{colSpan:6})})]}),Object(O.jsx)(b.a,{children:Object(O.jsx)(h.a,{children:Object(O.jsx)(m.a,{rowsPerPageOptions:[5,10,25,{label:"All",value:-1}],colSpan:3,count:v.length,rowsPerPage:t,page:n,SelectProps:{inputProps:{"aria-label":"rows per page"},native:!0},onPageChange:(e,n)=>{a(n)},onRowsPerPageChange:e=>{r(parseInt(e.target.value,10)),a(0)},ActionsComponent:R})})})]})})}},2304:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableFooter from '@material-ui/core/TableFooter';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport TableRow from '@material-ui/core/TableRow';\nimport Paper from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\nimport LastPageIcon from '@material-ui/icons/LastPage';\n\nconst useStyles1 = makeStyles((theme) => ({\n root: {\n flexShrink: 0,\n marginLeft: theme.spacing(2.5),\n },\n}));\n\nfunction TablePaginationActions(props) {\n const classes = useStyles1();\n const theme = useTheme();\n const { count, page, rowsPerPage, onPageChange } = props;\n\n const handleFirstPageButtonClick = (event) => {\n onPageChange(event, 0);\n };\n\n const handleBackButtonClick = (event) => {\n onPageChange(event, page - 1);\n };\n\n const handleNextButtonClick = (event) => {\n onPageChange(event, page + 1);\n };\n\n const handleLastPageButtonClick = (event) => {\n onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));\n };\n\n return (\n <div className={classes.root}>\n <IconButton\n onClick={handleFirstPageButtonClick}\n disabled={page === 0}\n aria-label=\"first page\"\n >\n {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}\n </IconButton>\n <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label=\"previous page\">\n {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}\n </IconButton>\n <IconButton\n onClick={handleNextButtonClick}\n disabled={page >= Math.ceil(count / rowsPerPage) - 1}\n aria-label=\"next page\"\n >\n {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}\n </IconButton>\n <IconButton\n onClick={handleLastPageButtonClick}\n disabled={page >= Math.ceil(count / rowsPerPage) - 1}\n aria-label=\"last page\"\n >\n {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}\n </IconButton>\n </div>\n );\n}\n\nTablePaginationActions.propTypes = {\n count: PropTypes.number.isRequired,\n onPageChange: PropTypes.func.isRequired,\n page: PropTypes.number.isRequired,\n rowsPerPage: PropTypes.number.isRequired,\n};\n\nfunction createData(name, calories, fat) {\n return { name, calories, fat };\n}\n\nconst rows = [\n createData('Cupcake', 305, 3.7),\n createData('Donut', 452, 25.0),\n createData('Eclair', 262, 16.0),\n createData('Frozen yoghurt', 159, 6.0),\n createData('Gingerbread', 356, 16.0),\n createData('Honeycomb', 408, 3.2),\n createData('Ice cream sandwich', 237, 9.0),\n createData('Jelly Bean', 375, 0.0),\n createData('KitKat', 518, 26.0),\n createData('Lollipop', 392, 0.2),\n createData('Marshmallow', 318, 0),\n createData('Nougat', 360, 19.0),\n createData('Oreo', 437, 18.0),\n].sort((a, b) => (a.calories < b.calories ? -1 : 1));\n\nconst useStyles2 = makeStyles({\n table: {\n minWidth: 500,\n },\n});\n\nexport default function CustomPaginationActionsTable() {\n const classes = useStyles2();\n const [page, setPage] = React.useState(0);\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\n\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n return (\n <TableContainer component={Paper}>\n <Table className={classes.table} aria-label=\"custom pagination table\">\n <TableBody>\n {(rowsPerPage > 0\n ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n : rows\n ).map((row) => (\n <TableRow key={row.name}>\n <TableCell component=\"th\" scope=\"row\">\n {row.name}\n </TableCell>\n <TableCell style={{ width: 160 }} align=\"right\">\n {row.calories}\n </TableCell>\n <TableCell style={{ width: 160 }} align=\"right\">\n {row.fat}\n </TableCell>\n </TableRow>\n ))}\n\n {emptyRows > 0 && (\n <TableRow style={{ height: 53 * emptyRows }}>\n <TableCell colSpan={6} />\n </TableRow>\n )}\n </TableBody>\n <TableFooter>\n <TableRow>\n <TablePagination\n rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}\n colSpan={3}\n count={rows.length}\n rowsPerPage={rowsPerPage}\n page={page}\n SelectProps={{\n inputProps: { 'aria-label': 'rows per page' },\n native: true,\n }}\n onPageChange={handleChangePage}\n onRowsPerPageChange={handleChangeRowsPerPage}\n ActionsComponent={TablePaginationActions}\n />\n </TableRow>\n </TableFooter>\n </Table>\n </TableContainer>\n );\n}\n"},2305:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return f}));var t=a(0),l=a.n(t),r=a(1072),o=a(193),i=a(1220),s=a(1223),c=a(1199),d=a(1495),b=a(1221),m=a(2511),h=a(1222),p=a(1);const u=[{id:"name",label:"Name",minWidth:170},{id:"code",label:"ISO\xa0Code",minWidth:100},{id:"population",label:"Population",minWidth:170,align:"right",format:e=>e.toLocaleString("en-US")},{id:"size",label:"Size\xa0(km\xb2)",minWidth:170,align:"right",format:e=>e.toLocaleString("en-US")},{id:"density",label:"Density",minWidth:170,align:"right",format:e=>e.toFixed(2)}];function g(e,n,a,t){return{name:e,code:n,population:a,size:t,density:a/t}}const j=[g("India","IN",1324171354,3287263),g("China","CN",1403500365,9596961),g("Italy","IT",60483973,301340),g("United States","US",327167434,9833520),g("Canada","CA",37602103,9984670),g("Australia","AU",25475400,7692024),g("Germany","DE",83019200,357578),g("Ireland","IE",4857e3,70273),g("Mexico","MX",126577691,1972550),g("Japan","JP",126317e3,377973),g("France","FR",67022e3,640679),g("United Kingdom","GB",67545757,242495),g("Russia","RU",146793744,17098246),g("Nigeria","NG",200962417,923768),g("Brazil","BR",210147125,8515767)],T=Object(r.a)({root:{width:"100%"},container:{maxHeight:440}});function f(){const e=T(),[n,a]=l.a.useState(0),[t,r]=l.a.useState(10);return Object(p.jsxs)(o.a,{className:e.root,children:[Object(p.jsx)(d.a,{className:e.container,children:Object(p.jsxs)(i.a,{stickyHeader:!0,"aria-label":"sticky table",children:[Object(p.jsx)(b.a,{children:Object(p.jsx)(h.a,{children:u.map((e=>Object(p.jsx)(c.a,{align:e.align,style:{minWidth:e.minWidth},children:e.label},e.id)))})}),Object(p.jsx)(s.a,{children:j.slice(n*t,n*t+t).map((e=>Object(p.jsx)(h.a,{hover:!0,role:"checkbox",tabIndex:-1,children:u.map((n=>{const a=e[n.id];return Object(p.jsx)(c.a,{align:n.align,children:n.format&&"number"===typeof a?n.format(a):a},n.id)}))},e.code)))})]})}),Object(p.jsx)(m.a,{rowsPerPageOptions:[10,25,100],component:"div",count:j.length,rowsPerPage:t,page:n,onPageChange:(e,n)=>{a(n)},onRowsPerPageChange:e=>{r(+e.target.value),a(0)}})]})}},2306:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport TableRow from '@material-ui/core/TableRow';\n\nconst columns = [\n { id: 'name', label: 'Name', minWidth: 170 },\n { id: 'code', label: 'ISO\\u00a0Code', minWidth: 100 },\n {\n id: 'population',\n label: 'Population',\n minWidth: 170,\n align: 'right',\n format: (value) => value.toLocaleString('en-US'),\n },\n {\n id: 'size',\n label: 'Size\\u00a0(km\\u00b2)',\n minWidth: 170,\n align: 'right',\n format: (value) => value.toLocaleString('en-US'),\n },\n {\n id: 'density',\n label: 'Density',\n minWidth: 170,\n align: 'right',\n format: (value) => value.toFixed(2),\n },\n];\n\nfunction createData(name, code, population, size) {\n const density = population / size;\n return { name, code, population, size, density };\n}\n\nconst rows = [\n createData('India', 'IN', 1324171354, 3287263),\n createData('China', 'CN', 1403500365, 9596961),\n createData('Italy', 'IT', 60483973, 301340),\n createData('United States', 'US', 327167434, 9833520),\n createData('Canada', 'CA', 37602103, 9984670),\n createData('Australia', 'AU', 25475400, 7692024),\n createData('Germany', 'DE', 83019200, 357578),\n createData('Ireland', 'IE', 4857000, 70273),\n createData('Mexico', 'MX', 126577691, 1972550),\n createData('Japan', 'JP', 126317000, 377973),\n createData('France', 'FR', 67022000, 640679),\n createData('United Kingdom', 'GB', 67545757, 242495),\n createData('Russia', 'RU', 146793744, 17098246),\n createData('Nigeria', 'NG', 200962417, 923768),\n createData('Brazil', 'BR', 210147125, 8515767),\n];\n\nconst useStyles = makeStyles({\n root: {\n width: '100%',\n },\n container: {\n maxHeight: 440,\n },\n});\n\nexport default function StickyHeadTable() {\n const classes = useStyles();\n const [page, setPage] = React.useState(0);\n const [rowsPerPage, setRowsPerPage] = React.useState(10);\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(+event.target.value);\n setPage(0);\n };\n\n return (\n <Paper className={classes.root}>\n <TableContainer className={classes.container}>\n <Table stickyHeader aria-label=\"sticky table\">\n <TableHead>\n <TableRow>\n {columns.map((column) => (\n <TableCell\n key={column.id}\n align={column.align}\n style={{ minWidth: column.minWidth }}\n >\n {column.label}\n </TableCell>\n ))}\n </TableRow>\n </TableHead>\n <TableBody>\n {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {\n return (\n <TableRow hover role=\"checkbox\" tabIndex={-1} key={row.code}>\n {columns.map((column) => {\n const value = row[column.id];\n return (\n <TableCell key={column.id} align={column.align}>\n {column.format && typeof value === 'number' ? column.format(value) : value}\n </TableCell>\n );\n })}\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </TableContainer>\n <TablePagination\n rowsPerPageOptions={[10, 25, 100]}\n component=\"div\"\n count={rows.length}\n rowsPerPage={rowsPerPage}\n page={page}\n onPageChange={handleChangePage}\n onRowsPerPageChange={handleChangeRowsPerPage}\n />\n </Paper>\n );\n}\n"},2307:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return R}));var t=a(0),l=a.n(t),r=a(1072),o=a(1304),i=a(1106),s=a(1028),c=a(1220),d=a(1223),b=a(1199),m=a(1495),h=a(1221),p=a(1222),u=a(194),g=a(193),j=a(2308),T=a.n(j),f=a(1345),x=a.n(f),w=a(1);const C=Object(r.a)({root:{"& > *":{borderBottom:"unset"}}});function y(e,n,a,t,l,r){return{name:e,calories:n,fat:a,carbs:t,protein:l,price:r,history:[{date:"2020-01-05",customerId:"11091700",amount:3},{date:"2020-01-02",customerId:"Anonymous",amount:1}]}}function O(e){const{row:n}=e,[a,t]=l.a.useState(!1),r=C();return Object(w.jsxs)(l.a.Fragment,{children:[Object(w.jsxs)(p.a,{className:r.root,children:[Object(w.jsx)(b.a,{children:Object(w.jsx)(s.a,{"aria-label":"expand row",size:"small",onClick:()=>t(!a),children:a?Object(w.jsx)(x.a,{}):Object(w.jsx)(T.a,{})})}),Object(w.jsx)(b.a,{component:"th",scope:"row",children:n.name}),Object(w.jsx)(b.a,{align:"right",children:n.calories}),Object(w.jsx)(b.a,{align:"right",children:n.fat}),Object(w.jsx)(b.a,{align:"right",children:n.carbs}),Object(w.jsx)(b.a,{align:"right",children:n.protein})]}),Object(w.jsx)(p.a,{children:Object(w.jsx)(b.a,{style:{paddingBottom:0,paddingTop:0},colSpan:6,children:Object(w.jsx)(i.a,{in:a,timeout:"auto",unmountOnExit:!0,children:Object(w.jsxs)(o.a,{margin:1,children:[Object(w.jsx)(u.a,{variant:"h6",gutterBottom:!0,component:"div",children:"History"}),Object(w.jsxs)(c.a,{size:"small","aria-label":"purchases",children:[Object(w.jsx)(h.a,{children:Object(w.jsxs)(p.a,{children:[Object(w.jsx)(b.a,{children:"Date"}),Object(w.jsx)(b.a,{children:"Customer"}),Object(w.jsx)(b.a,{align:"right",children:"Amount"}),Object(w.jsx)(b.a,{align:"right",children:"Total price ($)"})]})}),Object(w.jsx)(d.a,{children:n.history.map((e=>Object(w.jsxs)(p.a,{children:[Object(w.jsx)(b.a,{component:"th",scope:"row",children:e.date}),Object(w.jsx)(b.a,{children:e.customerId}),Object(w.jsx)(b.a,{align:"right",children:e.amount}),Object(w.jsx)(b.a,{align:"right",children:Math.round(e.amount*n.price*100)/100})]},e.date)))})]})]})})})})]})}const P=[y("Frozen yoghurt",159,6,24,4,3.99),y("Ice cream sandwich",237,9,37,4.3,4.99),y("Eclair",262,16,24,6,3.79),y("Cupcake",305,3.7,67,4.3,2.5),y("Gingerbread",356,16,49,3.9,1.5)];function R(){return Object(w.jsx)(m.a,{component:g.a,children:Object(w.jsxs)(c.a,{"aria-label":"collapsible table",children:[Object(w.jsx)(h.a,{children:Object(w.jsxs)(p.a,{children:[Object(w.jsx)(b.a,{}),Object(w.jsx)(b.a,{children:"Dessert (100g serving)"}),Object(w.jsx)(b.a,{align:"right",children:"Calories"}),Object(w.jsx)(b.a,{align:"right",children:"Fat\xa0(g)"}),Object(w.jsx)(b.a,{align:"right",children:"Carbs\xa0(g)"}),Object(w.jsx)(b.a,{align:"right",children:"Protein\xa0(g)"})]})}),Object(w.jsx)(d.a,{children:P.map((e=>Object(w.jsx)(O,{row:e},e.name)))})]})})}},2309:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Box from '@material-ui/core/Box';\nimport Collapse from '@material-ui/core/Collapse';\nimport IconButton from '@material-ui/core/IconButton';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\nimport Typography from '@material-ui/core/Typography';\nimport Paper from '@material-ui/core/Paper';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\n\nconst useRowStyles = makeStyles({\n root: {\n '& > *': {\n borderBottom: 'unset',\n },\n },\n});\n\nfunction createData(name, calories, fat, carbs, protein, price) {\n return {\n name,\n calories,\n fat,\n carbs,\n protein,\n price,\n history: [\n { date: '2020-01-05', customerId: '11091700', amount: 3 },\n { date: '2020-01-02', customerId: 'Anonymous', amount: 1 },\n ],\n };\n}\n\nfunction Row(props) {\n const { row } = props;\n const [open, setOpen] = React.useState(false);\n const classes = useRowStyles();\n\n return (\n <React.Fragment>\n <TableRow className={classes.root}>\n <TableCell>\n <IconButton aria-label=\"expand row\" size=\"small\" onClick={() => setOpen(!open)}>\n {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}\n </IconButton>\n </TableCell>\n <TableCell component=\"th\" scope=\"row\">\n {row.name}\n </TableCell>\n <TableCell align=\"right\">{row.calories}</TableCell>\n <TableCell align=\"right\">{row.fat}</TableCell>\n <TableCell align=\"right\">{row.carbs}</TableCell>\n <TableCell align=\"right\">{row.protein}</TableCell>\n </TableRow>\n <TableRow>\n <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>\n <Collapse in={open} timeout=\"auto\" unmountOnExit>\n <Box margin={1}>\n <Typography variant=\"h6\" gutterBottom component=\"div\">\n History\n </Typography>\n <Table size=\"small\" aria-label=\"purchases\">\n <TableHead>\n <TableRow>\n <TableCell>Date</TableCell>\n <TableCell>Customer</TableCell>\n <TableCell align=\"right\">Amount</TableCell>\n <TableCell align=\"right\">Total price ($)</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {row.history.map((historyRow) => (\n <TableRow key={historyRow.date}>\n <TableCell component=\"th\" scope=\"row\">\n {historyRow.date}\n </TableCell>\n <TableCell>{historyRow.customerId}</TableCell>\n <TableCell align=\"right\">{historyRow.amount}</TableCell>\n <TableCell align=\"right\">\n {Math.round(historyRow.amount * row.price * 100) / 100}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </Box>\n </Collapse>\n </TableCell>\n </TableRow>\n </React.Fragment>\n );\n}\n\nRow.propTypes = {\n row: PropTypes.shape({\n calories: PropTypes.number.isRequired,\n carbs: PropTypes.number.isRequired,\n fat: PropTypes.number.isRequired,\n history: PropTypes.arrayOf(\n PropTypes.shape({\n amount: PropTypes.number.isRequired,\n customerId: PropTypes.string.isRequired,\n date: PropTypes.string.isRequired,\n }),\n ).isRequired,\n name: PropTypes.string.isRequired,\n price: PropTypes.number.isRequired,\n protein: PropTypes.number.isRequired,\n }).isRequired,\n};\n\nconst rows = [\n createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),\n createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),\n createData('Eclair', 262, 16.0, 24, 6.0, 3.79),\n createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),\n createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),\n];\n\nexport default function CollapsibleTable() {\n return (\n <TableContainer component={Paper}>\n <Table aria-label=\"collapsible table\">\n <TableHead>\n <TableRow>\n <TableCell />\n <TableCell>Dessert (100g serving)</TableCell>\n <TableCell align=\"right\">Calories</TableCell>\n <TableCell align=\"right\">Fat (g)</TableCell>\n <TableCell align=\"right\">Carbs (g)</TableCell>\n <TableCell align=\"right\">Protein (g)</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {rows.map((row) => (\n <Row key={row.name} row={row} />\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n );\n}\n"},2310:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return x}));a(0);var t=a(1072),l=a(1220),r=a(1223),o=a(1199),i=a(1495),s=a(1221),c=a(1222),d=a(193),b=a(1);const m=.07,h=Object(t.a)({table:{minWidth:700}});function p(e){return"".concat(e.toFixed(2))}function u(e,n,a){const t=function(e,n){return e*n}(n,a);return{desc:e,qty:n,unit:a,price:t}}const g=[u("Paperclips (Box)",100,1.15),u("Paper (Case)",10,45.99),u("Waste Basket",2,17.99)],j=g.map((e=>{let{price:n}=e;return n})).reduce(((e,n)=>e+n),0);const T=m*j,f=T+j;function x(){const e=h();return Object(b.jsx)(i.a,{component:d.a,children:Object(b.jsxs)(l.a,{className:e.table,"aria-label":"spanning table",children:[Object(b.jsxs)(s.a,{children:[Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{align:"center",colSpan:3,children:"Details"}),Object(b.jsx)(o.a,{align:"right",children:"Price"})]}),Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{children:"Desc"}),Object(b.jsx)(o.a,{align:"right",children:"Qty."}),Object(b.jsx)(o.a,{align:"right",children:"Unit"}),Object(b.jsx)(o.a,{align:"right",children:"Sum"})]})]}),Object(b.jsxs)(r.a,{children:[g.map((e=>Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{children:e.desc}),Object(b.jsx)(o.a,{align:"right",children:e.qty}),Object(b.jsx)(o.a,{align:"right",children:e.unit}),Object(b.jsx)(o.a,{align:"right",children:p(e.price)})]},e.desc))),Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{rowSpan:3}),Object(b.jsx)(o.a,{colSpan:2,children:"Subtotal"}),Object(b.jsx)(o.a,{align:"right",children:p(j)})]}),Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{children:"Tax"}),Object(b.jsx)(o.a,{align:"right",children:"".concat((100*m).toFixed(0)," %")}),Object(b.jsx)(o.a,{align:"right",children:p(T)})]}),Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{colSpan:2,children:"Total"}),Object(b.jsx)(o.a,{align:"right",children:p(f)})]})]})]})})}},2311:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Table from \'@material-ui/core/Table\';\nimport TableBody from \'@material-ui/core/TableBody\';\nimport TableCell from \'@material-ui/core/TableCell\';\nimport TableContainer from \'@material-ui/core/TableContainer\';\nimport TableHead from \'@material-ui/core/TableHead\';\nimport TableRow from \'@material-ui/core/TableRow\';\nimport Paper from \'@material-ui/core/Paper\';\n\nconst TAX_RATE = 0.07;\n\nconst useStyles = makeStyles({\n table: {\n minWidth: 700,\n },\n});\n\nfunction ccyFormat(num) {\n return `${num.toFixed(2)}`;\n}\n\nfunction priceRow(qty, unit) {\n return qty * unit;\n}\n\nfunction createRow(desc, qty, unit) {\n const price = priceRow(qty, unit);\n return { desc, qty, unit, price };\n}\n\nfunction subtotal(items) {\n return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0);\n}\n\nconst rows = [\n createRow(\'Paperclips (Box)\', 100, 1.15),\n createRow(\'Paper (Case)\', 10, 45.99),\n createRow(\'Waste Basket\', 2, 17.99),\n];\n\nconst invoiceSubtotal = subtotal(rows);\nconst invoiceTaxes = TAX_RATE * invoiceSubtotal;\nconst invoiceTotal = invoiceTaxes + invoiceSubtotal;\n\nexport default function SpanningTable() {\n const classes = useStyles();\n\n return (\n <TableContainer component={Paper}>\n <Table className={classes.table} aria-label="spanning table">\n <TableHead>\n <TableRow>\n <TableCell align="center" colSpan={3}>\n Details\n </TableCell>\n <TableCell align="right">Price</TableCell>\n </TableRow>\n <TableRow>\n <TableCell>Desc</TableCell>\n <TableCell align="right">Qty.</TableCell>\n <TableCell align="right">Unit</TableCell>\n <TableCell align="right">Sum</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {rows.map((row) => (\n <TableRow key={row.desc}>\n <TableCell>{row.desc}</TableCell>\n <TableCell align="right">{row.qty}</TableCell>\n <TableCell align="right">{row.unit}</TableCell>\n <TableCell align="right">{ccyFormat(row.price)}</TableCell>\n </TableRow>\n ))}\n\n <TableRow>\n <TableCell rowSpan={3} />\n <TableCell colSpan={2}>Subtotal</TableCell>\n <TableCell align="right">{ccyFormat(invoiceSubtotal)}</TableCell>\n </TableRow>\n <TableRow>\n <TableCell>Tax</TableCell>\n <TableCell align="right">{`${(TAX_RATE * 100).toFixed(0)} %`}</TableCell>\n <TableCell align="right">{ccyFormat(invoiceTaxes)}</TableCell>\n </TableRow>\n <TableRow>\n <TableCell colSpan={2}>Total</TableCell>\n <TableCell align="right">{ccyFormat(invoiceTotal)}</TableCell>\n </TableRow>\n </TableBody>\n </Table>\n </TableContainer>\n );\n}\n'},2312:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return g}));var t=a(0),l=a.n(t),r=a(5),o=a(11),i=a(1199),s=a(193),c=a(2502),d=a(1);class b extends l.a.PureComponent{constructor(){super(...arguments),this.getRowClassName=e=>{let{index:n}=e;const{classes:a,onRowClick:t}=this.props;return Object(r.a)(a.tableRow,a.flexContainer,{[a.tableRowHover]:-1!==n&&null!=t})},this.cellRenderer=e=>{let{cellData:n,columnIndex:a}=e;const{columns:t,classes:l,rowHeight:o,onRowClick:s}=this.props;return Object(d.jsx)(i.a,{component:"div",className:Object(r.a)(l.tableCell,l.flexContainer,{[l.noClick]:null==s}),variant:"body",style:{height:o},align:null!=a&&t[a].numeric?"right":"left",children:n})},this.headerRenderer=e=>{let{label:n,columnIndex:a}=e;const{headerHeight:t,columns:l,classes:o}=this.props;return Object(d.jsx)(i.a,{component:"div",className:Object(r.a)(o.tableCell,o.flexContainer,o.noClick),variant:"head",style:{height:t},align:l[a].numeric?"right":"left",children:Object(d.jsx)("span",{children:n})})}}render(){const{classes:e,columns:n,rowHeight:a,headerHeight:t,...l}=this.props;return Object(d.jsx)(c.a,{children:r=>{let{height:o,width:i}=r;return Object(d.jsx)(c.c,{height:o,width:i,rowHeight:a,gridStyle:{direction:"inherit"},headerHeight:t,className:e.table,...l,rowClassName:this.getRowClassName,children:n.map(((n,a)=>{let{dataKey:t,...l}=n;return Object(d.jsx)(c.b,{headerRenderer:e=>this.headerRenderer({...e,columnIndex:a}),className:e.flexContainer,cellRenderer:this.cellRenderer,dataKey:t,...l},t)}))})}})}}b.defaultProps={headerHeight:48,rowHeight:48};const m=Object(o.a)((e=>({flexContainer:{display:"flex",alignItems:"center",boxSizing:"border-box"},table:{"& .ReactVirtualized__Table__headerRow":{flip:!1,paddingRight:"rtl"===e.direction?"0 !important":void 0}},tableRow:{cursor:"pointer"},tableRowHover:{"&:hover":{backgroundColor:e.palette.grey[200]}},tableCell:{flex:1},noClick:{cursor:"initial"}})))(b),h=[["Frozen yoghurt",159,6,24,4],["Ice cream sandwich",237,9,37,4.3],["Eclair",262,16,24,6],["Cupcake",305,3.7,67,4.3],["Gingerbread",356,16,49,3.9]];function p(e,n,a,t,l,r){return{id:e,dessert:n,calories:a,fat:t,carbs:l,protein:r}}const u=[];for(let j=0;j<200;j+=1){const e=h[Math.floor(Math.random()*h.length)];u.push(p(j,...e))}function g(){return Object(d.jsx)(s.a,{style:{height:400,width:"100%"},children:Object(d.jsx)(m,{rowCount:u.length,rowGetter:e=>{let{index:n}=e;return u[n]},columns:[{width:200,label:"Dessert",dataKey:"dessert"},{width:120,label:"Calories\xa0(g)",dataKey:"calories",numeric:!0},{width:120,label:"Fat\xa0(g)",dataKey:"fat",numeric:!0},{width:120,label:"Carbs\xa0(g)",dataKey:"carbs",numeric:!0},{width:120,label:"Protein\xa0(g)",dataKey:"protein",numeric:!0}]})})}},2313:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { withStyles } from '@material-ui/core/styles';\nimport TableCell from '@material-ui/core/TableCell';\nimport Paper from '@material-ui/core/Paper';\nimport { AutoSizer, Column, Table } from 'react-virtualized';\n\nconst styles = (theme) => ({\n flexContainer: {\n display: 'flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n },\n table: {\n // temporary right-to-left patch, waiting for\n // https://github.com/bvaughn/react-virtualized/issues/454\n '& .ReactVirtualized__Table__headerRow': {\n flip: false,\n paddingRight: theme.direction === 'rtl' ? '0 !important' : undefined,\n },\n },\n tableRow: {\n cursor: 'pointer',\n },\n tableRowHover: {\n '&:hover': {\n backgroundColor: theme.palette.grey[200],\n },\n },\n tableCell: {\n flex: 1,\n },\n noClick: {\n cursor: 'initial',\n },\n});\n\nclass MuiVirtualizedTable extends React.PureComponent {\n static defaultProps = {\n headerHeight: 48,\n rowHeight: 48,\n };\n\n getRowClassName = ({ index }) => {\n const { classes, onRowClick } = this.props;\n\n return clsx(classes.tableRow, classes.flexContainer, {\n [classes.tableRowHover]: index !== -1 && onRowClick != null,\n });\n };\n\n cellRenderer = ({ cellData, columnIndex }) => {\n const { columns, classes, rowHeight, onRowClick } = this.props;\n return (\n <TableCell\n component=\"div\"\n className={clsx(classes.tableCell, classes.flexContainer, {\n [classes.noClick]: onRowClick == null,\n })}\n variant=\"body\"\n style={{ height: rowHeight }}\n align={(columnIndex != null && columns[columnIndex].numeric) || false ? 'right' : 'left'}\n >\n {cellData}\n </TableCell>\n );\n };\n\n headerRenderer = ({ label, columnIndex }) => {\n const { headerHeight, columns, classes } = this.props;\n\n return (\n <TableCell\n component=\"div\"\n className={clsx(classes.tableCell, classes.flexContainer, classes.noClick)}\n variant=\"head\"\n style={{ height: headerHeight }}\n align={columns[columnIndex].numeric || false ? 'right' : 'left'}\n >\n <span>{label}</span>\n </TableCell>\n );\n };\n\n render() {\n const { classes, columns, rowHeight, headerHeight, ...tableProps } = this.props;\n return (\n <AutoSizer>\n {({ height, width }) => (\n <Table\n height={height}\n width={width}\n rowHeight={rowHeight}\n gridStyle={{\n direction: 'inherit',\n }}\n headerHeight={headerHeight}\n className={classes.table}\n {...tableProps}\n rowClassName={this.getRowClassName}\n >\n {columns.map(({ dataKey, ...other }, index) => {\n return (\n <Column\n key={dataKey}\n headerRenderer={(headerProps) =>\n this.headerRenderer({\n ...headerProps,\n columnIndex: index,\n })\n }\n className={classes.flexContainer}\n cellRenderer={this.cellRenderer}\n dataKey={dataKey}\n {...other}\n />\n );\n })}\n </Table>\n )}\n </AutoSizer>\n );\n }\n}\n\nMuiVirtualizedTable.propTypes = {\n classes: PropTypes.object.isRequired,\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n dataKey: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n numeric: PropTypes.bool,\n width: PropTypes.number.isRequired,\n }),\n ).isRequired,\n headerHeight: PropTypes.number,\n onRowClick: PropTypes.func,\n rowHeight: PropTypes.number,\n};\n\nconst VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);\n\n// ---\n\nconst sample = [\n ['Frozen yoghurt', 159, 6.0, 24, 4.0],\n ['Ice cream sandwich', 237, 9.0, 37, 4.3],\n ['Eclair', 262, 16.0, 24, 6.0],\n ['Cupcake', 305, 3.7, 67, 4.3],\n ['Gingerbread', 356, 16.0, 49, 3.9],\n];\n\nfunction createData(id, dessert, calories, fat, carbs, protein) {\n return { id, dessert, calories, fat, carbs, protein };\n}\n\nconst rows = [];\n\nfor (let i = 0; i < 200; i += 1) {\n const randomSelection = sample[Math.floor(Math.random() * sample.length)];\n rows.push(createData(i, ...randomSelection));\n}\n\nexport default function ReactVirtualizedTable() {\n return (\n <Paper style={{ height: 400, width: '100%' }}>\n <VirtualizedTable\n rowCount={rows.length}\n rowGetter={({ index }) => rows[index]}\n columns={[\n {\n width: 200,\n label: 'Dessert',\n dataKey: 'dessert',\n },\n {\n width: 120,\n label: 'Calories\\u00A0(g)',\n dataKey: 'calories',\n numeric: true,\n },\n {\n width: 120,\n label: 'Fat\\u00A0(g)',\n dataKey: 'fat',\n numeric: true,\n },\n {\n width: 120,\n label: 'Carbs\\u00A0(g)',\n dataKey: 'carbs',\n numeric: true,\n },\n {\n width: 120,\n label: 'Protein\\u00A0(g)',\n dataKey: 'protein',\n numeric: true,\n },\n ]}\n />\n </Paper>\n );\n}\n"},2314:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return u}));a(0);var t=a(1072),l=a(1220),r=a(1223),o=a(1199),i=a(1495),s=a(1221),c=a(1222),d=a(193),b=a(1);const m=Object(t.a)({table:{minWidth:650}});function h(e,n,a,t,l){return{name:e,calories:n,fat:a,carbs:t,protein:l}}const p=[h("Frozen yoghurt",159,6,24,4),h("Ice cream sandwich",237,9,37,4.3),h("Eclair",262,16,24,6)];function u(){const e=m();return Object(b.jsx)(i.a,{component:d.a,children:Object(b.jsxs)(l.a,{className:e.table,"aria-label":"caption table",children:[Object(b.jsx)("caption",{children:"A basic table example with a caption"}),Object(b.jsx)(s.a,{children:Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{children:"Dessert (100g serving)"}),Object(b.jsx)(o.a,{align:"right",children:"Calories"}),Object(b.jsx)(o.a,{align:"right",children:"Fat\xa0(g)"}),Object(b.jsx)(o.a,{align:"right",children:"Carbs\xa0(g)"}),Object(b.jsx)(o.a,{align:"right",children:"Protein\xa0(g)"})]})}),Object(b.jsx)(r.a,{children:p.map((e=>Object(b.jsxs)(c.a,{children:[Object(b.jsx)(o.a,{component:"th",scope:"row",children:e.name}),Object(b.jsx)(o.a,{align:"right",children:e.calories}),Object(b.jsx)(o.a,{align:"right",children:e.fat}),Object(b.jsx)(o.a,{align:"right",children:e.carbs}),Object(b.jsx)(o.a,{align:"right",children:e.protein})]},e.name)))})]})})}},2315:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\nimport Paper from '@material-ui/core/Paper';\n\nconst useStyles = makeStyles({\n table: {\n minWidth: 650,\n },\n});\n\nfunction createData(name, calories, fat, carbs, protein) {\n return { name, calories, fat, carbs, protein };\n}\n\nconst rows = [\n createData('Frozen yoghurt', 159, 6.0, 24, 4.0),\n createData('Ice cream sandwich', 237, 9.0, 37, 4.3),\n createData('Eclair', 262, 16.0, 24, 6.0),\n];\n\nexport default function AcccessibleTable() {\n const classes = useStyles();\n\n return (\n <TableContainer component={Paper}>\n <Table className={classes.table} aria-label=\"caption table\">\n <caption>A basic table example with a caption</caption>\n <TableHead>\n <TableRow>\n <TableCell>Dessert (100g serving)</TableCell>\n <TableCell align=\"right\">Calories</TableCell>\n <TableCell align=\"right\">Fat (g)</TableCell>\n <TableCell align=\"right\">Carbs (g)</TableCell>\n <TableCell align=\"right\">Protein (g)</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {rows.map((row) => (\n <TableRow key={row.name}>\n <TableCell component=\"th\" scope=\"row\">\n {row.name}\n </TableCell>\n <TableCell align=\"right\">{row.calories}</TableCell>\n <TableCell align=\"right\">{row.fat}</TableCell>\n <TableCell align=\"right\">{row.carbs}</TableCell>\n <TableCell align=\"right\">{row.protein}</TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n );\n}\n"},2608:function(e,n,a){"use strict";a.r(n);var t=a(1130),l=a(118),r=a(1098),o=a(1090),i=a(194),s=a(1072),c=a(1);const d=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return d(),Object(c.jsxs)(c.Fragment,{children:[Object(c.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(c.jsxs)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/tables",target:"_blank",role:"button",children:[Object(c.jsx)(o.a,{children:"link"}),Object(c.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(c.jsx)(i.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Table"}),Object(c.jsx)(i.a,{className:"description",children:"Tables display sets of data. They can be fully customized."}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:[Object(c.jsx)("a",{href:"https://material.io/design/components/data-tables.html",children:"Tables"})," display information in a way that\u2019s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Tables can include:"}),Object(c.jsxs)("ul",{children:[Object(c.jsx)("li",{children:"A corresponding visualization"}),Object(c.jsx)("li",{children:"Navigation"}),Object(c.jsx)("li",{children:"Tools to query and manipulate data"})]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"When including tools, they should be placed directly above or below the table."}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Basic table"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"A simple example with no frills."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2286).default,raw:a(2287)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Data table"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["The ",Object(c.jsx)("code",{children:"Table"})," component has a close mapping to the native ",Object(c.jsx)("code",{children:"<table>"})," ","elements. This constraint makes building rich data tables challenging."]}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["The"," ",Object(c.jsxs)("a",{href:"/components/data-grid/",children:[Object(c.jsx)("code",{children:"DataGrid"})," component"]})," ","is designed for use-cases that are focused around handling a large amounts of tabular data. While it comes with a more rigid structure, in exchange, you gain more powerful features."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2288).default,raw:a(2295)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Dense table"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"A simple example of a dense table with no frills."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2296).default,raw:a(2297)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Sorting & selecting"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["This example demonstrates the use of ",Object(c.jsx)("code",{children:"Checkbox"})," and clickable rows for selection, with a custom ",Object(c.jsx)("code",{children:"Toolbar"}),". It uses the ",Object(c.jsx)("code",{children:"TableSortLabel"})," component to help style column headings."]}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["The Table has been given a fixed width to demonstrate horizontal scrolling. In order to prevent the pagination controls from scrolling, the TablePagination component is used outside of the Table. (The"," ",Object(c.jsx)("a",{href:"#custom-pagination-actions",children:"'Custom Table Pagination Action' example"})," ","below shows the pagination within the TableFooter.)"]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2298).default,raw:a(2300)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized tables"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["Here is an example of customizing the component. You can learn more about this in the",Object(c.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2301).default,raw:a(2302)})}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Custom pagination options"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:['It\'s possible to customise the options shown in the "Rows per page" select using the ',Object(c.jsx)("code",{children:"rowsPerPageOptions"})," prop. You should either provide an array of:"]}),Object(c.jsxs)("ul",{children:[Object(c.jsxs)("li",{children:[Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:[Object(c.jsx)("strong",{children:"numbers"}),", each number will be used for the option's label and value."]}),Object(c.jsx)(l.a,{component:"pre",className:"language-jsx",children:" \n<TablePagination rowsPerPageOptions={[10, 50]} />\n"})]}),Object(c.jsxs)("li",{children:[Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:[Object(c.jsx)("strong",{children:"objects"}),", the ",Object(c.jsx)("code",{children:"value"})," and ",Object(c.jsx)("code",{children:"label"})," keys will be used respectively for the value and label of the option (useful for language strings such as 'All')."]}),Object(c.jsx)(l.a,{component:"pre",className:"language-jsx",children:" \n<TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />\n"})]})]}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Custom pagination actions"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["The ",Object(c.jsx)("code",{children:"ActionsComponent"})," prop of the ",Object(c.jsx)("code",{children:"TablePagination"})," component allows the implementation of custom actions."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2303).default,raw:a(2304)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Fixed header"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["An example of a table with scrollable rows and fixed column headers. It leverages the"," ",Object(c.jsx)("code",{children:"stickyHeader"})," prop (\u26a0\ufe0f no IE 11 support)."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2305).default,raw:a(2306)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Collapsible table"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["An example of a table with expandable rows, revealing more information. It utilizes the"," ",Object(c.jsx)("a",{href:"/api/collapse/",children:Object(c.jsx)("code",{children:"Collapse"})})," ","component."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2307).default,raw:a(2309)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Spanning table"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"A simple example with spanning rows & columns."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2310).default,raw:a(2311)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Virtualized table"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["In the following example, we demonstrate how to use"," ",Object(c.jsx)("a",{href:"https://github.com/bvaughn/react-virtualized",children:"react-virtualized"})," with the"," ",Object(c.jsx)("code",{children:"Table"})," component. It renders 200 rows and can easily handle more. Virtualization helps with performance issues."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2312).default,raw:a(2313)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["(WAI tutorial:"," ",Object(c.jsx)("a",{href:"https://www.w3.org/WAI/tutorials/tables/",children:"https://www.w3.org/WAI/tutorials/tables/"}),")"]}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Caption"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it\u2019s about and decide if they want to read it."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(2314).default,raw:a(2315)})})]})}}}]);
Zerion Mini Shell 1.0