In Sendgrid Design template, how to use handlebar iteration for table? - handlebars.js

Question

I'm using SendGrid online "Design" template, with a module "code".
In their documentation (https://sendgrid.com/docs/ui/sending-email/editor/#code-modules), they say that de code editor does not modify or validate any HTML.
If I write this piece of code inside the code module:
<ul>
{{#each items}}
<li>test</li>
{{/each}}
</ul>
<table>
<tbody>
{{#each items}}
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
{{/each}}
</tbody>
</table>
it results in:
<ul>
{{#each items}}
<li>test</li>
{{/each}}
</ul>
{{#each items}}{{/each}}
<table>
<tbody><tr>
<td>Col 1</td>
<td>Col 2</td>
</tr></tbody>
</table>
We can see that the {{each}} function stays in the right place for the ul, but is remove from inside of the table. Is this a temporary bug? How can I do this simple operation?
Thanks for your help

Answer 1

I found a undocumented way to make this works. You will need to comment out the each helper like this:
<table>
<tbody>
<!-- {{#each items}} -->
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<!-- {{/each}} -->
</tbody>
</table>

Answer 2

I get the same issue. Definitely a bug in the Design Editor. My work around was to:
Style the email with the Design Editor.
Export HTML.
Go back and create a new version of the transaction email using the 'Code Editor' and not the 'Design Editor'.
Paste in the previously exported HTML.
Find the table that needs the {{each}} loop and place the functions exactly as you did.