AllenFang / react-bootstrap-table

A Bootstrap table built with React.js
https://allenfang.github.io/react-bootstrap-table/
MIT License
2.24k stars 782 forks source link

How can I get total sum in a column about other column? #2034

Open Apol0x opened 5 years ago

Apol0x commented 5 years ago

Hi! I'm trying to get the total sum about one column, but at the moment I could only do it this way.

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 (
      <div style={{ overflow: 'hidden' }}>
        <div style={{ float: 'left', width: 700 }} padder>
          <BootstrapTable data={this.props.analytics}
            options={options}
            pagination={this.props.analytics.length > 10}
            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>
        </div>
        <div style={{ float: 'left', width: 500 }}>
          <div style={{ display: 'flex', flex: 1, flexDirection: 'column', alignItems: 'flex-start', marginLeft: 13, marginTop: 5, borderWidth: 1, borderColor: 'grey' }} padder>
            <div style={{ fontWeight: 'bold', justifyContent: 'center' }}>
              Precio Total
          </div>
            {_.sumBy(this.props.analytics, 'total').toFixed(2)}€
        </div>
        </div>
      </div >
    );
  }
}

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

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

And this is the result

image

With which, I would like to be able to obtain the "Precio Total"(Total Price) data in another column

ghost commented 5 years ago

Same problem here. I've go a "StartDate" and an "EndDate" column and I'd like to also show a "number of days" column. Does anyone have a trick ?