Question

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

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

示例表

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

或该摘要可以高于分页

Answer 1

要在ReactTable上添加页脚，只需在columns道具上定义Footer属性即可。您可以设置一个简单的文本，如Summary，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"));

希望这会给你一个想法。

Answer 2

解决方案是页脚。 https://react-table.js.org/#/story/footers 请查看它是否适合您的使用案例。

ReactTable修复了最后一行

2 个答案: