Javascript ReactTable已修复最后一行

我正在使用ReactTable，最后需要创建一些摘要

它应该在每次分页时都可见。使用react表是否可以实现这一点？我可以通过创建下一个表来部分解决这个问题。但我没有找到隐藏标题的方法。另一个问题是，调整列宽时，列宽不会应用于其他表

示例表

| id | product | stock data | price |
|  1 | apple   | 1          | 123   |
|  2 | pie     | 2          | 22    |
...
|prev page |   2 / 5    | next page |
|    | summary |            | 145   |

或者，该摘要可以位于分页的上方，解决方案是页脚。

---

请查看它是否适合您的用例。

要在

反应表

上添加页脚，只需在

列

道具上定义一个属性即可。您可以设置一个简单的文本，如

摘要

、JSX，甚至其他组件

下面是一个与您类似的示例：

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" // Render simple text on the footer
        },
        {
          Header: "Stock",
          accessor: "stock"
        },
        {
          Header: "Price",
          accessor: "price",
          Footer: (
            <span>{
              // Get the total of the price
              data.reduce((total, { price }) => total += price, 0)
            }</span>
          )
        }
      ]}
      defaultPageSize={2}
    />
  </div>
);

render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入{render}；
从“反应表”导入反应表；
导入“react table/react table.css”；
常数数据=[
{
id:1，
产品：“苹果”，
股票：1，
价格：123
},
{
id:2，
产品：“馅饼”，
股票：2，
价格:22
}
];
常量应用=（）=>(
总计+=价格，0）
}
)
}
]}
defaultPageSize={2}
/>
);
render（，document.getElementById（“根”））；

---

希望这能给你一个想法。

这比我简单的解释要好：D谢谢！这对于计算总和是非常好的，但是如果我们有100条记录，每行的行值=10条记录，我想得到当前行的总和值，并且当我们改变行值时，总和应该改变，比如5,10,15，那么总和也应该根据排序顺序改变