From 0e7952f83d5f3ec86d941c8db2ed39217488e27e Mon Sep 17 00:00:00 2001 From: Hiren Padsala <38140488+hiren1212@users.noreply.github.com> Date: Mon, 31 Jan 2022 15:25:12 +0530 Subject: [PATCH] Feature/Wms-14 Nested Table component design completed (#30) * Feature/Wms-14 Nested Table component design completed --- src/components/NestedTable/index.js | 287 ++++++++++++++++++++++++++++ 1 file changed, 287 insertions(+) create mode 100644 src/components/NestedTable/index.js diff --git a/src/components/NestedTable/index.js b/src/components/NestedTable/index.js new file mode 100644 index 0000000..a303483 --- /dev/null +++ b/src/components/NestedTable/index.js @@ -0,0 +1,287 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import PropTypes from 'prop-types'; +import SearchBar from 'components/SearchBar'; +import MDButton from 'components/Button'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Fade from '@mui/material/Fade'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import { styled } from '@mui/material/styles'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell, { tableCellClasses } from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import IconButton from '@mui/material/IconButton'; +import Collapse from '@mui/material/Collapse'; +import TablePagination from 'components/TablePagination'; + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: '#e5e7eb', + color: theme.palette.common.black, + fontWeight:400 + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14, + fontWeight:400 + } +})); + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(4n+1)': { + backgroundColor: theme.palette.action.hover + }, + 'td, th' :{ + padding: '0.75rem 0.5rem' + }, + // hide last border + '&:last-child td, &:last-child th': { + border: 0 + } + // '&:nth-of-type(1) td, &:nth-of-type(1) th': { + // width: '10px' + // } +})); + + +function createData(zone, names, type, specifications) { + return { + zone, + names, + type, + specifications, + children:[ + { + rownumber:'10,654', + location:'ALFKI', + employeeid:'4', + orderdate:'08/25/2008', + requiredate:'09/22/2008', + shippeddate:'09/22/2008' + }, + { + rownumber:'10,654', + location:'ALFKI', + employeeid:'4', + orderdate:'08/25/2008', + requiredate:'09/22/2008', + shippeddate:'09/22/2008' + } + ] + }; +} + +const rows = [ + createData('Zone A', 'Semper libero sit element...', 'Ana Trujillo', 'Orci arcu dictum pellentesque'), + createData('Zone A', 'Semper libero sit element...', 'Ana Trujillo', 'Orci arcu dictum pellentesque'), + createData('Zone A', 'Semper libero sit element...', 'Ana Trujillo', 'Orci arcu dictum pellentesque'), + createData('Zone A', 'Semper libero sit element...', 'Ana Trujillo', 'Orci arcu dictum pellentesque'), + createData('Zone A', 'Semper libero sit element...', 'Ana Trujillo', 'Orci arcu dictum pellentesque') +]; + +Row.propTypes = { + row: PropTypes.shape({ + zone: PropTypes.string.isRequired, + names: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + specifications: PropTypes.string.isRequired, + children: PropTypes.arrayOf( + PropTypes.shape({ + rownumber: PropTypes.string.isRequired, + location: PropTypes.string.isRequired, + employeeid: PropTypes.string.isRequired, + orderdate: PropTypes.string.isRequired, + requiredate: PropTypes.string.isRequired, + shippeddate: PropTypes.string.isRequired + }), + ).isRequired + }).isRequired +}; + +function Row(props) { + const { row } = props; + const [open, setOpen] = React.useState(false); + + return ( + + *': { borderBottom: 'unset' } }}> + + setOpen(!open)} + > + {open ? : } + + EDIT + + + + {row.zone} + + {row.names} + {row.type} + {row.specifications} + + + + + + + + + Row no + Number of Bays + Employee ID + Order Date + Required Date + Shipped Date + + + + {row?.children?.map((item , i)=>{ + return( + + {item.rownumber} + {item.location} + {item.employeeid} + {item.orderdate} + {item.requiredate} + {item.shippeddate} + + ); + })} + +
+ + + + + + ); +} + +export default function NestedTable() { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + return ( + <> + + + + + + + Sorting + } + onClick={handleClick} + > + Dashboard + + + Profile + My account + Logout + + + + {/* Table-row- */} + + + + + + Zone + Names + Type + Specifications + + + + {rows.map((row) => ( + + ))} + +
+ + + + Go to + 1 + + View: + } + sx={{ textTransform:'inherit', minWidth:'45px', minHeight:'28px', marginLeft:'10px', boxShadow:'none', fontWeight:'500', padding:'0', border:' 1px solid #C2C2C2', color:'#000' }} + onClick={handleClick} + > + 12 + + + Profile + My account + Logout + + + + {/*---- pagination- */} + + + + + [1 to 10 of 92] + + + + + ); +} +