使用表数据自定义 React Antd 表头

【问题标题】：Customize React Antd table header with table data使用表数据自定义 React Antd 表头
【发布时间】：2019-06-21 06:07:01
【问题描述】：

在我的React项目中，我需要自定义antd表头如下

我在下面添加了示例代码。

我需要在“金额”列的标题中包含金额的总和

示例代码：

https://codesandbox.io/embed/great-sun-534cd

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

您可以使用这样的标题函数来获取金额字段的总和

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

【讨论】：