Using a Template Repeater in a Table tag

Issue

In my application I have noticed that my template repeater does not get called when inside of a table. My goal is to use the repeater to complete the data and refresh it as needed.

Markup:

<table>
    <tr>
        <th>Name</th>
        <th>Date Uploaded</th>
        <th>Default</th>
    </tr>
    <template id="themesRows" is="dom-repeat" items="{{themeList}}">
        <tr>
            <td>TEST {{item.name}}</td>
            <td>{{item.dateCreatedUtc}}</td>
            <td>
                <!--<input type="radio" name="default" value="{{item.id}}" selected="{{item.id == model.defaultThemeId}}" />-->
            </td>
            <td>{{index}}</td>
        </tr>
    </template>
</table>

Dart:

class SampleB {
  String name = "";
  String dateCreatedUtc = "";
  int id = 0;
  SampleB(this.id, this.name, this.dateCreatedUtc);
}

class MyPolymerElement extends PolymerElement{
@property List themeList = [];
MyPolymerElement.created() : super.created();
attached(){}
}

Solution

This is not necessarily something “broken” in Polymer or your code, rather it is a limitation caused by a “feature” in the browser parser. Since the element hierarchy for table is well defined, browsers have specific parsing rules when they process them. When drilling into a table hierarchy, if the parser comes across a child it does not expect, it produces unexpected results.

It’s hard to tell from the excerpt, but I would guess that your repeater is actually working, but the browser is not rendering the rows within the table. If you want to post a complete demo of the issue, I’d be happy to review and amend my answer.

A way around this is to just put an observer on your themeList property. When the value changes, use DOM manipulation to fill or modify the table.

---

There is some good information about it in the discussion related to this issue: https://github.com/Polymer/polymer/issues/4135

Per the thread, it appears there is a fix that will allow this in the Polymer 2.0 preview release.

Answered By – brianreeve

Answer Checked By – Mary Flores (FlutterFixes Volunteer)