时间戳

首页 > 解决方案 > React tables Calculating Footer sum on page change on sort on search，我们如何实现这一点

javascript - React tables Calculating Footer sum on page change on sort on search，我们如何实现这一点

问题描述

React tables Calculating Footer sum on page change on search on search，我们如何实现这一点。

import React from "react";
import { render } from "react-dom";
import ReactTable from "react-table";
import "react-table/react-table.css";

const data = [
  {
    id: 1,
    product: "apple",
    stock: 1,
    price: 123
  },
  {
    id: 2,
    product: "pie",
    stock: 2,
    price: 22
  }
];

const App = () => (
  <div>
    <ReactTable 
      data={data}
      columns={[
        {
          Header: "Id",
          accessor: "id"
        },
        {
          Header: "Product",
          accessor: "product",
          Footer: "Summary"
        },
        {
          Header: "Stock",
          accessor: "stock"
        },
        {
          Header: "Price",
          accessor: "price",
          Footer: (
            <span>{
              data.reduce((total, { price }) => total += price, 0)
            }</span>
          )
        }
      ]}
      defaultPageSize={2}
    />
  </div>
);

上面的代码可用于获取所有行的列数据的总和，任何人都可以以正确的方式指导我。

标签： javascriptreactjsreact-table

解决方案

首先导入这个：

import _ from "lodash";

然后下面的代码应该可以解决您的问题：

{
  Header: "Price",
  accessor: "price",
  id: "price"
  Footer: <span>{_.sum(_.map(data, d => d.price))}</span>
  )
}

{请注意，和之间应该有下划线符号.sum。 同样，当我在这里发布我的代码时，它以某种方式被删除了和
之间的下划线符号。(.map

推荐阅读