header adapted to new table

src/Components/Modal/PasswordModal.jsx

@@ -14,6 +14,7 @@ import { StepFour } from '../Password/Steps/four'
 export function HelpModal (props) {
 
     let { visible, handleClose } = props
+    console.log('props >>.', props )
 
     const [activeStep, setActiveStep] = React.useState(0);
     const [skipped, setSkipped] = React.useState(new Set());

src/Components/Password/CustomToolbar.jsx

@@ -4,15 +4,29 @@ import {
 } from '@mui/material';
 
 import { Add as AddIcon } from '@mui/icons-material'
+// import { PasswordModal } from '../Components/Modal/PasswordModal'
+import { HelpModal as PasswordModal } from '../../Components/Modal/PasswordModal'
 
 export default class CustomToolbar extends React.Component {
 
+    constructor(props){
+        super(props);
+        this.state = {
+            visible : false
+        }
+    }
+
+
+    setVisible = () => this.setState({ visible : false});
+
     handleClick = () => {
-        console.log("clicked on icon!");
+        console.log("is visible  :",  this.state.visible );
+        this.setState({ visible : !this.state.visible })
     }
 
-    render() {
 
+    render() {
+        let { visible, setVisible } = this.state;
         return (
             <React.Fragment>
                 <Tooltip title={"custom icon"}>
@@ -20,6 +34,7 @@ export default class CustomToolbar extends React.Component {
                         <AddIcon />
                     </IconButton>
                 </Tooltip>
+                <PasswordModal visible={visible} handleClose={this.setVisible} />
             </React.Fragment>
         );
     }

src/Pages/ContrasV2.jsx

@@ -1,33 +1,17 @@
 import * as React from 'react';
-
-// import { rows, action_icon, Comparar, Cuerpo, } from '../Components/Password/config.js';
 import { default as CustomToolbar} from '../Components/Password/CustomToolbar';
 
 import { 
-    // Table, TableBody, TableCell, TableContainer, TableRow, TablePagination,
     Paper, Box, 
-    // Switch, FormControlLabel, Checkbox,
+    // Table, TableBody, TableCell, TableContainer, TableRow, TablePagination, Switch, FormControlLabel, Checkbox,
 } from '@mui/material';
 
-// import { EditSharp, MailSharp } from '@mui/icons-material'
-
-
-
 import MUIDataTable from "mui-datatables";
 
-const columns = ["Name", "Company", "City", "State"];
-
-const data = [
-    ["Joe James", "Test Corp", "Yonkers", "NY"],
-    ["John Walsh", "Test Corp", "Hartford", "CT"],
-    ["Bob Herm", "Test Corp", "Tampa", "FL"],
-    ["James Houston", "Test Corp", "Dallas", "TX"],
-];
-
-
 export function Contrasv2() {
 
 
+
     const columns = ["Name", "Company", "City", "State"];
 
     const data = [