TypeScript

HTML

<div id="output"></div>
<script type="template/handlebars" id="template">
<table>
	<thead>
  	<tr>    	
    	<th>Team</th>
      <th></th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
  {{#each names}}
  	<tr>
    	<td>{{team}}</td>
      <td>{{ @index }}</td>
      <td>{{firstName}} {{lastname}}</td>
    <tr>
  {{/each}}
  </tbody>
</table>
</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

TypeScript

var template = Handlebars.compile(document.getElementById('template').innerHTML, { strict: true });


document.getElementById('output').innerHTML = template({
	"summary": {
  	"foo": "A"
  },
  "names": [
  	{
    	"firstName": "Foo",
      "lastname": "Bar",
      "team": "red"
    },
    {
    	"firstName": "Joe",
      "lastname": "Blogs",
      "team": "red"
    },
    {
    	"firstName": "Anne",
      "lastname": "Other",
      "team": "green"
    },
    {
    	"firstName": "Someone",
      "lastname": "Else",
      "team": "black"
    }
    ,
    {
    	"firstName": "Last",
      "lastname": "Person",
      "team": "black"
    }
  ]
});