icons and other data

src/Components/Password/config.js

 
 
 
-export function createData(name, calories, fat, carbs, protein) {
+export function createData( pass, nivel, puesto, cui, uso, picture, cv, replic, ope) {
     return {
-        name,
-        calories,
-        fat,
-        carbs,
-        protein,
+        pass,
+        nivel,
+        puesto,
+        cui,
+        uso,
+        picture,
+        cv,
+        replic,
+        ope,
     };
 }
 
     );
 }
 
+export const action_icon =  {
+    color: '#ec5e69',
+    fontSize: "20",
+    padding:1
+    // background: '#ec5e69',
+    // color: "#fff",
+}
 
 
 

src/Pages/Contras.jsx

 import * as React from 'react';
 
+import {
+    EditSharp,
+    MailSharp,
+} from '@mui/icons-material'
+
 import { 
     // descendingComparator,
     rows,
+    action_icon,
     Comparar,
     Cuerpo,
     TableHeader as EnhancedTableHead,
 
 import { Row, Col, Container } from 'react-bootstrap';
 
+
 export function Contras() {
 
     const [order, setOrder] = React.useState('asc');
     const [selected, setSelected] = React.useState([]);
     const [page, setPage] = React.useState(0);
     const [dense, setDense] = React.useState(false);
-    const [rowsPerPage, setRowsPerPage] = React.useState(15);
+    const [rowsPerPage, setRowsPerPage] = React.useState(10);
 
     const handleRequestSort = (_event, property) => {
         const isAsc = orderBy === property && order === 'asc';
     };
 
     const handleSelectAllClick = (event) => {
+
         if (event.target.checked) {
             const newSelecteds = rows.map( (n) => n.name);
             setSelected(newSelecteds);
                                                                 scope="row"
                                                                 padding="none"
                                                             >
-                                                                {row.name}
+                                                                {row.pass}
+                                                            </TableCell>
+                                                            <TableCell align="right">{row.nivel}</TableCell>
+                                                            <TableCell align="right">{row.puesto}</TableCell>
+                                                            <TableCell align="right">{row.cui}</TableCell>
+                                                            <TableCell align="right">{row.uso}</TableCell>
+                                                            <TableCell align="right">{row.picture}</TableCell>
+                                                            <TableCell align="right">{row.cv}</TableCell>
+                                                            <TableCell align="right">{row.replic}</TableCell>
+                                                            <TableCell align="right">
+                                                                <EditSharp  style={action_icon} />
+                                                                <MailSharp style={action_icon}/>
                                                             </TableCell>
-                                                            <TableCell align="right">{row.calories}</TableCell>
-                                                            <TableCell align="right">{row.fat}</TableCell>
-                                                            <TableCell align="right">{row.carbs}</TableCell>
-                                                            <TableCell align="right">{row.protein}</TableCell>
-                                                            <TableCell align="right">{row.protein}</TableCell>
-                                                            <TableCell align="right">{row.protein}</TableCell>
                                                         </TableRow>
                                                     );
                                                 })}