GrapesJS moving Mustache tokens

Hello, I am working with GrapesJS to allow users to create report templates. I've run into a problem with a block that creates a table, but the table rows are determined by Mustache tokens. However, when rendered, the tokens are moved outside of the table element. I believe the table or table row style is not allowing the existence of these tokens within the table element structure.

My block:

    bm.add('product-list-block', {
        label: 'Product List',
        attributes: {
            class: 'fa fa-header'
        },
        category: 'Products',
        content: `
            <div>
                <table data-gjs-type="product-list-type" style="width: 100%; margin: 10px 15px;">
                    <tr style="height: 24px; background: #72a1c3">
                        <th style="width: 15%">Image</th>
                        <th>Details</th>
                    </tr>
                    {{#bomGroupProducts}}
                    <tr>
                        <td style="width: 15%">{{productImageUrl}}</td>
                        <td>
                            <div style="font-weight: bold">{{productName}}</div>
                            <div>{{productDescription}}</div>
                            <div>SKU: {{productSku}}</div>
                        </td>
                    </tr>
                    {{/bomGroupProducts}}
                </table>
            </div>`
    });

The product-list-type:

    domc.addType('product-list-type', {
        extend: 'table',
        model: tableModel.extend({
            defaults: {
                ...defaultModel.prototype.defaults,
                // Default props
                draggable: true,
                droppable: true,
                attributes: {
                    title: productListTitle,
                    style: 'color: red; font-weight: bold;'
                }
            }
        }),
        isComponent: el => {
            // console.log(el);
            // console.log(el.tagName + '[title=' + el.title + ']');

            if (el.tagName === 'th' && el.getAttribute('data-gjs-type') === 'product-list-type') {
                return {
                    type: 'product-list-type'
                };
            }

            return '';
        }
    });

When I drop the element onto the canvas, the {{#bomGroupProducts}} and {{/bomGroupProducts}} tokens are moved above the entire table.

<div style="box-sizing: border-box;">
  {{#bomGroupProducts}}
  {{/bomGroupProducts}}
  <table title="productListTitle" id="i0x6" style="box-sizing: border-box; width: 100%; margin: 10px 15px;" width="100%">
    <thead style="box-sizing: border-box;">
      <tr id="icuj" style="box-sizing: border-box; height: 24px; background: #72a1c3;">
        <th id="izmb" style="box-sizing: border-box; width: 15%;">Image
        </th>
        <th style="box-sizing: border-box;">Details
        </th>
      </tr>
    </thead>
    <tbody style="box-sizing: border-box;">
      <tr style="box-sizing: border-box;">
        <td id="idbqf" style="box-sizing: border-box; width: 15%;" width="15%">{{productImageUrl}}
        </td>
        <td style="box-sizing: border-box;">
          <div id="iwb35" style="box-sizing: border-box; font-weight: bold;">{{productName}}
          </div>
          <div style="box-sizing: border-box;">{{productDescription}}
          </div>
          <div style="box-sizing: border-box;">SKU: {{productSku}}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

I need those tokens around the <tr> elements, so that the Mustache generator creates rows for each product as needed. Is there a way in the style/component I can prevent this?

Thanks in adance, Randy