row selected type

src/Components/Password/Rows.js

@@ -49,7 +49,7 @@ export const encabezados = [
     },
     {
         id: 'ope',
-        numeric: true,
+        numeric: false,
         disablePadding: false,
         label: 'Operacion',
     },

src/Components/Password/config.js

@@ -12,22 +12,30 @@ 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, 'Analista',109238109238, 'SI', 'SI', 'Nice', 'Good'),
 ]
 
-for(let x of new Array(50)){
-    console.log(x)
-    rows.push(rows[0])
-}
+new Array(50).fill(50).forEach( (_,i) => {
+    rows.push({
+        ...rows[0],
+        nivel:i + 10000,
+        pass : Math.random().toString(36).slice(-6),
+    })
+})
 
+export const action_icon =  {
+    color: '#ec5e69',
+    fontSize: "20",
+    padding:1
+}
 
 export const TableEncabezadoOperation = (props) => {
 
     const { numSelected } = props;
+
     return (
         <Toolbar
             sx={{
@@ -46,7 +54,7 @@ export const TableEncabezadoOperation = (props) => {
                     variant="subtitle1"
                     component="div"
                 >
-                    {numSelected} selected
+                    {numSelected} Seleccionados
                 </Typography>
             ) : (
                     <Typography
@@ -60,13 +68,13 @@ export const TableEncabezadoOperation = (props) => {
                 )}
 
             {numSelected > 0 ? (
-                <Tooltip title="Delete">
+                <Tooltip title="Elimnar">
                     <IconButton>
                         <DeleteIcon />
                     </IconButton>
                 </Tooltip>
             ) : (
-                    <Tooltip title="Filter list">
+                    <Tooltip title="Buscar">
                         <IconButton>
                             <FilterListIcon />
                         </IconButton>
@@ -121,10 +129,10 @@ export function Cuerpo(array, comparator) {
     return stabilizedThis.map((el) => el[0]);
 }
 
-export function TableHeader(props){
-
-    const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
-        props;
+export function EnhancedTableHead(props){
+    // header de la tabla
+    
+    const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
     const createSortHandler = (property) => (event) => {
         onRequestSort(event, property);
     };
@@ -141,7 +149,7 @@ export function TableHeader(props){
                         inputProps={{
                             'aria-label': 'select all desserts',
                         }}
-                        />
+                    />
                 </TableCell>
                 { encabezados.map( (headCell, index) => (
                     <TableCell
@@ -169,14 +177,3 @@ export function TableHeader(props){
         </TableHead>
     );
 }
-
-export const action_icon =  {
-    color: '#ec5e69',
-    fontSize: "20",
-    padding:1
-    // background: '#ec5e69',
-    // color: "#fff",
-}
-
-
-

src/Pages/Contras.jsx

@@ -11,7 +11,7 @@ import {
     action_icon,
     Comparar,
     Cuerpo,
-    TableHeader as EnhancedTableHead,
+    EnhancedTableHead,
     TableEncabezadoOperation
 } from '../Components/Password/config.js';
 
@@ -29,20 +29,19 @@ import { Row, Col, Container } from 'react-bootstrap';
 export function Contras() {
 
     const [order, setOrder] = React.useState('asc');
-    const [orderBy, setOrderBy] = React.useState('calories');
+    const [orderBy, setOrderBy] = React.useState('pass');
     const [selected, setSelected] = React.useState([]);
     const [page, setPage] = React.useState(0);
     const [dense, setDense] = React.useState(false);
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
 
-    const handleRequestSort = (_event, property) => {
+    const CambiarTipoOrden = (_event, property) => {
         const isAsc = orderBy === property && order === 'asc';
         setOrder(isAsc ? 'desc' : 'asc');
         setOrderBy(property);
     };
 
-    const handleSelectAllClick = (event) => {
-
+    const SeleccionarTodos = (event) => {
         if (event.target.checked) {
             const newSelecteds = rows.map( (n) => n.name);
             setSelected(newSelecteds);
@@ -51,10 +50,13 @@ export function Contras() {
         setSelected([]);
     };
 
-    const handleClick = (__event, name) => {
+    const Seleccionar = (event, name) => {
+
         const selectedIndex = selected.indexOf(name);
         let newSelected = [];
 
+        console.log(name, selectedIndex)
+
         if (selectedIndex === -1) {
             newSelected = newSelected.concat(selected, name);
         } else if (selectedIndex === 0) {
@@ -96,36 +98,43 @@ export function Contras() {
                         <Col>
                             <Box sx={{ width: '100%' }}>
                                 <Paper sx={{ width: '100%', mb: 2 }}>
+
                                     <TableEncabezadoOperation numSelected={selected.length} />
+
                                     <TableContainer>
+
                                         <Table
                                             sx={{ minWidth: 750 }}
                                             aria-labelledby="tableTitle"
-                                            size={dense ? 'small' : 'medium'}
+                                            size={dense ? 'small' : 'medium'} 
                                         >
+
                                             <EnhancedTableHead
                                                 numSelected={selected.length}
                                                 order={order}
                                                 orderBy={orderBy}
-                                                onSelectAllClick={handleSelectAllClick}
-                                                onRequestSort={handleRequestSort}
-                                                rowCount={rows.length}
-                                                />
+                                                onSelectAllClick={SeleccionarTodos}
+                                                onRequestSort={CambiarTipoOrden}
+                                                rowCount={rows.length} />
+
+
                                             <TableBody>
                                                 {Cuerpo(rows, Comparar(order, orderBy))
                                                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                                                 .map( (row, index) => {
-                                                    const isItemSelected = isSelected(row.name);
+
+                                                    const isItemSelected = isSelected(row.pass);
                                                     const labelId = `enhanced-table-checkbox-${index}`;
 
                                                     return (
                                                         <TableRow
                                                             hover
-                                                            onClick={(event) => handleClick(event, row.name)}
+                                                            onClick={(event) => Seleccionar(event, row.pass)}
+                                                            // onClick={(event) => console.log(event)}
                                                             role="checkbox"
                                                             aria-checked={isItemSelected}
                                                             tabIndex={-1}
-                                                            key={row.name}
+                                                            key={row.pass}
                                                             selected={isItemSelected}
                                                         >
                                                             <TableCell padding="checkbox">
@@ -135,7 +144,7 @@ export function Contras() {
                                                                     inputProps={{
                                                                         'aria-labelledby': labelId,
                                                                     }}
-                                                                />
+                                                                    />
                                                             </TableCell>
                                                             <TableCell
                                                                 component="th"
@@ -152,7 +161,7 @@ export function Contras() {
                                                             <TableCell align="right">{row.picture}</TableCell>
                                                             <TableCell align="right">{row.cv}</TableCell>
                                                             <TableCell align="right">{row.replic}</TableCell>
-                                                            <TableCell align="right">
+                                                            <TableCell align="center">
                                                                 <EditSharp  style={action_icon} />
                                                                 <MailSharp style={action_icon}/>
                                                             </TableCell>
@@ -171,6 +180,7 @@ export function Contras() {
                                             </TableBody>
                                         </Table>
                                     </TableContainer>
+
                                     <TablePagination
                                         rowsPerPageOptions={[5, 10, 25]}
                                         component="div"
@@ -179,12 +189,16 @@ export function Contras() {
                                         page={page}
                                         onPageChange={handleChangePage}
                                         onRowsPerPageChange={handleChangeRowsPerPage}
-                                        />
+                                    />
+
+
                                 </Paper>
+
                                 <FormControlLabel
                                     control={<Switch checked={dense} onChange={handleChangeDense} />}
                                     label="Comprimir"
-                                    />
+                                />
+
                             </Box>
                         </Col>
                     </Row>