multiple lines and format in datatable cells

UI Components for React
Post Reply
tgcesar123
Posts: 2
Joined: 13 Jul 2018, 18:55

13 Jul 2018, 19:32

Hello all, I'd like to know if there is a way to show multiple lines and add some formatting to cells in a datatable,
i was trying to use the body property setting this value:

<p>Hello World!</p><p><span style="background-color: rgb(255, 255, 0);">PrimeReact </span><strong style="background-color: rgb(255, 255, 0);">Editor</strong><span style="background-color: rgb(255, 255, 0);"> Rocks</span></p><p>this is other line</p><ol><li>element one</li><li>element two</li></ol>

but displays the whole string, which is not what I need, what I want to show is something like this:

Hello World!
PrimeReact Editor Rocks
this is other line
1. element one
2. element two

Also the other features work as expected, filters, sorting, etc.

Thanks in advance.

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

01 Aug 2018, 09:58

Did you try body templating? Also, you need to use style as an object. Please, try code like the below;

Code: Select all

 colorTemplate(rowData, column) {
        return <span><p>Hello World!</p> <p><span style={{backgroundColor: 'rgb(255, 255, 0)'}}>PrimeReact </span><strong style={{backgroundColor: 'rgb(255, 255, 0)'}}>Editor</strong><span style={{backgroundColor: 'rgb(255, 255, 0)'}}> Rocks</span></p><p>this is other line</p><ol><li>element one</li><li>element two</li></ol></span>;
    }

Code: Select all

	<Column field="color" header="Color" body={this.colorTemplate} />

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: 3D_auEa and 5 guests