如何在顶部 antd 表中添加摘要？答案

【问题标题】：How to add summary at top antd table?如何在顶部 antd 表中添加摘要？
【发布时间】：2020-09-10 05:11:12
【问题描述】：

我可以在表格末尾添加摘要行。但我需要在顶部添加它。我如何在antd table 中做到这一点？

<Table
              columns={columns}
              dataSource={data}
              summary={pageData => {
                let totalWaste = 0;
                let totalBrick = 0;

                pageData.forEach(({ waste, brick }) => {
                  totalWaste += waste;
                  totalBrick += brick;
                });

                return (
                  <>
                    <thead>
                      <tr className="ant-table-row  ant-table-row-level-0">
                        <th>Summary</th>
                        <th></th>
                        <th></th>
                        <th>{totalWaste}</th>
                        <th>{totalBrick}</th>
                      </tr>
                    </thead>
                  </>
                );
              }}
            />

【问题讨论】：

这个没有props，用css处理
您想尝试使用components 属性以您自己的实现覆盖标题渲染器吗？
@FatemehQasemkhani 你能告诉我吗
@Kyr 你能告诉我吗
在标题之前还是作为第一行？

标签： javascript reactjs html-table antd

【解决方案1】：

jsx：


<Table sticky  .../>

css:

.ant-table-summary {
      display: table-header-group;
}

【讨论】：

请考虑解释为什么这段代码可以回答这个问题

【解决方案2】：

summary : 被添加到 tfoot 中，并且没有这样的选项可以使 summary 作为第一行使用，

因此，我们可以不使用summary，而是进行相同的计算，并在第一个位置的原始数据中再添加一个object。

工作演示：

HACKED：在子标题中设置值以解决排序问题

【讨论】：

问题是当我进行排序时它会再次将其拖到底部
@Profer，添加了另一个演示，请查看
@Profer，Gald 知道，它有帮助。 :)