How to get ag-grid table to break up an array of strings into multiple rows in same column - ag-grid

Question

Learning ag-grid and ran into this issue. Calling a service to fill in a table. But my last column "Mode" returns an array. I want that to be broken so "Mode1" is on first row. Then "Mode2" on second row. All the previous columns for can be blank on the "Mode1" row.
Currently it print out Mode1Mode2 cause I concatenate the mode strings on the first row. I did use a rowspan that does evaluate to 2. But not sure how to force it to force the text to actually take advantage of that. Any help is appreciated and thank you.
public columnDefs;
public defaultColDef;
public rowData: DataObj[];
public title = 'Grid';
constructor(private service: DataService) {
this.columnDefs = this.createColumnDefs();
}
// on init, subscribe to the athelete data
ngOnInit() {
this.service.loadProcesses().subscribe(data => {
this.rowData = data;
console.log('data',data);
},
error => {
console.log(error);
}
)
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.gridApi.sizeColumnsToFit();
} // on GridReady ends here
private createColumnDefs(){
return [
{ headerName:"IDs", field:"id", width:80 },
{ headerName:"Process", field:"content", width:120,rowSpan: calculateRowSpan },
{ headerName:"Requirement", field:"req", width:160,rowSpan: calculateRowSpan },
{ headerName:"Comment", field:"comment", width:120,rowSpan: calculateRowSpan },
{ headerName:"Mode",
field:"fModes",
valueGetter: function generateModeField(params) {
let modesCount = params.data.fModes.length;
let returnValue = '';
for (let x=0;x<modesCount;x++){
returnValue = returnValue + params.data.fModes[x].name;
}
return returnValue;
},
rowSpan: calculateRowSpan,
width:200 }
];
}
Notice it takes up rowspan of 2