JSFiddle - React, Tailwind, and code Playground

by andredgusmao

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="tabs">
</div>

CSS

body{
    margin: 20px;
  }
  th {
    text-align: center;
  }
  td {
    text-align: center;
  }
  table {
    border-collapse: separate;
  }
  .table-responsive {
    width: 100%;
  }
  div#export_excel {
      float: right;
      padding-right: 20px;
      padding-top: 4px;
  }
  button#btnExport {
      text-transform: uppercase;
      font-weight: 100; 
  }

JavaScript

var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"John\",\"id\":51},{\"name\":\"John\",\"id\":57},{\"name\":\"John\",\"id\":98},{\"name\":\"XYZ\",\"id\":50},{\"name\":\"XYZ\",\"id\":51},{\"name\":\"XYZ\",\"id\":57},{\"name\":\"XYZ\",\"id\":98}]}");

let names = data.user.map(i => i.name)
  .filter((el, i, a) => a.indexOf(el) == i);
  
function idsForName(name, array) {
	return array.filter(el => el.name === name).map(el => el.id);
}

let $table = $('<table class="table table-responsive table-hover table-bordered"></table>');

$table.attr('id', 'main_table');

let $thead = $("<thead/>");
let $tbody = $("<tbody/>");
let $hRow = $("<tr/>").addClass('head-row');

if(names.length) $hRow.append($("<th/>").text('NAME'));

names.forEach(el => {
	let $row = $("<tr/>");
  $row.append($("<td/>").text(el));
  let ids = idsForName(el, data.user);
  console.log(ids);
  ids.forEach((id, index) => {
  	let th = '.th-' + index;
    console.log($hRow.find(th).length);
		if(!$hRow.find(th).length) $hRow.append($("<th/>").addClass('th-' + index).text('ID'));
		$row.append($("<td/>").text(id));
	});
	$tbody.append($row);
});
$thead.append($hRow);

console.log($thead.html());
console.log($tbody.html());

$table.append($thead).append($tbody);
$('#tabs').append($table.prop('outerHTML'));