Framework: Table repeat.for: Can not wrap tr elements in a repeated div

[rdelhommer]

I'm submitting a bug report

• Library Version:
  1.1.5

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  8.9.1

• NPM Version:
  5.5.1

• Aurelia CLI OR JSPM OR Webpack AND Version
  webpack 2.7.0

• Browser:
  Chrome 63.0.3239.132

• Language:
  TypeScript 2.5.2

Current behavior:
it does not appear that a table can be built by wrapping tr elements in a repeated div element

Expected/desired behavior:
This seems to be valid - if unconventional - way to build tables (tested in Chrome 63 and IE 11) and produces the desired effect of having a spanned row after every row:

<table style="width:100%">
  <tr>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
  </tr>
  <div> <!-- wraps two tr elements -->
    <tr>  <!-- the "normal" row -->
      <td>cell 0, 0</td>
      <td>cell 0, 1</td>
      <td>cell 0, 2</td>
    </tr>
    <tr> <!-- the "special" spanned row -->
      <td colspan="3">
         so much cool stuff can be done here
      </td>
    </tr>
  </div>
  <div> <!-- wraps two tr elements -->
    <tr>  <!-- the "normal" row -->
      <td>cell 1, 0</td>
      <td>cell 1, 1</td>
      <td>cell 1, 2</td>
    </tr>
    <tr>  <!-- the "special" spanned row -->
      <td colspan="3">
        other cool stuff in here
      </td>
    </tr>
  </div>
</table>

However, when done with a repeater, only the first row (after the header) is rendered.

<table>
   <tr>
      <th>this</th>
      <th>doesn't</th>
      <th>work</th>
      <th>:(</th>
   </tr>
   <div repeat.for="i of 3">  <!-- wraps two tr elements -->
      <tr> <!-- the "normal" row -->
         <td repeat.for="j of 4">
             <!-- Side note: Both ${i} and ${$parent.i} seem to be undefined here -->
             cell ${i}, ${j}
         </td>
      </tr>
      <tr>  <!-- the "special" spanned row -->
         <td colspan="4">extra td for fun stuff</td>
      </tr>
   </div>
</table>

Nesting repeats in this fashion seems to work outside of tables:

<div repeat.for="i of 3">
    <div>
        <div repeat.for="j of 3">| ${i}, ${j} |</div>
    </div>
</div>

• What is the motivation / use case for changing the behavior?
  I'd like to use the "special" spanned row (second one in the div) to create a collapsible section that provides additional information about the "normal" row (first one in the div). In this particular case, I want to nest another table in the spanned row that would be conditionally hidden/shown by the user.

[rdelhommer]

Resolved the issue by using a template instead of a div to wrap the grouped rows

<template repeat.for="i of 3">
    <tr>
        <td repeat.for="j of 3">${$parent.i}, ${j}</td>
    </tr>
    <tr>
        <td colspan="3">
            <div style="text-align:center;">
                panel
            </div>
        </td>
    </tr>
</template>

[AshleyGrant]

Yep, <template> is the correct way to handle this.

[rdelhommer]

It should be noted that this may lead to issues in IE per this thread -
https://github.com/aurelia/templating/issues/565

[AshleyGrant]

Things not working in IE are what makes development fun!

But seriously, the reason Aurelia has a <require /> element and not an <import /> element is because IE didn't like the <import /> element for some unknown reason. IE is also why we had to implement the css custom attribute.