How to display Multiple data into a single column in Antd Table?-CodePudding

So I want to show multiple data in a single cell of an ant design table. Seems it allows only to insertion of a single data element. Is that possible to combine multiple data into a single cell?

here is what the data object looks like:

data {
    transactionNo
    transactionTypeNo
    transactionType
    createdTstamp
    sourceNo
    accountNo
    currencyCd
    
  }

These are the table columns

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}</>
  ),
},

I want to show both transactionType and sourceNo in a single cell. Already tried using record but no luck. And I'm using react with typescript.

CodePudding user response：

You can use Render Method in the antd Columns. You have found almost, just need to reference the record correctly..

{
  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}</>
  ),
},