How to add summary at top antd table?

user_6838854 0
Viewed 2206

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>
                  </>
                );
              }}
            />
antd reactjs html-table javascript
3 Answers

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 :

Edit Summary - Ant Design Demo

HACKED : setting values inside header children to solve sorting issue

Edit Summary - Ant Design Demo hacked

user_23494070

jsx：


<Table sticky  .../>

css:

.ant-table-summary {
      display: table-header-group;
}
user_162957770 
<Table
  summary={() => <Table.Summary fixed="top">content</Table.Summary>}
  scroll={{ y: 500 }}
  ...
/>
user_192052900
Related