update layout approval matrix

src/container/ApprovalMatrix.js

 import React, { Component } from 'react';
 import { Typography } from '@material-ui/core';
+import { Container, Row, Col } from "react-bootstrap";
+import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import TextField from "@material-ui/core/TextField";
 import Images from '../assets/Images';
 import MUIDataTable from "mui-datatables";
+import Modal from '@material-ui/core/Modal';
 
-class ApprovalMatrix extends Component {
-    render() {
+var ct = require("../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptions();
+
+function rand() {
+  return Math.round(Math.random() * 20) - 10;
+}
+
+function getModalStyle() {
+  const top = 50 + rand();
+  const left = 50 + rand();
+
+  return {
+    top: `${top}%`,
+    left: `${left}%`,
+    transform: `translate(-${top}%, -${left}%)`,
+  };
+}
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    position: 'absolute',
+    width: 400,
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+  },
+}));
+
+// class ApprovalMatrix extends Component {
+    // render() {
+export default function ApprovalMatrix() {
+        const classess = useStyles();
+        const [modalStyle] = React.useState(getModalStyle);
+        const [open, setOpen] = React.useState(false);
+        const handleOpen = () => {
+            setOpen(true);
+        };
+        const handleClose = () => {
+            setOpen(false);
+        };
+        const showModal = (
+            <div className="" style={{ marginTop: 100 }}>
+                <div className="popup-content background-white border-radius">
+                    <div className="popup-panel grid grid-2x">
+                        <div className="col-1" style={{ width: '140%' }}>
+                            <div className="popup-title">
+                                Test
+                            </div>
+                        </div>
+                        <div className="col-2 content-right" style={{ maxWidth: "inherit" }}>
+                            <button
+                                type="button"
+                                className="btn btn-circle btn-grey"
+                                onClick={() => null}
+                            >
+                                <i className="fa fa-lg fa-times" />
+                            </button>
+                        </div>
+                    </div>
+
+
+                    {/* <div>
+                        CONTENT
+                    </div> */}
+
+                </div>
+            </div>
+        );
         const columns = [{
             name: "Action",
             options: {
@@ -36,7 +106,7 @@ class ApprovalMatrix extends Component {
         ]
         const options = {
             filter: false,
-            sort: false,
+            sort: true,
             responsive: "scroll",
             print: false,
             download: false,
@@ -47,11 +117,12 @@ class ApprovalMatrix extends Component {
         }
 
         return (
-            <div style={{ flex: 1 }}>
-                <div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}>
-                    <div style={{ display: 'flex' }}>
+            <Container fluid style={{ height: '100vh', padding: 0 }}>
+            <div style={{ height: '200px', width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}>
+                <div style={{ }}>
+                    <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}>
                         <Typography style={{ paddingTop: 8, paddingBottom: 7, fontSize: '16px', color: 'white' }}>Master Data - Approval Matrix</Typography>
-                        <form style={{ marginLeft: 110 }}>
+                        <form style={{ }}>
                             <TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
                         </form>
                         <div style={{ display: 'flex' }}>
@@ -60,7 +131,6 @@ class ApprovalMatrix extends Component {
                                     backgroundColor: 'transparent',
                                     cursor: 'pointer',
                                     borderColor: 'transparent',
-                                    marginLeft: 82,
                                     padding: 0
                                 }}
                                 onClick={() => null}
@@ -111,26 +181,35 @@ class ApprovalMatrix extends Component {
                                     marginLeft: 16,
                                     padding:0
                                 }}
-                                onClick={() => null}
+                                onClick={handleOpen}
                             >
                                 <img src={Images.add} />
                             </button>
                         </div >
+                        <Modal
+                            open={open}
+                            onClose={handleClose}
+                            aria-labelledby="simple-modal-title"
+                            aria-describedby="simple-modal-description"
+                        >
+                            {showModal}
+                        </Modal>
                     </div>
                     
                 </div>
-                <div style={{ flex: 1, padding: 20, width: '100%' }}>
-                    <div>
+                <div style={{ padding: 20, width: '100%' }}>
+                    <MuiThemeProvider theme={getMuiTheme()}>
                         <MUIDataTable
                             data={data}
                             columns={columns}
                             options={options}
                         />
-                    </div>
+                    </MuiThemeProvider>
                 </div>
             </div>
+            </Container>
         );
-    }
+    // }
 }
 
-export default ApprovalMatrix;
\ No newline at end of file
+// export default ApprovalMatrix;