React中如何为rc-table添加新行或页脚以显示列值总计

要给rc-table添加底部总计行，主要通过列配置的footer属性和预先计算总计值来实现，以下是具体步骤和代码示例：

1. 预先计算各列总计值 #

先从表格数据源中计算需要展示总计的数值列总和，示例假设表格包含文本列name和数值列amount：

// 示例表格数据源
const dataSource = [
  { name: "商品A", amount: 150, key: "1" },
  { name: "商品B", amount: 280, key: "2" },
  { name: "商品C", amount: 320, key: "3" },
];

// 计算数值列的总计
const totalAmount = dataSource.reduce((sum, item) => sum + item.amount, 0);

2. 配置 columns 的 footer 属性 #

针对每一列设置footer：文本列（如Name）直接返回"总计"，数值列返回计算好的总计值。修改你的columns配置：

const columns = [
  {
    title: "名称",
    className: "cursor-pointer",
    dataIndex: "name",
    key: "name",
    // 文本列footer显示"总计"
    footer: () => "总计",
    align: alignLeft,
    render: (name: any) => <span className="whitespace-nowrap">{name}</span>,
  },
  {
    title: "金额",
    dataIndex: "amount",
    key: "amount",
    align: "right",
    // 数值列footer返回计算好的总计值，可自定义样式
    footer: () => <span className="font-bold">{totalAmount}</span>,
    render: (amount: number) => <span className="whitespace-nowrap">{amount}</span>,
  },
];

3. 渲染 rc-table 组件 #

直接传入配置好的columns和dataSource，rc-table会自动在表格底部渲染总计行：

import Table from "rc-table";

const MyTable = () => {
  const dataSource = [/* 你的数据源 */];
  const totalAmount = dataSource.reduce((sum, item) => sum + item.amount, 0);

  const columns = [/* 上面的列配置 */];

  return <Table columns={columns} dataSource={dataSource} />;
};

额外说明 #

• 若有多个数值列，只需分别计算每列的总计，在对应列的footer中返回即可
• 可以通过给footer返回带样式的React元素，自定义总计行的字体、颜色等样式
• 如果需要整行统一自定义，也可以使用rc-table的全局footer属性，但列级footer更灵活，能针对单列单独配置

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