如何在 Antd Table 中將多個數據顯示到單個列中？

Question

所以我想在 ant 設計表的單個單元格中顯示多個數據。 似乎它只允許插入單個數據元素。 是否可以將多個數據組合到一個單元格中？

這是數據 object 的樣子：

data {
    transactionNo
    transactionTypeNo
    transactionType
    createdTstamp
    sourceNo
    accountNo
    currencyCd
    
  }

這些是表格列

const columns = [
{
  title: 'Transaction No',
  dataIndex: 'transactionNo',
  key: 'transactionNo',
  align: 'left',
  },
},
{
  title: 'Transaction Date',
  dataIndex: 'createdTstamp',
  defaultSortOrder: DESC,
  sortable: true,
  key: 'createdTstamp',
},
{
  title: 'Description',
  dataIndex: 'transactionType',
  key: 'transactionType',
  align: 'left',
  textWrap: 'wrap',
  defaultHidden: false,
  render: ( record) => (
    <>{record.transactionType}</>
  ),
},

我想在單個單元格中同時顯示transactionType和sourceNo 。 已經嘗試使用記錄但沒有運氣。 我正在使用 typescript 做出反應。

Answer 1

您可以在 antd Columns 中使用 Render Method。 你已經發現差不多了，只需要正確引用記錄..

{
  title: 'Description',
  dataIndex: 'transactionType',
  key: 'transactionType',
  align: 'left',
  textWrap: 'wrap',
  defaultHidden: false,
  // in Render first param returns current field, second params return entire data
  render: (text, record) => (
    <>{record.transactionType} {record.sourceNo}</>
  ),
},