ReactTable固定在最后一行

Question

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

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

示例表

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

或该摘要可以超出分页

Answer 1

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

希望这能给您一个想法。