1

Tengo que hacer una tabla usando material-ui para que se paresca a otra que tengo hecha en excel. La verdad la hice pero no queda igual. Mi duda es en en TableHead, no me queda igual que la que quiero recrear. aca les muestro el codigo de mi componente para que vean donde esta el error.

 <Table size="small">
    <TableHead>
        <TableRow>
            <TableCell>No.</TableCell>
            <TableCell>Servicios</TableCell>
            <TableCell>Cantidad de profesores por actividad</TableCell>
            <TableCell>Edades
                <TableCell>Niños
                    <TableCell>F</TableCell>
                    <TableCell>M</TableCell>
                </TableCell>
                <TableCell>
                    <TableCell>Adolecentes
                        <TableCell>F</TableCell>
                        <TableCell>M</TableCell>
                    </TableCell>
                    <TableCell>Jovenes
                        <TableCell>F</TableCell>
                        <TableCell>M</TableCell>
                    </TableCell>
                    <TableCell>Adultos
                        <TableCell>F</TableCell>
                        <TableCell>M</TableCell>
                    </TableCell>
                    <TableCell>Adulto Mayyor
                        <TableCell>F</TableCell>
                        <TableCell>M</TableCell>
                    </TableCell>
                </TableCell>
            </TableCell>
            <TableCell>Subtotal</TableCell>
            <TableCell>Total</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        <TableRow>
            <TableCell>test</TableCell>
            <TableCell>test</TableCell>
        </TableRow>
    </TableBody>
</Table>

Esta es la tabla que intento recrear: introducir la descripción de la imagen aquí

Agradeceria que me ayudaran, es para mi tesis de año.

1 respuesta 1

1

Hola hice un pequeño ejemplo, espero te sirva, lo que necesitas para acomodar tus celdas es usar rowSpan y colSpan

introducir la descripción de la imagen aquí

  • Material UI usa generadores de estilos, como makeStyles

  • A continuación te muestro un ejemplo, en donde se le da un border de 3px y borderStyle solid

    const useStyles = makeStyles({
       root: {
         "& > *": {
            borderStyle: "solid",
            border: 3
          }
       }
    });
    
  • En algunas celdas de la tabla se usa rowSpan y colSpan para decirle a la tabla que se quieren abarcar más filas o columnas, el equivalente en Excel a combinas celdas

    <TableCell align="center" rowSpan={2}> o <TableCell colSpan={4} align="center">
    
  • Te dejo el código completo o puedes ir a ver el código funcionando en Sandox

1
  • 1
    Muchas gracias Saul Moreyra, la verdad soy nuevo usando material-ui y aun no trabajo bien con los estilos. Me has salvado la vida. Commented el 25 jul. 2020 a las 14:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.