Tengo un objeto con varios datos que necesito mostrar en una tabla, la tabla no debe mostrar registros duplicados. La tabla sería algo así:
y mi array de objetos esta organizado de la siguiente manera:
[
0: {valores: 1942.3878000000004, filas: null, columnas: 'LAVA'}
1: {filas: null, columnas: 'LAVAX', valores: 10096.954109999979}
2: {filas: null, columnas: 'M&K', valores: 40.279619999999994}
3: {columnas: 'ARO', valores: 365.3322, filas: null}
4: {filas: '42966414', valores: 24.44068, columnas: 'LAVAX'}
5: {valores: 500, filas: null, columnas: 'POR ASIGNAR'}
6: {valores: 46.23729, filas: '42966414', columnas: 'LAVA'}
7: {filas: '70744361', valores: 474.70847, columnas: 'POR ASIGNAR'}
8: {valores: 96.91186, columnas: 'POR ASIGNAR', filas: '08453100'}
9: {valores: 372.0999999999999, columnas: 'MISAY', filas: '10197075'}
10: {filas: '08453100', columnas: 'M&K', valores: 0.51695}
11: {valores: 33.4661, filas: '80228541', columnas: 'ARO'}
12: {columnas: 'ARO', filas: '41667376', valores: 100.39829999999999}
13: {valores: 66.9322, filas: '07461671', columnas: 'ARO'}
14: {filas: '40137406', columnas: 'ARO', valores: 33.4661}
]
Este es mi código donde estuve intentando crear la tabla; pero al momento de asignar los valores no se hacer la relación, tampoco supe como hacer crear un solo valor para la columnas superior y la fila lateral independientemente que hayan dos o mas registros con el mismo nombre o numero.
import React, { useEffect, useState } from "react";
import "../assets/styles/ReportGenerated.css";
import ButtonApp from "../components/ButtonApp";
import { Icon } from "@iconify/react";
import { db } from "../Firebase/firebase.config";
import { collection, getDocs, limit, orderBy, query } from "firebase/firestore";
const ReportGenerated = () => {
const [table, setTable] = useState([]);
console.log("probando", table);
const getLastDocumentOfTheCollection = async () => {
const q = query(
collection(db, "tables"),
limit(1),
orderBy("fecha", "desc")
);
const lastDocument = await getDocs(q);
lastDocument.forEach((doc) => {
console.log("data", doc.data());
const data = doc.data().consultApi;
setTable(data);
});
};
useEffect(() => {
getLastDocumentOfTheCollection();
}, []);
return (
<div className="container-ReportGenerated">
<p className="successMsg">Su reporte fue generado satisfactoriamente!</p>
<div className="table">
<table>
<td>vacio</td>
{table.map((el, index) => {
console.log("veamos", el.columnas);
return (
<td>
<th key={index}>{el.columnas}</th>
</td>
);
})}
{table.map((el, index) => {
console.log("veamos", el.filas);
return (
<tr>
<td key={index}>{el.filas}</td>
</tr>
);
})}
</table>
</div>
<div className="containerBtns">
<ButtonApp
icon={
<Icon
icon="fluent:document-save-24-filled"
width="20"
height="20"
/>
}
name="Guardar"
/>
<ButtonApp
icon={<Icon icon="fa6-solid:download" width="20" height="20" />}
name="Exportar"
/>
</div>
</div>
);
};
export default ReportGenerated;
Si conocen alguna librería que me pueda ayudar también seria un gran aporte.