1

Editado

El problema principal era lograr sacar con el mismo componente, el total de una columna. Al final de la pregunta está el código con la solución, para un pie de tabla (footer)

import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { connect } from 'react-redux';
import _ from 'lodash';

const formatName = (cell, row, extra) => {
  let display = 'No disponible'; if (_.get(row, 'name')) { display = `${_.get(row, 'name')}` }
  return (
    <div>
      {display}
    </div>
  )
};
const formatPrice = (cell, row, extra) => {
  let display = 0 ; if (_.get(row, 'total')) { display = `${_.get(row, 'total')}` }

  return (
    <div>
      {parseFloat(display).toFixed(2)}€
    </div>
  )
};



const formatTotalPrice = (cell, row, extra) => {
  let display = 0 ; if (_.get(cell, 'total')) { display = `${_.get(cell, 'total')}` }

  console.log('TOTAL:  ', display)
  return (
    <div>
      {
        parseFloat(_.sumBy(display,'total')).toFixed(2)
      }€
    </div>
  )
}

class ChartInventory extends React.Component {
  state = {
    sortName: 'name',
    sortOrder: 'asc',
  }

  render() {
    const options = {
      sortName: this.state.sortName,
      sortOrder: this.state.sortOrder
    };


    console.log(this.props.analytics)
    return (
      <span>
        <BootstrapTable data={this.props.analytics}
          trClassName="table-row"
          ref="inventoryAnalyticsTable">
          <TableHeaderColumn isKey={true} dataField='total' headerAlign='right' dataAlign='right' dataFormat={formatTotalPrice}>Precio Total</TableHeaderColumn>
        </BootstrapTable>
        <BootstrapTable data={this.props.analytics}
          options={options}
          pagination={this.props.analytics.length > 50}
          trClassName="table-row"
          ref="inventoryAnalyticsTable">
          <TableHeaderColumn isKey={true} dataField='name' headerAlign='center' dataAlign='center' dataFormat={formatName} dataSort>Nombre</TableHeaderColumn>
          <TableHeaderColumn dataField='total' width='100' headerAlign='center' dataAlign='center' dataFormat={formatPrice}>Precio</TableHeaderColumn>
        </BootstrapTable>
      </span>
    );
  }
}

const mapStateToprops = state => ({
  analytics: state.inventory.analytics,
});

export default connect(mapStateToprops, null)(ChartInventory);

Aquí una imagen del resultado donde salen los ceros debería de salir el total

Problema editado

import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { connect } from 'react-redux';
import _ from 'lodash';

const formatName = (cell, row, extra) => {
  let display = 'No disponible'; if (_.get(row, 'name')) { display = `${_.get(row, 'name')}` }
  return (
    <div>
      {display}
    </div>
  )
};

const formatPrice = (cell, row, extra) => {
  let display = 0; if (_.get(row, 'total')) { display = `${_.get(row, 'total')}` }
  return (
    <div>
      {parseFloat(display).toFixed(2)}€
    </div>
  )
};

class ChartInventory extends React.Component {
  state = {
    sortName: 'name',
    sortOrder: 'asc',
  }

  render() {
    const options = {
      sortName: this.state.sortName,
      sortOrder: this.state.sortOrder
    };

    const footerTotalPrice = [
      [
        {
          label: 'Total',
          align: 'center',
          columnIndex: 0
        },
        {
          label: 'Total value',
          columnIndex: 1,
          align: 'center',
          formatter: (data) => {
            let label = 0;
            for (let i = 0, dataLec = data.length; i < dataLec; i++) {
              label += data[i].total;
            }
            return (
              <strong>{label}€</strong>
            );
          }
        }
      ]
    ];


    console.log('ANALYTICS ', this.props.analytics)
    return (
      <div style={{ overflow: 'hidden' }}>
        <div style={{ float: 'left', width: 780 }} padder>
          <BootstrapTable data={this.props.analytics}
            footer
            footerData={footerTotalPrice}
            options={options}
            pagination={this.props.analytics.length > 50}
            trClassName="table-row"
            ref="inventoryAnalyticsTable">
            <TableHeaderColumn isKey={true} dataField='name' headerAlign='center' dataAlign='center' dataFormat={formatName} dataSort>Nombre</TableHeaderColumn>
            <TableHeaderColumn dataField='total' width='200' headerAlign='center' dataAlign='center' dataFormat={formatPrice}>Precio</TableHeaderColumn>
          </BootstrapTable>
        </div>
      </div >
    );
  }
}

