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

Question

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.

Answer 1

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