聚合物1.0中的dom-repeat里面的内容？

Question

My problem is that I can´t find the way to bind data using <content> tag. I want to make a table element in which one you only pass an array of titles and array of objects representing data to use.

My code to show data is as follows:

<template is="dom-repeat" items="{{rows}}">
    <td>{{item.Id}}</td><td>{{item.Descripcion}}</td>
</template>

But if I use this way, my table element only will work when the rows has an Id or Descripcion properties.
I want to do something like this:

<template is="dom-repeat" items="{{rows}}">
    <content></content><!--dynamic item-->
</template>

So, when I call my table element should be something like this:

<my-table titles="[arrayOfTitles]" rows="[arrayOfRows]">
    <td>{{item.propertyOne}}</td><td>{{item.propertyTwo}}</td><td>{{item.propertyN}}</td>
</my-table>

In which <td></td> will have the data to represent inside it.
This sounds crazy? It is possible to do?

I have tried using getDistributedNodes function but I don´t know how to use it to do what I want. Sorry for my English. Thanks! Any help will be great!

Edit

When I use my element looks as follows:

<my-table api-url="../../api/feeApi"
          headers='[{"title":"Id"},{"title":"Descripción"},{"title":"Abreviatura"},{"title":"Tipo"},{"title":"Monto($)"},{"title":"Cobrar a"}]'
          keys='["Id","Descripcion","ShortName","FeeType","Monto","NivelesEscolares"]'
          number-visible-rows="10">
</my-table>

Now, the problem is how to use objects more complexes, when I use Objects or Arrays they displays like this:
As you can see, when I use objects or arrays displays [object Object], any idea of how to construct my table declaration to indicate if it has objects? I want to make something like this:

My <tbody> is like @so_confused_ said:

        <tbody>
            <template is="dom-repeat" items="{{visibleRows}}" id="tableRow">
                <tr on-tap="rowSelected" class$="{{getClass(item.active)}}">
                    <template is="dom-repeat" items="{{item.row}}" id="tableData">
                        <td>{{item}}</td>
                    </template>
                </tr>
            </template>
        </tbody>

Answer 1

        <tbody>
            <template is="dom-repeat" items="{{visibleRows}}" id="tableRow" as="row">
                <tr on-tap="rowSelected" class$="{{getClass(row.active)}}" style="cursor:cell;">
                    <template is="dom-repeat" items="{{headers}}" id="tableRow2" as="column">
                        <template is="dom-if" if="{{areEquals(column.type, 'object')}}">
                            <td>{{getObjectValue(column,row)}}</td>
                        </template>
                        <template is="dom-if" if="{{areEquals(column.type, 'array')}}">
                            <td>
                                <template is="dom-repeat" items="{{getDataArray(column,row)}}">
                                    <li>{{getArrayValue(item,column)}}</li>
                                </template>
                            </td>
                        </template>
                        <template is="dom-if" if="{{areEquals(column.type, 'text')}}">
                            <td>{{getValue(column,row)}}</td>
                        </template>
                    </template>
                </tr>
            </template>
        </tbody>

Depending on the type of column you call the corresponding function.

Answer 2

If you're not rendering with the same key all the time, can you just use your input as an array of arrays?

if you have an array: arr = [["one","two","three","four"],["one","two"],["one","two","three"]]; then you can render rows of different lengths by iterating over the nested array

<template is="dom-repeat" items="{{arr}}">
  <tr>
    <template is="dom-repeat" items="{{item}}>
      <td>{{item}}</td>
    </template>
  </tr>
</template>