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

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 '<a href="' + parts[1] + '">' + parts[0] + '</a>';
            }).join('<br>');