I am using an Ant Design table, and this is one of my columns. I would like to show every name on a new line, and I'm using "\n" but it's not working - it only adds spaces, it doesn't start the second name at the new line.
{
title: "Borrower Name",
width: 150,
dataIndex: "borrower",
render: (record) => record.map((a) => a.name).join("\n"),
}
Another solution is using HTML tag (i have used paragraph tag, you can use br tag), this will display all the names on new line.
{
title: 'Borrower Name',
width: 150,
dataIndex: 'borrower',
render: (record) => record.map((a) => <p>{a.name}</p>),
},
Or
{
title: 'Borrower Name',
width: 150,
dataIndex: 'borrower',
render: (record) => record.map((a) => <>{a.name}<br/></>),
},
@Help I tried join(<br/>) and join("<br/>"）,but both not working;
join(<br/>) will give error join("<br/>") will consider this as separator
(method) Array<string>.join(separator?: string | undefined): string
Adds all the elements of an array into a string, separated by the specified separator string.
@param separator — A string used to separate one element of the array from the next in the resulting string. If omitted, the array elements are separated with a comma.
You can map over the record and add a <br/> tag like this:
render: (_: any, row: any) =>['a', 'b'].map((item) => (<>{item}<br /></>))
map() function should return something, Should be like this:
render: (record) => record.map(a => {return a.name}).join("\n")