JSFiddle - React, Tailwind, and code Playground

by ArktekniK

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="tableDynamic"></div>

JavaScript

var extend = function(original, context, key) {
  for (key in context)
    if (context.hasOwnProperty(key))
      if (Object.prototype.toString.call(context[key]) === '[object Object]')
        original[key] = extend(original[key] || {}, context[key]);
      else
        original[key] = context[key];
  return original;
};

function tableCreator(res, selector) {

	// Create a single object that contains the keys of all objects in res
  // This is so the table doesn't have missing data
  var combined = {};
  res.forEach(function(summ) {
    var prof = summ.profile || {};
    $.extend(true, combined, prof);
  });

	// Our table template
  var tb = '<table border="1"><thead><tr><th>Key</th><th>Values</th><th>Day 1</tr><thead><tbody>';
  
  $.each(combined, function(key, value) {
    var tr = '<tr>';
    var levels = 1;
    if (typeof value === 'object') {
      levels = Object.keys(value).length;
    }
    tr += '<td rowspan="' + levels + '">' + key + '</td>';
    var ak = Object.keys(value);
    tr += '<td>' + ak.shift() + '</td></tr>'

    ak.forEach(function(k) {
      tr += '<tr><td>' + k + '</td></tr>';
    });
    tb += tr;
  });
  tb += '</tbody></table>';
  $(selector).append(tb);
}

var dataSet = [{
  "date": "2017-02-21T00:00:00Z",
  "numUsers": 1,
  "numSessions": 1,
  "avgDuration": 106,
  "avgUserCount": 1,
  "profile": {
    "Age": {
      "11-30": 1
    },
    "Zodiac": {
      "Virgo": 1
    }
  }
}, {
  "date": "2017-02-10T00:00:00Z",
  "numUsers": 1,
  "numSessions": 1,
  "avgDuration": 30,
  "avgUserCount": 1
}, {
  "date": "2017-02-21T00:00:00Z",
  "numUsers": 1,
  "numSessions": 1,
  "avgDuration": 106,
  "avgUserCount": 1,
  "profile": {
    "UB_Timezone": {
      "+0000": 1
    }
  }
}, {
  "date": "2017-02-14T00:00:00Z",
  "numUsers": 4,
  "numSessions": 4,
  "avgDuration": 30,
  "avgUserCount": 1
}, {
  "date": "2017-02-21T00:00:00Z",
  "numUsers": 4,
  "numSessions": 1,
  "avgDuration": 106,
  "avgUserCount": 4,
  "profile": {
    "Gender":...