table style refactor

src/App.css

 
 .Mui-selected{
     /* se desahilito para la tabla de password */
-    /* color : #FFF !important; */
-    /* background-color : #fd4b4b !important; */
+    color : #FFF !important;
+    background-color : #fd4b4b !important;
     /* background-color : rgba(253, 75, 75, 0.1) !important; */
 }
 
     padding-top: 10px;
     align-items: baseline !important;
 }
+
+.contras_operation{
+    display : flex;
+    flex-direction:row;
+}

src/Components/Password/Header.jsx

+import { encabezados } from './Rows';
+import { visuallyHidden } from '@mui/utils';
+
+import { 
+    TableHead, TableRow, TableCell,
+    Checkbox, TableSortLabel, Box,
+    // IconButton,Typography,Toolbar, Tooltip
+} from '@mui/material'
+
+
+export function TableHeadCustom(props){
+    
+    const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
+    const createSortHandler = (property) => (event) => {
+        onRequestSort(event, property);
+    };
+
+    return (
+        <TableHead>
+            <TableRow>
+                <TableCell padding="checkbox">
+                    <Checkbox
+                        color="primary"
+                        indeterminate={numSelected > 0 && numSelected < rowCount}
+                        checked={rowCount > 0 && numSelected === rowCount}
+                        onChange={onSelectAllClick}
+                        inputProps={{
+                            'aria-label': 'select all desserts',
+                        }}
+                    />
+                </TableCell>
+                { encabezados.map( (headCell, index) => (
+                    <TableCell
+                        key={index}
+                        align={headCell.numeric ? 'right' : 'left'}
+                        padding={headCell.disablePadding ? 'none' : 'normal'}
+                        sortDirection={orderBy === headCell.id ? order : false}
+                    >
+                        <TableSortLabel
+                            style={{ fontWeight:'bold' }}
+                            active={orderBy === headCell.id}
+                            direction={orderBy === headCell.id ? order : 'asc'}
+                            onClick={createSortHandler(headCell.id)}
+                        >
+                            {headCell.label}
+                            {orderBy === headCell.id ? (
+                                <Box component="span" sx={visuallyHidden}>
+                                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                                </Box>
+                            ) : null}
+                        </TableSortLabel>
+                    </TableCell>
+                ))}
+            </TableRow>
+        </TableHead>
+    );
+
+}

src/Components/Password/HeaderOperation.jsx

+import { 
+    IconButton,Typography,Toolbar,
+    Tooltip
+} from '@mui/material'
+
+import { alpha } from '@mui/material/styles';
+
+import {
+    Delete as DeleteIcon,
+    Add as AddIcon,
+    ManageSearch as SearchIcon,
+} from '@mui/icons-material/'
+
+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} Seleccionados
+                </Typography>
+            ) : (
+                    <Typography
+                        sx={{ flex: '1 1 100%' }}
+                        variant="h6"
+                        id="tableTitle"
+                        component="div"
+                    >
+                        Contraseñas
+                    </Typography>
+                )}
+
+            {numSelected > 0 ? (
+                <Tooltip title="Elimnar">
+                    <IconButton>
+                        <DeleteIcon />
+                    </IconButton>
+                </Tooltip>
+            ) : (
+                    <div className="contras_operation">
+                        <Tooltip title="Buscar">
+                            <IconButton>
+                                <SearchIcon />
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title="Agregar">
+                            <IconButton onClick={() => console.log('click')}>
+                                <AddIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </div>
+                )}
+        </Toolbar>
+    );
+
+}

src/Components/Password/config.js

-import { 
-    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,
-} from '@mui/icons-material/'
-
 export const rows = [
     createData('Cupcake', 305, 'Analista',109238109238, 'SI', 'SI', 'Nice', 'Good'),
 ]
     margin :5
 }
 
-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} Seleccionados
-                </Typography>
-            ) : (
-                    <Typography
-                        sx={{ flex: '1 1 100%' }}
-                        variant="h6"
-                        id="tableTitle"
-                        component="div"
-                    >
-                        Contraseñas
-                    </Typography>
-                )}
-
-            {numSelected > 0 ? (
-                <Tooltip title="Elimnar">
-                    <IconButton>
-                        <DeleteIcon />
-                    </IconButton>
-                </Tooltip>
-            ) : (
-                    <Tooltip title="Buscar">
-                        <IconButton>
-                            <FilterListIcon />
-                        </IconButton>
-                    </Tooltip>
-                )}
-        </Toolbar>
-    );
-
-}
-
-
-
 export function createData( pass, nivel, puesto, cui, uso, picture, cv, replic, ope) {
     return {
         pass,
     });
     return stabilizedThis.map((el) => el[0]);
 }
-
-export function EnhancedTableHead(props){
-    // header de la tabla
-    
-    const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
-    const createSortHandler = (property) => (event) => {
-        onRequestSort(event, property);
-    };
-
-    return (
-        <TableHead>
-            <TableRow>
-                <TableCell padding="checkbox">
-                    <Checkbox
-                        color="primary"
-                        indeterminate={numSelected > 0 && numSelected < rowCount}
-                        checked={rowCount > 0 && numSelected === rowCount}
-                        onChange={onSelectAllClick}
-                        inputProps={{
-                            'aria-label': 'select all desserts',
-                        }}
-                    />
-                </TableCell>
-                { encabezados.map( (headCell, index) => (
-                    <TableCell
-                        key={index}
-                        align={headCell.numeric ? 'right' : 'left'}
-                        padding={headCell.disablePadding ? 'none' : 'normal'}
-                        sortDirection={orderBy === headCell.id ? order : false}
-                    >
-                        <TableSortLabel
-                            style={{ fontWeight:'bold' }}
-                            active={orderBy === headCell.id}
-                            direction={orderBy === headCell.id ? order : 'asc'}
-                            onClick={createSortHandler(headCell.id)}
-                        >
-                            {headCell.label}
-                            {orderBy === headCell.id ? (
-                                <Box component="span" sx={visuallyHidden}>
-                                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                                </Box>
-                            ) : null}
-                        </TableSortLabel>
-                    </TableCell>
-                ))}
-            </TableRow>
-        </TableHead>
-    );
-}

src/Pages/Contras.jsx

     action_icon,
     Comparar,
     Cuerpo,
-    EnhancedTableHead,
-    TableEncabezadoOperation
+    // TableEncabezadoOperation
 } from '../Components/Password/config.js';
 
+import { TableHeadCustom as TableHead } from '../Components/Password/Header'
+import { TableEncabezadoOperation as TableOperation } from '../Components/Password/HeaderOperation.jsx'
+
 import { 
     Table, TableBody, TableCell, TableContainer, 
     TableRow, TablePagination,
                 <Box sx={{ width: '100%' }}>
                     <Paper sx={{ width: '100%', mb: 2 }}>
 
-                        <TableEncabezadoOperation numSelected={selected.length} />
+                        <TableOperation numSelected={selected.length} />
 
                         <TableContainer>
 
                             <Table
                                 sx={{ minWidth: 750 }}
-                                aria-labelledby="Contrasenas"
-                                size={dense ? 'small' : 'medium'} 
-                            >
+                                aria-labelledby=""
+                                size={dense ? 'small' : 'medium'} >
 
-                                <EnhancedTableHead
+                                <TableHead
                                     numSelected={selected.length}
                                     order={order}
                                     orderBy={orderBy}