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

Question

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. No. Servicios Cantidad de profesores por actividad Edades Niños F M Adolecentes F M Jovenes F M Adultos F M Adulto Mayyor F M Subtotal Total test test

Esta es la tabla que intento recrear: Agradeceria que me ayudaran, es para mi tesis de año.

Saul Moreyra · Answer

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

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

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

One Answer

Add your own answers!

Ask a Question