Dart web UI and iterating inside a table

Question

I tried to iterate over data inside a table:

  <table>
    <template iterate="entry in data">
      <tr>
        <template iterate="value in entry.values">
          <td>{{ value }}</td>
        </template>
      </tr>
    </template>
  </table>

For some reason I'm getting this error message when I build:

Unexpected end tag (template) in table context caused voodoo mode.

It works fine when I iterate inside ul:

  <ul>
    <template iterate="entry in data">
      <template iterate="value in entry.values">
        <li>{{ value }}</li>
      </template>
    </template>
  </ul>

I imagined that using tables and iteration shouldn't be a problem.

score 5 · Accepted Answer · answered Feb 19 '13 at 12:56

5

Looks like I found a solution, although I still do not know what the issue was:

<table template iterate="entry in data">
  <tr template iterate="value in entry.values">
    <td>{{ value }}</td>
  </tr>
</table>

answered Feb 19 '13 at 12:56

Kai Sellgren

27,954
10
75
87

Take a look at this issue: https://github.com/dart-lang/web-ui/issues/191 - quote: "Tables in HTML are very picky about their child node types, which is why we can't support – Chris Buckett Feb 19 '13 at 13:03
2

I see. Fortunately we can use the `iterate` attribute right on the `table` and `tr`. – Kai Sellgren Feb 19 '13 at 13:06
I had to find this solution also at one point, kai make an easy to use data grid :) – adam-singer Feb 20 '13 at 02:19
At one point, you could omit the template attribute. I believe it's now required. – Seth Ladd Feb 20 '13 at 02:37
@SethLadd yes I believe that's the eventual goal, but right now you still need it. I'd love to type `
...
`. :) – Kai Sellgren Feb 20 '13 at 13:46
This is incorrect right now. It should be: `etc...`
– enyo Jul 09 '13 at 16:58

Dart web UI and iterating inside a table

1 Answers1