JSFiddle - React, Tailwind, and code Playground

by 76484

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<script type="text/html" id="ViewDataTemplate">
	<table class="table table-hover">
		<thead>
			<tr>
				{{#each (lookup this 0)}}
					<th>{{this.name}}</th>
				{{/each}}
			</tr>
		</thead>
		<tbody>
			{{#each this}}
				<tr>
					{{#each this}}
						<td>{{this.value}}</td>
					{{/each}}
				</tr>
			{{/each}}
		</tbody>
	</table>
</script>

JavaScript

// https://stackoverflow.com/q/47809752/3397771

var raw = document.getElementById('ViewDataTemplate').innerHTML;
var template = Handlebars.compile(raw);
var data = [
  [
    {
      "name": "_id",
      "value": "5a32391133425e1f5436161b"
    },
    {
      "name": "Issue",
      "value": "Splash Screen Animations"
    },
    {
      "name": "Status",
      "value": "Done"
    },
    {
      "name": "Comment",
      "value": "The animation must be the same as ios"
    }
  ],
  [
    {
      "name": "_id",
      "value": "5a32391133425e1f5436161c"
    },
    {
      "name": "Issue",
      "value": "Live Streaming Title and Image"
    },
    {
      "name": "Status",
      "value": "Done"
    },
    {
      "name": "Comment",
      "value": "asdasd"
    }
  ],
];

document.body.innerHTML = template(data);