separete the logic behind the pwd table

src/Components/Password/Rows.js

@@ -0,0 +1,56 @@
+export const encabezados = [
+    {
+        id: 'pass',
+        numeric: false,
+        disablePadding: true,
+        label: 'Contraseñas',
+    },
+    {
+        id: 'nivel',
+        numeric: true,
+        disablePadding: false,
+        label: 'Nivel',
+    },
+    {
+        id: 'puesto',
+        numeric: true,
+        disablePadding: false,
+        label: 'Puesto',
+    },
+    {
+        id: 'cui',
+        numeric: true,
+        disablePadding: false,
+        label: 'CUI/Cedula',
+    },
+    {
+        id: 'uso',
+        numeric: true,
+        disablePadding: false,
+        label: 'En uso?',
+    },
+    {
+        id: 'picture',
+        numeric: true,
+        disablePadding: false,
+        label: 'Fotografía',
+    },
+    {
+        id: 'cv',
+        numeric: true,
+        disablePadding: false,
+        label: 'Con CV',
+    },
+    {
+        id: 'replic',
+        numeric: true,
+        disablePadding: false,
+        label: 'Replicar',
+    },
+    {
+        id: 'ope',
+        numeric: true,
+        disablePadding: false,
+        label: 'Operacion',
+    },
+]

src/Components/Password/config.js

@@ -1,22 +1,84 @@
 import { 
-    TableHead,
-    TableRow,
-    TableCell,
-    Checkbox,
-    TableSortLabel,
-    Box,
+    TableHead, TableRow, TableCell,
+    Checkbox, TableSortLabel, Box,
+    IconButton,Typography,Toolbar,
+    Tooltip
 } from '@mui/material'
 
+import { alpha } from '@mui/material/styles';
 import { visuallyHidden } from '@mui/utils';
+import { encabezados } from './Rows';
+
+import {
+    Delete as DeleteIcon,
+    FilterList as FilterListIcon,
+    // LastPage as LastPageIcon, FirstPage as FirstPageIcon, KeyboardArrowRight, KeyboardArrowLeft,
+} from '@mui/icons-material/'
 
 export const rows = [
-    createData('Cupcake', 305, 3.7, 67, 4.3, 'Nice', 'Good'),
-    createData('Cupcake 1', 305, 3.7, 67, 4.3, 'Nice', 'Good'),
-    createData('Cupcake 2', 305, 3.7, 67, 4.3, 'Nice', 'Good'),
-    createData('Cupcake 3', 305, 3.7, 67, 4.3, 'Nice', 'Good'),
-    createData('Cupcake 4', 305, 3.7, 67, 4.3, 'Nice', 'Good'),
+    createData('Cupcake', 305, 'Analista',109238109238, 'SI', 'SI', 'Nice', 'Good'),
 ]
 
