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

function tableCreator(res, selector) {
  var table = $(
  `<table class="table table-striped table-condensed">
    <thead>
      <tr>
        <td>Date</td><td>Total Users</td><td>Change</td><td>Male</td><td>Change</td><td>Female</td><td>Change</td>
      </tr>
    <thead>
    <tbody></tbody>`);
  var tbody = table.find('tbody');

  var f = 0;
  // Loops through each summary
  res.forEach(function (summary) {
    tbody.append(`<tr>${summary.date}<td></td><td></td><td></td><td></td><td></td><td></td><td></td><tr>`);
  });
  table.find('tr:first').css('font-weight', 'bold');
  $(selector).append(table);
}

  var dataSet = [
  {
   "date": "2017-04-25T00:00:00Z",
   "numUsers": 97,
   "numSessions": 6,
   "avgDuration": 3223.8333,
   "avgUserCount": 16.166666,
   "profile": {
    "Chemistry": {
     "60": 2,
     "65": 2,
     "69": 2
    },
    "Constellation": {
     "Taurus": 5
    },
    "Gender": {
     "Woman": 15
    },
    "Group": {
     "Asterism_0": 8,
     "Asterism_3": 8
    },
    "PuzzleRate": {
     "103": 14
    }
   }
  },
  {
   "date": "2017-02-21T00:00:00Z",
   "numUsers": 1,
   "numSessions": 1,
   "avgDuration": 106,
   "avgUserCount": 1,
   "profile": {
    "Gender": {
     "Male": 1
    }
   }
  },
  {
   "date": "2017-04-25T00:00:00Z",
   "numUsers": 97,
   "numSessions": 6,
   "avgDuration": 3223.8333,
   "avgUserCount": 16.166666,
   "profile": {
    "Group": {
     "Earth_3": 8
    },
    "PuzzleRate": {
     "113": 10
    }
   }
  },
  {
   "date": "2017-01-17T00:00:00Z",
   "numUsers": 2,
   "numSessions": 1,
   "avgDuration": 193,
   "avgUserCount": 2,
   "profile": {
    "Age": {
     "11-30": 2
    }
   }
  },
  {
   "date": "2017-04-25T00:00:00Z",
   "numUsers": 97,
   "numSessions": 6,
   "avgDuration": 3223.8333,
   "avgUserCount": 16.166666,
   "profile": {
    "Chemistry": {
     "0": 27
    },
    "Constellation": {
     "Virgo": 17
    }
   }
  },
  {
   "date": "2017-02-21T00:00:00Z",
   "numUsers": 1,
   "numSessions": 1,
  ...