0

Que tal me gustaría que me ayudaran a poder sumar la columna de una tabla en react que se muestre automáticamente al mostrar los datos. Soy nuevo en el desarrollo con React y me he topado con esta problemática.

saludos.

este es mi código que estoy implementando.

muestro mi cabecera de la tabla.

<thead>
  <tr>
    <th>CODIGO</th>
    <th>CONCEPTO</th>
    <th>MARCA</th>
    <th className="text-center">CANTIDAD</th>
    <th>UNIDAD</th>
    <th className="text-right">P.U.MXN</th>
    <th className="text-right">DESCUENTO</th>
    <th className="text-right">IMPORTE</th>
    <th className="text-right">P.U.USD</th>
    <th className="text-right">COD. FISCAL</th>
  </tr>
</thead>

Aquí lleno mi tabla.

<tbody>
   {Object.keys(products).map((key) => (
       <tr key={products[key].id}>
          <td>{products[key].codigo_fabrica}</td>
          <td>{products[key].descripcion}</td>
          <td>{products[key].marca}</td>
          <td>{products[key].cantidad}</td>
          <td>{products[key].unidad}</td>
          <td>${products[key].precio}</td>
          <td>{/* <input/> */}</td>
          <td>{/* <input/> */}</td>
          <td>{/* <input/> */}</td>
          <td></td>
          <td>
             <button onClick={() => removeProduct(key)} className="btn btn-danger"><i class="fa fa-trash"/></button>
          </td>
       </tr>
    )}
</tbody>

en esta parte es dónde quiero mostrar los resultados de la suma.

<tfoot>
  <tr>
    <td colSpan={7} className="text-right">
      <strong>TOTAL</strong>
    </td>
    <td className="text-right">
      <strong>$ </strong>
    </td>
  </tr>
</tfoot>

1 respuesta 1

0

Defines una variable que guarde el total:

render() {
  let total = 0;
  //...

luego en la iteración de productos vas sumando el total (asumo cantidad + precio):

   {Object.keys(products).map((key) => {
       total += products[key].cantidad * products[key].precio
       return (<tr key={products[key].id}>
          <td>{products[key].codigo_fabrica}</td>
          <td>{products[key].descripcion}</td>
          <td>{products[key].marca}</td>
          <td>{products[key].cantidad}</td>
          <td>{products[key].unidad}</td>
          <td>${products[key].precio}</td>
          <td>{/* <input/> */}</td>
          <td>{/* <input/> */}</td>
          <td>{/* <input/> */}</td>
          <td></td>
          <td>
             <button onClick={() => removeProduct(key)} className="btn btn-danger"><i class="fa fa-trash"/></button>
          </td>
       </tr>);
    }}

Y al final agregas el total acumulado:

<tfoot>
  <tr>
    <td colSpan={7} className="text-right">
      <strong>TOTAL</strong>
    </td>
    <td className="text-right">
      <strong>$ {total} </strong>
    </td>
  </tr>
</tfoot>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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