Ant Design V3 Table组件列值求和实现方法咨询

Got it, since you can't upgrade to Ant Design V4 right now, here's a straightforward way to calculate column sums and add a total row to your table:

Step 1: Calculate Column Totals #

First, we'll loop through your dataSource to compute the sum for each numeric column (in your case, apple and orange):

// Calculate totals for numeric columns
const calculateTotals = (data) => {
  return data.reduce((acc, item) => {
    return {
      apple: acc.apple + item.apple,
      orange: acc.orange + item.orange,
    };
  }, { apple: 0, orange: 0 });
};

const totals = calculateTotals(dataSource);

Step 2: Construct the Total Row #

Create a dedicated row object for the totals, making sure it has a unique key and a clear label for the name column:

const totalRow = {
  key: 'total', // Unique key to avoid conflicts with existing rows
  name: '*Total*',
  apple: totals.apple,
  orange: totals.orange,
};

Step 3: Combine Data and Render the Table #

Merge the original data source with the total row, and pass it to the Table component. You can also add a custom class to the total row to style it differently (like making text bold):

// Combine original data with total row
const tableData = [...dataSource, totalRow];

// Custom row class to highlight the total row
const getRowClassName = (record) => {
  return record.key === 'total' ? 'total-row' : '';
};

// Render the table
<Table
  dataSource={tableData}
  columns={columns}
  rowClassName={getRowClassName}
/>

Step 4: Add CSS for the Total Row (Optional) #

Add some styles to make the total row stand out visually:

.total-row {
  font-weight: bold;
  background-color: #f5f5f5;
}

Full Working Example #

Putting it all together in a React component:

import React from 'react';
import { Table } from 'antd';

const TotalRowTable = () => {
  const dataSource = [
    { key: '1', name: 'Jon', apple: 1, orange: 1 },
    { key: '2', name: 'Ron', apple: 0, orange: 3 },
  ];

  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Apple', dataIndex: 'apple', key: 'apple' },
    { title: 'Orange', dataIndex: 'orange', key: 'orange' },
  ];

  // Calculate totals for numeric columns
  const calculateTotals = (data) => {
    return data.reduce((acc, item) => {
      return {
        apple: acc.apple + item.apple,
        orange: acc.orange + item.orange,
      };
    }, { apple: 0, orange: 0 });
  };

  const totals = calculateTotals(dataSource);
  const totalRow = {
    key: 'total',
    name: 'Total',
    apple: totals.apple,
    orange: totals.orange,
  };

  const tableData = [...dataSource, totalRow];
  const getRowClassName = (record) => record.key === 'total' ? 'total-row' : '';

  return (
    <Table
      dataSource={tableData}
      columns={columns}
      rowClassName={getRowClassName}
    />
  );
};

export default TotalRowTable;

This approach works seamlessly with older Ant Design versions (pre-V4) since it doesn't rely on V4-specific features like summary. It's also flexible—you can easily update the calculateTotals function if you add more numeric columns later.

内容的提问来源于stack exchange，提问作者Gordiann