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

Question

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

Answer 1

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