JSFiddle - React, Tailwind, and code Playground
HTML
<table id="groupTable"></table>
CSS
table td { border: 1px solid black; padding: 10px; }
JavaScript
var data = {
"set": [
{
"id": 1,
"segment_desc": "Segment 1",
"segment_summary": [
{
"section_type": "domain group",
"section_value": "group 1",
"children": [
{
"children": [
{
"format": "float",
"measure": "users clicking",
"value": 340
},
{
"format": "float",
"measure": "% users opening",
"value": 10
}
],
"section_type": "vertical",
"section_value": "all"
},
{
"children": [
{
"format": "float",
"measure": "users clicking",
"value": 340
},
{
"format": "float",
"measure": "% users opening",
"value": 10
}
],
"section_type": "vertical",
"section_value": "cars"
}
]
}
]
},
{
"id": 2,
"segment_desc": "Segment 2",
"segment_summary": [
{
"section_type": "domain group",
"section_value": "group 2",
"children": [
{
"children": [
{
"format": "float",
"measure": "users clicking",
"value": 340
},
{
"format": "float",
"measure": "% users opening",
"value": 1.24
}
],
"section_type": "vertical",
"section_value": "all"
},
{
"children": [
{
"format": "float",
"measure": "users clicking",
"value":...