如何在Ant Design Table的单个单元格中展示多个数据？

完全可以在Ant Design Table的单个单元格中展示多个数据，核心是通过列配置的render函数实现，你之前的问题大概率是render函数的参数使用错误，以下是具体修正方案：

1. 修正render函数参数 #

Ant Design Table列配置中render函数的第一个参数是当前dataIndex对应的字段值，第二个参数才是整条数据记录record。你之前把record作为第一个参数传入，导致无法正确获取其他字段。

2. 多数据展示的示例代码 #

基于你的数据结构和列配置，修改Description列的render函数，即可同时展示transactionType和sourceNo：

// TypeScript环境下先定义数据类型，避免类型报错
interface TransactionData {
  transactionNo: string;
  transactionTypeNo: string;
  transactionType: string;
  createdTstamp: string | number;
  sourceNo: string;
  accountNo: string;
  currencyCd: string;
}

const columns: ColumnProps<TransactionData>[] = [
  {
    title: 'Transaction No',
    dataIndex: 'transactionNo',
    key: 'transactionNo',
    align: 'left',
  },
  {
    title: 'Transaction Date',
    dataIndex: 'createdTstamp',
    defaultSortOrder: 'descend',
    sortable: true,
    key: 'createdTstamp',
  },
  {
    title: 'Description',
    dataIndex: 'transactionType',
    key: 'description',
    align: 'left',
    textWrap: 'wrap',
    defaultHidden: false,
    // 正确的参数顺序：第一个为当前dataIndex值，第二个为整条记录
    render: (_, record) => (
      <div>
        <span>{record.transactionType}</span>
        <br />
        <span style={{ color: '#666', fontSize: '0.9em' }}>Source No: {record.sourceNo}</span>
      </div>
    ),
  },
];

3. 关键说明 #

• 若不需要当前dataIndex对应的值，可以用下划线_占位第一个参数，符合代码规范。
• 可以用div、<></>（Fragment）等容器包裹多个元素，还能通过CSS样式区分不同数据的展示效果。
• TypeScript环境下必须定义数据接口并传入ColumnProps，这样record会有完整的类型提示，避免类型错误。

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