Search code examples
handlebars.jssendgridsendgrid-templates

In Sendgrid Design template, how to use handlebar iteration for table?


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


Solution

  • 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>