CODEWITHSUNDEEP
newlinecellbreakantd
Vicking
Vicking

Reputation: 583

Antd table how to put text into cell in several lines

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?

Upvotes: 11

Views: 12440

Answers (3)

Sajib Hossain
Sajib Hossain

Reputation: 123

My paragraph text had no special character. it was a plain text that I got from the API. so I inspected the table cell and found that it was using white-space: nowrap; That is why changing the cell width didn't create a new line for text. so I changed it like that

{
    title: "Address",
    dataIndex: "Address",
    key: "Address",
    width: 250,
    render: text => <div style={{ whiteSpace: 'break-spaces', width: '250px' }}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,</div>,
},

I put whiteSpace: 'break-spaces' and it created a new line.

Upvotes: 0

ikoza
ikoza

Reputation: 93

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
    }]

Upvotes: 3

Vicking
Vicking

Reputation: 583

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.

Upvotes: 24

Related Questions