如何使用Ant Design(antd)实现复杂嵌套表头？

问题描述 #

需要用Ant Design（antd）实现类似下图红圈区域的嵌套表头样式：

最初尝试将表头与表格体第一行合并，但需要对固定表头、表头背景等做大量定制工作，现有表头配置如下：

const columnHeader: TableColumnsType<DataType> = [
  {
    title: "1/1",
    dataIndex: "category",
    key: "category",
    width: 200,
    fixed: "left",
    align: "left",
  },
  {
    title: "project",
    align: "left",
    children: [
      {
        title: "total",
        dataIndex: "total",
        key: "total",
        width: 140,
      },
    ],
  },
  {
    title: "project 1",
    align: "left",
    children: [
      {
        title: "total",
        dataIndex: "project1",
        key: "project1",
        width: 140,
      },
      {
        title: "project 2",
        align: "left",
        children: [
          {
            title: "total",
            dataIndex: "project2",
            key: "project2",
            width: 140,
          },
          {
            title: "total",
            dataIndex: "project3",
            key: "project3",
            align: "left",
            width: 140,
          },
        ],
      },
      {
        title: "project 4",
        align: "left",
        children: [
          {
            title: "total",
            dataIndex: "project4",
            key: "project4",
            width: 140,
          },
        ],
      },
      {
        title: "total",
        dataIndex: "project5",
        key: "project5",
        width: 140,
      },
      {
        title: "total",
        dataIndex: "project6",
        key: "project6",
        width: 140,
      },
    ],
  },
];

其中表头最后一行数据来自表格体的第一行。

解决方案 #

无需手动合并表头与表格行，可通过antd Table的title属性实现顶部汇总行，同时保留嵌套表头的原生样式支持（包括固定表头、背景色等），具体实现步骤如下：

1. 自定义表格顶部汇总组件 #

将汇总行作为表格的title传入，组件内部根据表头列配置渲染对应单元格，保证与表头列宽对齐：

import { Table } from 'antd';

// 假设汇总数据为sumData，结构与表格行数据一致
const sumData = {
  category: "汇总",
  total: 1000,
  project1: 200,
  project2: 150,
  project3: 150,
  project4: 200,
  project5: 150,
  project6: 150,
};

// 生成汇总行组件
const TableSummaryHeader = ({ columns }) => {
  return (
    <tr>
      {columns.map(col => {
        // 处理嵌套表头的列，确保单元格跨列正确
        const colSpan = col.children ? col.children.length : 1;
        return (
          <td key={col.key} colSpan={colSpan} style={{ textAlign: 'left', fontWeight: 'bold', backgroundColor: '#fafafa' }}>
            {sumData[col.dataIndex] || col.title}
          </td>
        );
      })}
    </tr>
  );
};

2. 配置表格属性 #

将自定义的汇总组件传入Table的title属性，同时保留原有的列配置和数据：

<Table
  columns={columnHeader}
  dataSource={tableData} // 表格主体数据
  title={() => <TableSummaryHeader columns={columnHeader} />}
  bordered
  scroll={{ x: 'max-content' }}
/>

3. 样式调整（可选） #

如果需要让汇总行样式更贴近原生表头，可通过CSS调整：

.ant-table-thead + .ant-table-title {
  border-bottom: 1px solid #f0f0f0;
}
.ant-table-title tr td {
  border-top: 1px solid #f0f0f0;
}

这种方法无需修改原生表头结构，直接利用antd内置属性实现，完美兼容固定表头、列宽对齐等特性，避免大量定制工作。

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