CODEWITHSUNDEEP
javascriptreactjsantd
Janith Widarshana
Janith Widarshana

Reputation: 3483

Customize React Antd table header with table data

In my React project, I need to customize antd table header as follows enter image description here

I have added sample code bellow.

I need to have Sum of the amount in the header of the Amount column enter image description here

Sample Code:

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

Upvotes: 2

Views: 26189

Answers (1)

bipin patel
bipin patel

Reputation: 2111

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
    }
  ];

Example link here https://codesandbox.io/s/festive-wiles-st6wl?fontsize=14

Upvotes: 14

Related Questions