TransWikia.com

¿Cómo crear una tabla en React usando material-ui que se paresca a una tabla de excel?

Stack Overflow en español Asked by Ronier Ramos on December 16, 2021

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.

One Answer

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

Answered by Saul Moreyra on December 16, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP