javascript - How to add summary at top antd table? - Stack Overflow

admin管理员组

文章数量:1327934

I can able to add the summary row at the end of the table. But I need to add it at the top. How can I do that in 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>
                  </>
                );
              }}
            />

I can able to add the summary row at the end of the table. But I need to add it at the top. How can I do that in 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>
                  </>
                );
              }}
            />

• javascript
• reactjs
• html-table
• antd

Share Improve this question Follow asked May 23, 2020 at 10:28 ProferProfer 6431010 gold badges4747 silver badges9797 bronze badges 6

• There is no props for this, handle it with css – Fatemeh Qasemkhani Commented May 23, 2020 at 10:49
• Would you like to try use ponents property to override header renderer with you own implementation? – Kyr Commented May 23, 2020 at 10:57
• @FatemehQasemkhani Can you show me pls – Profer Commented May 23, 2020 at 10:58
• @Kyr Could you pls show me – Profer Commented May 23, 2020 at 10:58
• before header or as a first row? – Fatemeh Qasemkhani Commented May 23, 2020 at 11:07

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

summary : is being added inside tfoot and there is no such option to make summary available as first row,

So Instead of using summary, we can make the same calculation and add one more object to own original data at first position.

WORKING DEMO :

---

HACKED : setting values inside header children to solve sorting issue

jsx：

<Table sticky  .../>

css:

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

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

本文标签： javascriptHow to add summary at top antd tableStack Overflow