ReactTable 固定最后一行

Question

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

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

示例table

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

或者那个总结可以在分页之上

Answer 1

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

Answer 2

要在 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"));

希望这能给你一个想法。

ReactTable 固定最后一行

ReactTable fixed last row

javascript

css

tabular

reactjs