Need to display crossfilter data array values in separate lines instead of comma separated values in a single line - dc.js

Question

My data looks like below:
var data = [{
"Id": "1",
"startTime": 1554750660000,
"endTime": 1554751320000,
"Alerts": [
"Alert1","Alert2"
],
"Apps": [
"App1","App2"
]
}]
I have to display above data using crossfilter-data-table.
Currently, I am able to display the data like below:
StartTime EndTime Apps Alerts
04/08/2019 12
12:42:00 PM 12:49:00 PM App1,App2 Alert1,Alert2
Instead, I want to show it in below format.
Changes are: the array values of columns Apps, Alerts are not displayed as comma separated values. Instead they are shown in a separate line one after the other.
StartTime EndTime Apps Alerts
04/08/2019 12
12:42:00 PM 12:49:00 PM App1 Alert1
App2 Alert2
My current code looks like below:
import React from "react";
import * as dc from "dc";
import "dc/dc.css";
import * as d3 from "d3";
import { ChartTemplate } from "./chartTemplate";
import { css } from "glamor";
const tableFunc = (divRef, ndx) => {
const summaryTable = dc.dataTable(divRef);
const dimension = ndx.dimension(d => d.StartTime);
summaryTable
.dimension(dimension)
.showGroups(true)
.size(10000)
.group(d => {
return d.hour;
})
.columns([
{
label: "Start Time",
format: function(d) {
return d. startTime;
}
},
{
label: "End Time",
format: function(d) {
return d. endTime;
}
},
{
label: "Apps",
format: function(d) {
return d.Apps;
}
},
{
label: "Alerts",
format: function(d) {
return d.Alerts;
}
}
])
.sortBy(function(d) {
return d.startTime;
})
.order(d3.descending)
.on("renderlet", function(table) {
table.selectAll(".dc-table-group").classed("info", true);
});
return summaryTable;
};
const style = css({
"& tr": {
"&:hover": {
background: "#dddd"
}
},
"& td": {
textAlign: "left",
borderTop: "1px solid #ddd"
}
});
export const DataTable = props => (
<ChartTemplate
chartFunction={tableFunc}
styles={style}
title="Summary"
/>
);
What change i should do to display details in required format as above.Please help I'm really new to react, crossfilter and d3.

Answer 1

Assuming it's okay to display all the array values in one cell, I think the easiest way to get what you want would be simply to format the cell using <br> - the line break element.
E.g.
{
label: "Apps",
format: function(d) {
return d.Apps.join('<br>');
}
},
It would be a lot more difficult to create extra rows, since data table rows usually correspond 1:1 with rows of the data set.
Adding links
#zubug55 commented
In my real data, alerts look like:
"Alerts": [ "abc#link1","def#link2" ]
How do I break each abc#link1 on # and make abc a link to the url link1?
It's probably easiest to generate the anchor elements in HTML at the same time, like
return d.Alerts.map(function(a) {
var parts = a.split('#');
return '' + parts[0] + '';
}).join('<br>');