Search code examples
javascriptreactjshtml-tableantd

How to add summary at top antd table?


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 :

    Edit Summary - Ant Design Demo


    HACKED : setting values inside header children to solve sorting issue

    Edit Summary - Ant Design Demo hacked