JSFiddle - React, Tailwind, and code Playground

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 ageBrackets = [
  [0, 10],
  [11, 20],
  [21, 30],
  [31, 40],
  [41, 50],
  [51, 60],
  [61, 70]
];

var maximumOccupancy = 50;

var ageTextBrackets = ageBrackets.map(function(bracket) {
  return bracket.join('-');
});

var genderTextBrackets = ['Man', 'Woman', 'Other', 'Not Set'];

function tableCreator(res, selector) {
  var table = $('<table class="table table-striped table-condensed"><thead><tr><td colspan="2">Item</td><td>Unit</td></tr><thead><tbody></tbody>');
  var tbody = table.find('tbody');

  function createMultiRow(key, values, unit) {
    var head = $(`<tr><td rowspan="${values.length}">${key}</td><td>${values[0]}</td><td>${unit}</td></tr>`);

    tbody.append(head);

    values.slice(1).forEach(function(bracket) {
      $(`<tr><td>${bracket}</td><td>${unit}</td></tr>`).appendTo(tbody);
    });
  }

  createMultiRow('Man', ageTextBrackets, 'Person');
  createMultiRow('Woman', ageTextBrackets, 'Person');
  table.append(`<tr class="total"><td colspan="2">Sum</td><td>Person</td></tr>`)
  table.append(`<tr class="max"><td colspan="2">Maximum</td><td>${maximumOccupancy}</td></tr>`)
  table.append(`<tr class="occupancy"><td colspan="2">Occupancy</td><td>Percentage</td></tr>`)
 
  var f = 0;
  // Loops through each summary
  res.forEach(function (column) {
      // Find all the last column cells
  		var finalCol = $(table).find('tr td:last-child').toArray();
      // Put the date next to the first one
      var first = finalCol.shift();
			$(first).after(`<td>${column.date.split('T')[0]}</td>`);
      
      // Add empty cells...should put the appropriate data in. 
      // Think this should have been called with a selector that matches Male:0-10 etc.
			finalCol.forEach(function(rowCell){
        $(rowCell).after(`<td>${f++}</td>`);
      });
    });
		table.find('tr:first').css('font-weight', 'bold');
    $(selector).append(table);
  }

  var dataSet = [{
    "date": "2017-02-21T00:00:00Z",
    "numUsers": 1,
    "numSessions": 1,
    "avgDuration":...