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

• 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

3 Answers 3

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 }}
  ...
/>