fix tables render style

src/temp.js

@@ -12,7 +12,7 @@ import { useSelector } from 'react-redux';
 import { Service } from './Utils/HTTP';
 
 import {
- IconButton, Tooltip,
+  IconButton, Tooltip,
 } from '@mui/material';
 
 import {
@@ -69,7 +69,7 @@ function IconStatus(props) {
 
 
 
-function getOperation(estado, SuperPWD,setId) {
+function getOperation(estado, SuperPWD, setId) {
   // Patrik: 100 -> Significa que el examen esta completo
   // Patrik: 99 -> Que el candidato lo esta haciendo (como "doing test" del otro servicio)
   // Patrik: 97 ->  Que hay un error y que hay mas respuestas de las que deberian
@@ -78,7 +78,7 @@ function getOperation(estado, SuperPWD,setId) {
     case 1: // solo asignado
       return <IconStatus color="#0bd641" icon={AddTaskIcon} message="Candidato Asignado" />
     case 97: //error en las respuestas
-      return <IconStatus color="var(--main)"  icon={ErrorIcon} message="Hay error en las respuestas" />
+      return <IconStatus color="var(--main)" icon={ErrorIcon} message="Hay error en las respuestas" />
     case 99: // el candidato se encuentra realizndolo
       return <IconStatus color="#f5f511" icon={AssignmentTurnedInIcon} message="El candidato se encuentra realizando la prueba" />
     case 100: // finalizado
@@ -94,10 +94,9 @@ function Asignaciones(props) {
   let { estado, cattest, id: SuperPWD } = asign;
 
   return (
-    <tr>
-      <td className="asign_status">
-        {cattest.decription}
-        {/*
+    <div>
+      {cattest.decription}
+      {/*
           test_result.length > 0 ?
             (
               <Tooltip title="Mostrar resultados">
@@ -111,11 +110,10 @@ function Asignaciones(props) {
               </Tooltip>
             ) : null
       */}
-        {
-          getOperation(estado, SuperPWD, setId)
-        }
-      </td>
-    </tr>
+      {
+        getOperation(estado, SuperPWD, setId)
+      }
+    </div>
   )
 }
 
@@ -123,28 +121,28 @@ function Asignaciones(props) {
 
 
 export function DenseTable(props) {
-  let { users,setId } = props
+  let { users, setId } = props
   // console.log("users", users)
   return (
     <TableContainer component={Paper}>
       <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
         <TableHead>
           <TableRow>
-            <TableCell align="left">Nombre</TableCell>
-            <TableCell align="left">Asignaciones</TableCell>
+            <TableCell align="left"><strong>Nombre</strong></TableCell>
+            <TableCell align="right"><strong>Asignacion</strong></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
           {users.map((row) => (
             <TableRow
-              key={row.name }
+              key={row.name}
               sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
             >
               <TableCell align="left" component="th" scope="row">
-                {row.candi.nombre  + " " + row.candi.apellidos}
+                {row.candi.nombre + " " + row.candi.apellidos}
               </TableCell>
-              <TableCell align="left">
-                {row.asignaciones.map(a => <Asignaciones setId={setId} key={a.id} asign={a}/>)}
+              <TableCell align="right">
+                {row.asignaciones.map(a => <Asignaciones setId={setId} key={a.id} asign={a} />)}
               </TableCell>
             </TableRow>
           ))}