Mjml: mj-raw problems inside tables

[plaisted]

I've been playing around using mjml and templating engines for emails. Here is an example of a table that I've put mustache syntax in using MJ-RAW tags. This works well in other areas but for a table there seems to be some issues with the MJML transpilation. My expectation is this MJML code would simply put {{#errors}} before and {{/errors}} after my TR element shown, so that I could run the output HTML through mustache with a data set to properly populate the table.

          <mj-table font-size="12px" color="#000000" font-family="helvetica" padding="0px">
            <tr>
              <th width="8%">Count</th>
              <th width="8%">Status</th>
              <th width="10%">Template</th>
              <th width="74%" align="left">Comments</th>
            </tr>
            <mj-raw>{{#errors}}</mj-raw>
            <tr>
              <td width="8%" align="center">{{count}}</td>
              <td width="8%" align="center">{{status}}</td>
              <td width="10%" align="center">{{emailTemplateId}}</td>
              <td width="74%" align="left" style="font-size: 8px">{{comments}}</td>
            </tr>
            <mj-raw>{{/errors}}</mj-raw>
          </mj-table>

As you can see the actual output embedded the entire TR element inside of a CDATA tag. In addition it left the mj-raw tags there, which is doesn't do in other areas.

<table cellpadding="0" cellspacing="0" style="cellspacing:0px;color:#000000;font-family:helvetica;font-size:12px;line-height:22px;table-layout:auto;" width="100%" border="0">
            <tr>
              <th width="8%">Count</th>
              <th width="8%">Status</th>
              <th width="10%">Template</th>
              <th width="74%" align="left">Comments</th>
            </tr>
            <mj-raw><!--[CDATA[{{#errors}}
            <tr>
              <td width="8%" align="center">{{count}}</td>
              <td width="8%" align="center">{{status}}</td>
              <td width="10%" align="center">{{emailTemplateId}}</td>
              <td width="74%" align="left" style="font-size: 8px">{{comments}}</td>
            </tr>
            <mj-raw>{{/errors}}</mj-raw>
          ]]--></mj-raw></table>

Am I miss-using here or is this a bug? Is this related to #286?

[iRyusa]

Hi there,

You can't use mj-raw ( and any other mj-element ) inside tags like mj-table/text/etc that accept plain HTML. Dunno if React will allow it, but did you tried without it ?

[plaisted]

Thanks for the quick response. I didn't realize the innards of mj-table was just standard HTML. Removing the mj-raw elements solved my issue. Maybe it's obvious, but adding notes to those elements docs may be helpful to make it explicit.

[pawl-bb]

One workaround for this is to put your template tags inside of style attributes on <tr> and <td>, like:

            <tr style="{% if total <= 0 %}display: none;{% endif%}">

But yeah, anywhere outside of the style attribute seems to mangle the template tags.

[probablyabear]

@plaisted, I've been looking into integrating a template engine in my MJML workflow. Would you be willing to share your setup?