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
+
+
+
+
+ {/* 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
+
+
+
+
+ {/*---- pagination- */}
+
+
+
+
+ [1 to 10 of 92]
+
+
+
+
+ );
+}
+