const mapStateToprops = state => ({
  analytics: state.inventory.analytics,
});

export default connect(mapStateToprops, null)(ChartInventory);

Imagen del resultado editada.

introducir la descripción de la imagen aquí

5
  • Donde salen los 0 debería salir solo un total de la columna Precio
    – Apol0x
    Commented el 17 oct. 2018 a las 9:11
  • ¿Por qué no lo sumas directamente desde el modelo? Es decir, a la tabla le pasas los datos con this.props.analytics. Podrías tener un simple bucle que sumase esos valores Commented el 17 oct. 2018 a las 9:39
  • @PabloLozano ¿Te refieres desde el action? ¿exportar otra formula que recoja this.props.analytics lo añada a un array y lo vaya recorriendo y sumándolo y luego le paso el resultado?
    – Apol0x
    Commented el 17 oct. 2018 a las 10:14
  • Sí. No sé lo que tiene analitics, pero si es un array de datos podrías hacer let total = this.props.analytics.reduce((acc,dato) => acc+dato.total,0); Commented el 17 oct. 2018 a las 10:28
  • this.props.analytics tiene un Array de Objetos. La verdad es que ando un poco perdido, porque se esconde mucho código en este tipo de JavaScript
    – Apol0x
    Commented el 17 oct. 2018 a las 10:41

1 respuesta 1

1

He conseguido sacar el total, pero fuera de la tabla, lo ideal hubiera sido en una tabla o más ordenado. Así quedaría el código:

import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { connect } from 'react-redux';
import _ from 'lodash';

const formatName = (cell, row, extra) => {
  let display = 'No disponible'; if (_.get(row, 'name')) { display = `${_.get(row, 'name')}` }
  return (
    <div>
      {display}
    </div>
  )
};
const formatPrice = (cell, row, extra) => {
  let display = 0; if (_.get(row, 'total')) { display = `${_.get(row, 'total')}` }

  return (
    <div>
      {parseFloat(display).toFixed(2)}€
    </div>
  )
};

class ChartInventory extends React.Component {
  state = {
    sortName: 'name',
    sortOrder: 'asc',
  }



  render() {
    const options = {
      sortName: this.state.sortName,
      sortOrder: this.state.sortOrder
    };

    console.log('ANALYTICS ', this.props.analytics)
    return (
      <span>
        <div style={{ display: 'flex', flex: 1, flexDirection: 'column', alignItems: 'flex-end' }}>
          <div style={{ fontWeight: 'bold', justifyContent: 'center' }}>
            Precio Total
          </div>
          {_.sumBy(this.props.analytics, 'total').toFixed(2)}€
        </div>
        <BootstrapTable data={this.props.analytics}
          options={options}
          pagination={this.props.analytics.length > 50}
          trClassName="table-row"
          ref="inventoryAnalyticsTable">
          <TableHeaderColumn isKey={true} dataField='name' headerAlign='center' dataAlign='center' dataFormat={formatName} dataSort>Nombre</TableHeaderColumn>
          <TableHeaderColumn dataField='total' width='100' headerAlign='center' dataAlign='center' dataFormat={formatPrice}>Precio</TableHeaderColumn>
        </BootstrapTable>
      </span >
    );
  }
}

const mapStateToprops = state => ({
  analytics: state.inventory.analytics,
});

export default connect(mapStateToprops, null)(ChartInventory);

Y así la vista:

introducir la descripción de la imagen aquí

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.