How could I get the total of a column in a react bootstrap table? ReactJS

Question

The problem is the following, I have a component that receives the props from the father. The issue is that I know how to get the info that comes to me but I can not add the total of a column. I had tried with _.sumby but I think I'm not using it as I should.

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>
        <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>
        <div style={{ display: 'flex', flex: 1, flexDirection: 'column', alignItems: 'flex-end', marginRight: 10 }}>
          <div style={{ fontWeight: 'bold', justifyContent: 'center' }}>
            Precio Total
          </div>
          {_.sumBy(this.props.analytics, 'total').toFixed(2)}€
        </div>
      </span >
    );
  }
}

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

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

Here you can see it

image link I would prefer use a footer, but I don't know how to sum the 'total' column. Thanks.

Answer 1

You'll find what you're looking for right here (if you haven't already..):

https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Footer&selectedStory=Function%20Footer&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

TL;DR alternative, you can define your columns in this way and add footer information this way:

const columns = [{
    dataField: 'name',
    text: 'Nombre',
    headerAlign: 'center',
    dataAlign='center',
    dataFormat={formatName},
    footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
  }, {
    dataField: 'total',
    text: 'Precio',
    headerAlign: 'center',
    dataAlign='center',
    dataFormat={formatPrice},
    footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
  }];

<BootstrapTable
  keyField="name"
  data={ this.props.analytics }
  columns={ columns }
/>