Ant Design表格固定底部增加一行汇总

Ant Design Table组件的功能非常强大，在业务场景中经常会出现需要多显示一行汇总行或者平均值行，并且继承colums的fixed配置的需求。

实现上述需求，可以利用组件库暴露的底部属性，自定义一个嵌套行。

/**
 * @param {object} props 组件属性
 */
const ExtraFooter = (props) => {
  const { pagintion, sumData, columns } = props;
  return (
    <>
      {pagintion ? (
        <Table.Footer>
          {columns.map((item) => (
            <Table.Column key={item.dataIndex}>
              {sumData[item.dataIndex] ? sumData[item.dataIndex] : null}
            </Table.Column>
          ))}
        </Table.Footer>
      ) : (
        <div>
          {columns.map((item) => (
            <div key={item.dataIndex} style={{ textAlign: 'right' }}>
              {sumData[item.dataIndex] ? sumData[item.dataIndex] : null}
            </div>
          ))}
        </div>
      )}
    </>
  );
};

const App = () => {
  const [pagintion, setPagintion] = useState(true);
  const [sumData, setSumData] = useState({});

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      fixed: 'left',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
    },
    {
      title: '爱好',
      dataIndex: 'hobby',
      key: 'hobby',
    },
    {
      title: '金额',
      dataIndex: 'money',
      key: 'money',
    },
  ];

  const data = [
    {
      key: '1',
      name: '张三',
      age: 30,
      gender: '男',
      hobby: '打篮球',
      money: 1000,
    },
    {
      key: '2',
      name: '李四',
      age: 25,
      gender: '女',
      hobby: '听音乐',
      money: 2000,
    },
    {
      key: '3',
      name: '王五',
      age: 28,
      gender: '男',
      hobby: '打游戏',
      money: 3000,
    },
  ];

  useEffect(() => {
    const sum = data.reduce((pre, next) => {
      pre.money += next.money;
      return pre;
    }, { money: 0 });
    setSumData(sum);
  }, [data]);

  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          pageSize: 5,
        }}
        footer={() => <ExtraFooter pagintion={pagintion} sumData={sumData} columns={columns} />}
      />
      <div style={{ marginTop: '20px' }}>
        <Button type="primary" onClick={() => setPagintion(!pagintion)}>
          切换表格底部
        </Button>
      </div>
    </div>
  );
};
  

至此，便实现了Ant Design Table固定底部增加一行汇总行的功能。