如何在Ant Design中为表格可展开列设置自定义列名？

直接通过Table组件expandable配置项中的columnTitle属性即可设置展开列的自定义表头名称，无需额外二次封装组件。

基础实现代码 #

import { Table } from 'antd';

// 业务列配置
const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '住址', dataIndex: 'address', key: 'address' },
];

// 表格数据
const dataSource = [
  {
    key: '1',
    name: '张三',
    age: 28,
    address: '杭州市西湖区',
    detail: '展开后显示的详情内容'
  }
];

export default () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    expandable={{
      expandedRowRender: (record) => <div>{record.detail}</div>,
      columnTitle: '详情', // 此处填写展开列的自定义显示名称
      columnWidth: 70, // 可同步配置展开列的宽度
    }}
  />
);

补充说明 #

• 该配置在Ant Design 4.x、5.x版本均原生支持，传入字符串即可直接显示为表头文字，也支持传入React节点实现自定义表头样式、增加提示等复杂需求
• 3.x及更早版本没有提供该配置项，可通过升级版本，或使用固定列+自定义展开逻辑的方式模拟实现

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