使用表数据自定义React Antd表头 [英] Customize React Antd table header with table data
本文介绍了使用表数据自定义React Antd表头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在我的React项目中,我需要自定义antd表头,如下所示
In my React project, I need to customize antd table header as follows
我在下面添加了示例代码.
I have added sample code bellow.
我需要在金额"列的标题中包含金额总和
I need to have Sum of the amount in the header of the Amount column
示例代码:
https://codesandbox.io/embed/great-sun-534cd
推荐答案
您可以使用这样的标题函数获取总计字段
You can use title function like this for get total of amount fields
const columns = [
{
title: () => {
var total = 0;
for(var i=0;i<data.length;i++){
total += data[i].amount;
}
return <div>total {total}</div>;
} ,
dataIndex: "date",
width: 200
},
{
title: "Amount",
dataIndex: "amount",
width: 100
}
];
此处的示例链接 https://codesandbox.io/s/festive- wiles-st6wl?fontsize = 14
这篇关于使用表数据自定义React Antd表头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文