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);
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);
this.props.analytics
. Podrías tener un simple bucle que sumase esos valoresthis.props.analytics
lo añada a un array y lo vaya recorriendo y sumándolo y luego le paso el resultado?let total = this.props.analytics.reduce((acc,dato) => acc+dato.total,0);
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