我正在使用 ReactTable，最后我需要创建一些摘要。
当有分页时，它也应该每次都可见。是否有可能用react表来实现它？我可以通过创建下一个表来部分解决它。但我没有找到如何隐藏标题的方法。另一个问题是在调整列宽时，它不会应用于另一个表。
示例表
| id | product | stock data | price |
| 1 | apple | 1 | 123 |
| 2 | pie | 2 | 22 |
...
|prev page | 2 / 5 | next page |
| | summary | | 145 |
或者该摘要可以在分页上方
要在您的 上添加页脚ReactTable，只需Footer在您的columnsprops上定义一个属性。您可以设置一个简单的文本，例如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"));
希望这能给你一个想法。
解决方案是页脚。 https://react-table.js.org/#/story/footers 请查看它是否适合您的用例。