[FIXED] How to add summary at top antd table?

Issue

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

Solution

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

Answered By - Vivek Doshi

Answer Checked By - Candace Johnson (PHPFixing Volunteer)