Handlebars outputting table data

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script id="table-template" type="text/x-handlebars-template">
 {{#each table}}
<table>
    <thead>
        {{#each table.tableHead}}
				<tr>
        {{#each that}}
            <th>{{that}}</th>
        {{/each}}
        </tr>
        {{/each}}
    </thead>
    <tbody>
    {{#each table.gridrow}}
        <tr>
					{{#each this}}
          	<td>{{this}}</td>
          {{/each}}
				</tr>
    {{/each}}
    </tbody>
</table>
{{/each}}
</script>

<div class="output"></div>

JavaScript

var data = {
    table: [
      tableHead: ['header1','header1', 'header1'],
        gridrow: {[
        	['data1', 'data 2', 'data 3'],
          ['data1', 'data 2', 'data 3'],
          ['data1', 'data 2', 'data 3'],
          ['data1', 'data 2', 'data 3'],
          ['data1', 'data 2', 'data 3']          
        ]}
    ]
};

var source = $("#table-template").html();
var template = Handlebars.compile(source);
$('.output').html(template(data));