0

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í:

introducir la descripción de la imagen aquí

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.

2
  • Lo que muestras al inicio es un objeto con clave 0, clave 1, etc... o es un array de objetos?
    – Pipe
    el 28 oct. 2022 a las 18:12
  • @pipe si es un array de objeto. voy a editar la pregunta y modificarlo para evitar confusiones
    – Ndmo
    el 28 oct. 2022 a las 18:52

1 respuesta 1

1

aquí te dejo una manera de construir las filas, las columnas y los datos de la tabla. Y también como pintar la tabla en React. Ya tu lo ajustas a tus necesidades.

let data = [{
    valores: 1942.3878000000004,
    filas: null,
    columnas: 'LAVA'
  },
  {
    filas: null,
    columnas: 'LAVAX',
    valores: 10096.954109999979
  },
  {
    filas: null,
    columnas: 'M&K',
    valores: 40.279619999999994
  },
  {
    columnas: 'ARO',
    valores: 365.3322,
    filas: null
  },
  {
    filas: '42966414',
    valores: 24.44068,
    columnas: 'LAVAX'
  },
  {
    valores: 500,
    filas: null,
    columnas: 'POR ASIGNAR'
  },
  {
    valores: 46.23729,
    filas: '42966414',
    columnas: 'LAVA'
  },
  {
    filas: '70744361',
    valores: 474.70847,
    columnas: 'POR ASIGNAR'
  },
  {
    valores: 96.91186,
    columnas: 'POR ASIGNAR',
    filas: '08453100'
  },
  {
    valores: 372.0999999999999,
    columnas: 'MISAY',
    filas: '10197075'
  },
  {
    filas: '08453100',
    columnas: 'M&K',
    valores: 0.51695
  },
  {
    valores: 33.4661,
    filas: '80228541',
    columnas: 'ARO'
  },
  {
    columnas: 'ARO',
    filas: '41667376',
    valores: 100.39829999999999
  },
  {
    valores: 66.9322,
    filas: '07461671',
    columnas: 'ARO'
  },
  {
    filas: '40137406',
    columnas: 'ARO',
    valores: 33.4661
  },
];

const datosTabla = data.reduce((acc, data) => {
  //Agregamos la fila a la lista de filas
  if (!acc.filas.includes(data.filas)) { 
    acc.filas.push(data.filas);
  }
  //Agregamos la columna a la lista de columnas
  if (!acc.columnas.includes(data.columnas)) { 
    acc.columnas.push(data.columnas);
  }

  const idxFila = acc.filas.indexOf(data.filas);
  const idxColumna = acc.columnas.indexOf(data.columnas);

  //Creamos la fila en los datos si no existe
  acc.data[idxFila] = acc.data[idxFila] || [data.filas];
  //Asignamos el valor de la fila/columna
  acc.data[idxFila][idxColumna] = data.valores;
  return acc;
}, {
  filas: [null], 
  columnas: [null],
  data: []
});

datosTabla.columnas.push("Totales"); //Agregamos la ultima columna "totales" a la lista de columnas
//Llenamos espacio vacios al final de cada fila, agregamos la columna de total y lo calculamos
for (const fila of datosTabla.data) {
  //Nos aseguramos que la fila tenga la misma cantidad de datos que las columnas
  fila.length = datosTabla.columnas.length;

  //calculamos el total y lo almacenamos
  fila[fila.length - 1] = fila.reduce((a, d, i) => i ? a + (d || 0) : a, 0);
}

//Creamos un componente de prueba
const App = (props) => {
  const { tabla } = props;
  return ( 
    <table>
      {/*Creamos la fila de las columnas con sus valores*/}
      <tr>{tabla.columnas.map(c => <td>{c}</td>)}</tr>
    
      {/*Creamos la tabla con cada una de sus filas y sus valores */}
      {tabla.data.map(f => <tr>
          {[...f].map(v => <td>{v}</td>)}
      </tr>)}
    </table>
  )
}
ReactDOM.render( <App tabla={datosTabla}/>, document.querySelector('#root'));
table, th, td {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

2
  • gracias lo probe y es justo lo que necesitaba.
    – Ndmo
    el 28 oct. 2022 a las 20:28
  • Hola, queria consultarte algo... con respecto a la solucion que me diste dias atras me funciono muy bien pero me he percatado que cuando no hay relacion en los datos que voy a mostrar se genera un espacio en blanco, como podria hacer para que la tabla se muestre toda, aqui te dejo la pregunta bien formulada a ver si me puedes ayudar es.stackoverflow.com/questions/566335/…
    – Ndmo
    el 7 nov. 2022 a las 14:41

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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