Question

我正在使用react-table绑定网格中的数据。现在，我必须显示4列，其中一列具有数量（价格）的值。

所以在页脚中，我想显示该价格的总和。

有人可以帮我吗？

这是我的示例代码

<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
                  );
                }}
/>

谢谢

Answer 1

如果您最近使用react-table。您可以将TableBody代码放置在适当的位置：

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

和computeSum函数：

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;
};

想要显示总额

1 个答案: