Tengo este documento en mi coleccion de firebase, el cual necesito usar los datos ahi almacenados para generar una tabla. Este es un ejemplo:
{
idReport: 1,
fechaReport: 1671571252625 ,
nombreReport: 'Reporte de marca y codMarca',
filas: {
fila1: {
campo: "marca",
data: ['ARO', 'LAVA', 'LAVAX', 'M&K', 'MISAY', 'POR ASIGNAR'],
},
fila2: {
campo: "codMarca",
data: ['000', '001', '031', '034', '035', '037'],
}
},
columnas: {
columna1: {
campo: "dni",
data: [ "002335320","00251971","01870087","07461671","08453100","10197075","15358913","20532057","25755976","32028784","40137406","40887352","40916178","41276688","41667376","41740528","42099254","42937450","42966414","43228412","44202123","46222913","46518452","47397154","70744361","80228541",null
]
}
},
valores: {
valor1: {
campo: "soles",
data: [0, 100.3983, 10026.42232, 102934.25846, 104.1017, 105.22032, 1076.4336, 1080.7628, 109.26915, 1090.25425, 10902.5425, 110.37288, 11444.35012, 1150.6704, 1155.93 ]
}
}
}
Este es mi codigo, donde intente hacerlo, pero me genera muchos errores; uno de esos es este error: Uncaught TypeError: Cannot read properties of undefined (reading 'columna1')
import React, { useState, useEffect } from "react";
import { getLastDocumentOfTheCollection } from "../Firebase/firebase.config";
const GeneratedReport = () => {
const [data, setData] = useState([]);
console.log(data, "data");
useEffect(() => {
getLastDocumentOfTheCollection(setData);
}, []);
return (
<div className="container-ReportGenerated">
<div className="table-wrapper">
<table className="containerTable">
<thead>
<tr>
{data.columnas.columna1.data.map((columns, i) =>
columns === "" ? <td key={i}></td> : <td key={i}>{columns}</td>
)}
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
);
};
export default GeneratedReport;
La tabla que necesito generar tiene que ser algo similar a esto:
Los datos de fila 1 y fila 2 deben ir de forma vertical al comienzo de la tabla, como se muestra ene le ejemplo en la zona amarilla. Los datos de columnas, serán el encabezado horizontal de todas las columnas (como se ve en la zona verde del ejemplo) y lo valores iran en las celdas de toda la tabla (como se ve en la zona roja).
Si alguien me puede dar una idea de como lograr esto, lo agradezco. También acepto sugerencias!