password component

src/Components/Password/TableStyle.js

@@ -0,0 +1,29 @@
+import { createTheme } from '@mui/material';
+    
+export const TableStyle = () => createTheme({
+    components: {
+        MuiPaper:{
+            styleOverrides: {
+                root: {
+                    boxShadow:'none'
+                }
+            }
+
+        },
+        MUIDataTableBodyCell: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: "#FFF"
+                }
+            }
+        },
+        MuiTablePagination:{
+            styleOverrides: {
+                toolbar: {
+                    paddingTop :7,
+                    alignItems: 'baseline'
+                }
+            }
+        }
+    }
+})

src/Pages/ContrasV2.jsx

@@ -1,27 +1,30 @@
 import * as React from 'react';
 import { default as CustomToolbar } from '../Components/Password/CustomToolbar';
-
-import {
-    Paper, Box,
-    // Table, TableBody, TableCell, TableContainer, TableRow, TablePagination, Switch, FormControlLabel, Checkbox,
-} from '@mui/material';
+import { Paper, Box, ThemeProvider } from '@mui/material';
 
 import MUIDataTable from "mui-datatables";
+import { encabezados } from '../Components/Password/Rows';
+import { TableStyle } from '../Components/Password/TableStyle'
 
 export function Contrasv2() {
 
-
-
-    const columns = ["Name", "Company", "City", "State"];
+    const columns = encabezados.map(({ label }) => label); //["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"],
+        ["Joe James", "Test Corp", "Yonkers", "NY"],
+        ["John Walsh", "Test Corp", "Hartford", "CT"],
+        ["Bob Herm", "Test Corp", "Tampa", "FL"],
+        ["James Houston", "Test Corp", "Dallas", "TX"],
+        ["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: () => {
@@ -31,17 +34,21 @@ export function Contrasv2() {
         }
     };
 
+
     return (
         <div className="content-section">
             <div className="main">
                 <Box sx={{ width: '100%' }}>
-                    <Paper sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh' }}>
-                        <MUIDataTable
-                            title={"Contraseñas"}
-                            data={data}
-                            columns={columns}
-                            options={options}
-                        />
+                    <Paper elevation={0} sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh', boxShadow: 'none !important' }}>
+                        <ThemeProvider theme={TableStyle}>
+                            <MUIDataTable
+                                sx={{ '& MuiPaper': { elevation: 0, boxShadow: 'none', color: "red" } }}
+                                title={"Contraseñas"}
+                                data={data}
+                                columns={columns}
+                                options={options}
+                            />
+                        </ThemeProvider>
                     </Paper>
                 </Box>
             </div>