使用表数据自定义 React Antd 表头 [英] Customize React Antd table header with table data

问题描述

在我的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

推荐答案

你可以像这样使用 title 函数来获取金额字段的总数

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屋！