Antd table how to put text into cell in several lines

Question

In Antd is there a way to show the text in table cell into several lines. I try to put </br>, \n, \r into the text.

Is there someone who has already find a way to do that?

Answer 1

Finally here is my solution.

The text for each column contains an \n when there is necessary to have a new line.

After into the table definition I put the style whiteSpace: 'pre':

<Table style={{ whiteSpace: 'pre'}} columns={columns} dataSource={data} title={title} .../>

Thats seems to work as expected.

Answer 2

In the hopes that it's never too late to answer a question here :D

Use the renderer of the table cell, like below, where you can use HTML tags (I'm using React so it's formatted as ReactNode with <> </> parent elements):

const columns = [
    {
      title: "Start",
      dataIndex: "start",
      key: "start",
      render: (text) => <>
      <p>{text.split("@")[0]}</p>
      <p>{text.split("@")[1]}</p>
      </>
    },
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (text) => text
    }]