custom datatable operation toolbar

package.json

@@ -23,6 +23,7 @@
         "jquery": "^3.6.0",
         "js-cookie": "^3.0.1",
         "jwt-decode": "^3.1.2",
+        "mui-datatables": "^4.2.2",
         "react": "^17.0.2",
         "react-bootstrap": "2.4.0",
         "react-dom": "^17.0.2",

src/App.css

@@ -82,7 +82,7 @@
     flex-direction: row;
     padding : 90px;
     max-height : 175px;
-    margin-bottom:20px
+    /* margin-bottom:20px */
 }
 .MuiFormControl{
     border : 1px solid #eceff1;

src/Components/Home/Actividades.js

@@ -71,7 +71,7 @@ export default function Actividades() {
                                             <TextField 
                                                 sx={{
                                                     '& ::before' : {
-                                                        'borderBottom': "0px solid red"
+                                                        'borderBottom': "0px solid red !important"
                                                     }
                                                 }}
                                                 fullWidth={true} 
@@ -96,7 +96,7 @@ export default function Actividades() {
                                         <TextField 
                                             sx={{
                                                 '& ::before' : {
-                                                    'borderBottom': "0px  solid red"
+                                                    'borderBottom': "0px  solid red !important"
                                                 }
                                             }}
                                             fullWidth={true} 

src/Components/Password/CustomToolbar.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import {
+    IconButton, Tooltip
+} from '@mui/material';
+
+import { Add as AddIcon } from '@mui/icons-material'
+
+export default class CustomToolbar extends React.Component {
+
+    handleClick = () => {
+        console.log("clicked on icon!");
+    }
+
+    render() {
+
+        return (
+            <React.Fragment>
+                <Tooltip title={"custom icon"}>
+                    <IconButton onClick={this.handleClick}>
+                        <AddIcon />
+                    </IconButton>
+                </Tooltip>
+            </React.Fragment>
+        );
+    }
+
+}
+

src/Components/Routes.js

@@ -6,7 +6,8 @@ import { Login } from '../Pages/Login'
 import { Register } from '../Pages/Register'
 import { Home } from '../Pages/Home'
 import { Puestos } from '../Pages/Puestos'
-import { Contras  } from '../Pages/Contras'
+// import { Contras  } from '../Pages/Contras'
+import { Contrasv2  as Contras } from '../Pages/ContrasV2'
 import { Expedientes } from '../Pages/Expedientes'
 import { Resultados } from '../Pages/Resultados'
 import { Configuracion } from '../Pages/Configuracion'

src/Css/all.css

@@ -290,7 +290,7 @@ li.nav-item {
     width: 100%;
     float: left;
     border: 1px solid #dcdcdc;
-    /* padding : 10px; */
+    padding : 10px;
 }
 .footerinfo p {
     font-size: 14px;

src/Pages/ContrasV2.jsx

@@ -0,0 +1,67 @@
+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,
+} 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 = [
+        ["Joe James", "Test Corp", "Yonkers", "NY"],
+        ["John Walsh", "Test Corp", "Hartford", "CT"],
+        ["Bob Herm", "Test Corp", "Tampa", "FL"],
+        ["James Houston", "Test Corp", "Dallas", "TX"],
+    ];
+
+
+    const options = {
+        filterType: 'checkbox',
+        customToolbar: () => {
+            return (
+                <CustomToolbar />
+            );
+        }
+    };
+
+    return (
+        <div className="content-section">
+            <div className="main">
+                <Box sx={{ width: '100%' }}>
+                    <Paper sx={{ width: '100%', mb: 2 }}>
+                        <MUIDataTable
+                            title={"Contraseñas"}
+                            data={data}
+                            columns={columns}
+                            options={options}
+                        />
+                    </Paper>
+                </Box>
+            </div>
+        </div>
+    );
+
+}