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