如何在頂部 antd 表中添加摘要？

Question

我可以在表格末尾添加摘要行。 但我需要在頂部添加它。 我怎樣才能在antd 表中做到這一點？

<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>
                  </>
                );
              }}
            />

Answer 1

summary ：正在tfoot中添加，並且沒有這樣的選項可以將summary用作第一行，

因此，我們可以不使用summary ，而是進行相同的計算，並在最初的object的原始數據中再添加一個 object。

工作演示：

---

HACKED ：在 header 子項中設置值以解決排序問題

Answer 2

jsx：

<Table sticky  .../>

css：

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

Answer 3

<Table
  summary={() => <Table.Summary fixed="top">content</Table.Summary>}
  scroll={{ y: 500 }}
  ...
/>