+for(let x of new Array(50)){
+    console.log(x)
+    rows.push(rows[0])
+}
+
+
+export const TableEncabezadoOperation = (props) => {
+
+    const { numSelected } = props;
+    return (
+        <Toolbar
+            sx={{
+                pl: { sm: 2 },
+                pr: { xs: 1, sm: 1 },
+                ...(numSelected > 0 && {
+                    bgcolor: (theme) =>
+                        alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+                }),
+            }}
+        >
+            {numSelected > 0 ? (
+                <Typography
+                    sx={{ flex: '1 1 100%' }}
+                    color="inherit"
+                    variant="subtitle1"
+                    component="div"
+                >
+                    {numSelected} selected
+                </Typography>
+            ) : (
+                    <Typography
+                        sx={{ flex: '1 1 100%' }}
+                        variant="h6"
+                        id="tableTitle"
+                        component="div"
+                    >
+                        Contraseñas
+                    </Typography>
+                )}
+
+            {numSelected > 0 ? (
+                <Tooltip title="Delete">
+                    <IconButton>
+                        <DeleteIcon />
+                    </IconButton>
+                </Tooltip>
+            ) : (
+                    <Tooltip title="Filter list">
+                        <IconButton>
+                            <FilterListIcon />
+                        </IconButton>
+                    </Tooltip>
+                )}
+        </Toolbar>
+    );
+
+}
+
+
+
 export function createData(name, calories, fat, carbs, protein) {
     return {
         name,
@@ -55,63 +117,6 @@ export function Cuerpo(array, comparator) {
     return stabilizedThis.map((el) => el[0]);
 }
 
-export const encabezados = [
-    {
-        id: 'pass',
-        numeric: false,
-        disablePadding: true,
-        label: 'Contraseñas',
-    },
-    {
-        id: 'nivel',
-        numeric: true,
-        disablePadding: false,
-        label: 'Nivel',
-    },
-    {
-        id: 'puesto',
-        numeric: true,
-        disablePadding: false,
-        label: 'Puesto',
-    },
-    {
-        id: 'cui',
-        numeric: true,
-        disablePadding: false,
-        label: 'CUI/Cedula',
-    },
-    {
-        id: 'uso',
-        numeric: true,
-        disablePadding: false,
-        label: 'En uso?',
-    },
-    {
-        id: 'picture',
-        numeric: true,
-        disablePadding: false,
-        label: 'Fotografía',
-    },
-    {
-        id: 'cv',
-        numeric: true,
-        disablePadding: false,
-        label: 'Con CV',
-    },
-    {
-        id: 'replic',
-        numeric: true,
-        disablePadding: false,
-        label: 'Replicar',
-    },
-    {
-        id: 'ope',
-        numeric: true,
-        disablePadding: false,
-        label: 'Operacion',
-    },
-]
-
 export function TableHeader(props){
 
     const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =

src/Pages/Contras.jsx

@@ -1,84 +1,24 @@
 import * as React from 'react';
-// import { useTheme } from '@mui/material/styles';
+
 import { 
-    rows,
     // descendingComparator,
+    rows,
     Comparar,
     Cuerpo,
-    TableHeader as EnhancedTableHead
+    TableHeader as EnhancedTableHead,
+    TableEncabezadoOperation
 } from '../Components/Password/config.js';
 
 import { 
     Table, TableBody, TableCell, TableContainer, 
     TableRow, TablePagination,
-    IconButton, Paper, Box,
-    Switch, FormControlLabel,Tooltip,
-    Checkbox, Typography, Toolbar,
+    Paper, Box, Switch, FormControlLabel,
+    Checkbox,
     // TableSortLabel,TableHead,Card
 } from '@mui/material';
 
-import { alpha } from '@mui/material/styles';
-
 import { Row, Col, Container } from 'react-bootstrap';
 
-import {
-    Delete as DeleteIcon,
-    FilterList as FilterListIcon,
-    // LastPage as LastPageIcon, FirstPage as FirstPageIcon, KeyboardArrowRight, KeyboardArrowLeft,
-} from '@mui/icons-material/'
-
-const TableEncabezadoOperation = (props) => {
-
-    const { numSelected } = props;
-    return (
-        <Toolbar
-            sx={{
-                pl: { sm: 2 },
-                pr: { xs: 1, sm: 1 },
-                ...(numSelected > 0 && {
-                    bgcolor: (theme) =>
-                        alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
-                }),
-            }}
-        >
-            {numSelected > 0 ? (
-                <Typography
-                    sx={{ flex: '1 1 100%' }}
-                    color="inherit"
-                    variant="subtitle1"
-                    component="div"
-                >
-                    {numSelected} selected
-                </Typography>
-            ) : (
-                    <Typography
-                        sx={{ flex: '1 1 100%' }}
-                        variant="h6"
-                        id="tableTitle"
-                        component="div"
-                    >
-                        Contraseñas
-                    </Typography>
-                )}
-
-            {numSelected > 0 ? (
-                <Tooltip title="Delete">
-                    <IconButton>
-                        <DeleteIcon />
-                    </IconButton>
-                </Tooltip>
-            ) : (
-                    <Tooltip title="Filter list">
-                        <IconButton>
-                            <FilterListIcon />
-                        </IconButton>
-                    </Tooltip>
-                )}
-        </Toolbar>
-    );
-
-}
-
 export function Contras() {
 
     const [order, setOrder] = React.useState('asc');
@@ -88,7 +28,7 @@ export function Contras() {
     const [dense, setDense] = React.useState(false);
     const [rowsPerPage, setRowsPerPage] = React.useState(15);
 
-    const handleRequestSort = (event, property) => {
+    const handleRequestSort = (_event, property) => {
         const isAsc = orderBy === property && order === 'asc';
         setOrder(isAsc ? 'desc' : 'asc');
         setOrderBy(property);
@@ -103,7 +43,7 @@ export function Contras() {
         setSelected([]);
     };
 
-    const handleClick = (event, name) => {
+    const handleClick = (__event, name) => {
         const selectedIndex = selected.indexOf(name);
         let newSelected = [];
 
@@ -123,7 +63,7 @@ export function Contras() {
         setSelected(newSelected);
     };
 
-    const handleChangePage = (event, newPage) => {
+    const handleChangePage = (_event, newPage) => {
         setPage(newPage);
     };
 
@@ -170,7 +110,6 @@ export function Contras() {
                                                     const isItemSelected = isSelected(row.name);
                                                     const labelId = `enhanced-table-checkbox-${index}`;
 
-                                                    console.log('INDEX >> ',row)
                                                     return (
                                                         <TableRow
                                                             hover