CODEWITHSUNDEEP
ag-gridag-grid-ng2
James Bender
James Bender

Reputation: 1232

AG-Grid - How to insert a line break into my cell data

I'm new to AG-Grid, so forgive me if this is a dumb question. We're using the OSS version of Ag-Grid in an Angular 5 application. I have a column where I am combining two sets of summary data and showing them. I would like to have a line-break between the two pieces of text.

Right now it's doing this:

"Summary One Summary Two"

I want it to do this:

"Summary One
Summary Two"

So far I've tried and HTML break tag, \r\n and just \n and nothing has worked. Is this possible to do?

Thanks, James

Upvotes: 14

Views: 27085

Answers (3)

Rishabh Tiwari
Rishabh Tiwari

Reputation: 11

Just use below: cellStyle: { whiteSpace: 'pre' }

Upvotes: 1

Invest
Invest

Reputation: 635

I have an even simpler solution without cell renderer. By the way I am using the ag-theme-balham theme. Simply set the cellStyle to white-space pre and you are able to use \n to insert a new line.

columnDefs()
...
   valueGetter: ({ data }) => 'first value\nsecond value',
   cellStyle: { 'white-space': 'pre' }

Upvotes: 9

Paritosh
Paritosh

Reputation: 11560

You can use cellRenderer to achieve this.

Have a look at below colDef.

{
  headerName: "Custom column", 
  cellRenderer: function(param){
    return param.data.col1 + '<br/>' + param.data.col2;
  }
}

You might need to set rowHeight in gridOptions as well.

Live example: Plunk

Upvotes: 15

Related Questions