Want to show total of amount

user_7620316 0
Viewed 725

I am using react-table for binding data in grid. Now I have to show 4 columns and one column has value of amount(price).

So in footer I want to show total of that price.

Can any one please help me on this?

Here is my sample code

<ReactTable
                columns={columns}
                noDataText="No rows found"
                manual // Forces table not to paginate or sort automatically, so we can handle it server-side
                data={this.props.drinkList}
                loading={this.props.loading}
                showPagination={true}
                page={this.state.page > 0 ? this.state.page : 0}
                showPaginationTop={false}
                pages={pageCount}
                showPaginationBottom={true}
                defaultPageSize={10}
                sortable={false}
                pageSizeOptions={[5, 10, 20, 25, 50, 100]}
                onFetchData={(state, instance) => {
                  this.setState({ page: state.page });
                  this.props.getDrinkListAction(
                    this.props.location.state.barId,
                    this.props.location.state.businessId,
                    this.state.searchText,
                    state.page + 1,
                    localStorage.getItem("token"),
                    state.pageSize,
                    history
                  );
                }}
/>

Thanks

react-table reactjs
1 Answers

if you use react-table latest. On place your TableBody code you can do like this:

<ReactTable
          data={data}
          columns={[
            {
              Header: "Age",
              accessor: "age",
              Footer: (
                <span>
                  <strong>Sum:</strong> {this.computeSum(data, "age")}
                </span>
              )
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />

and computeSum function: 

computeSum = (arr, totalFieldName) => {
  const { length } = arr;
  let count = 0;
  for (let i = 0; i < length; i += 1) {
    count += Number((typeof arr[i][totalFieldName] === 'object')
      ? arr[i][totalFieldName].name : arr[i][totalFieldName] || 0);
  }
  return count;
};
user_128827230
Related