CODEWITHSUNDEEP
data-bindingpolymerdom-repeatiron-data-table
Fajar Apriansyah
Fajar Apriansyah

Reputation: 3

Polymer dom-repeat inside Iron-data-table

So, I have a data something like this:

data: {
  0: {
    id: 1
    name: Config1
    devices: {
      data: {
        0: {
          id: 1
          ip_address: 192.168.11.1
        },
        1: {
          id: 2
          ip_address: 192.168.11.2
        },
        ..
    },
  },
  1: {
    id: 2
    name: Config2
    devices: {
      data: {
        0: {
          id: 1
          ip_address: 192.168.11.3
        },
        1: {
          id: 2
          ip_address: 192.168.11.4
        },
        2: {
          id: 3
          ip_address: 192.168.11.5
        },
        ..
    },
  },
  ..
}

lets say I want to display it in <iron-data-table>, and I'm expecting like this:

Config Name | IP Address
Config1 | 192.168.11.1 - 192.168.11.2
Config2 | 192.168.11.3 - 192.168.11.4 - 192.168.11.5

and, this is current code:

<iron-ajax url="data" last-response="{{response}}" auto></iron-ajax>

<iron-data-table items="[[response.data]]">
  <data-table-column name="Config Name">
    <template>[[item.name]]</template>
  <data-table-column>

  <data-table-column name="IP Address">
    <template is="dom-repeat items="[[item.devices.data]]" as="dev">
      [[dev.ip_address]]
    </template>
  <data-table-column>

</iron-data-table>

The problem is, the IP Address aren't displayed. I need to use something like <dom-repeat> because the number of device each config are different, like id=1 have 2 device, id=2 have 3.

Is there any other way for this problem?

Thanks for your attention and your help.

Upvotes: 0

Views: 245

Answers (1)

Pascal L.
Pascal L.

Reputation: 1259

As you already have noticed dom-repeat won´t work here. Your only solution is to write a function which then returns the ip´s as String.

<data-table-column name="IP Address">
   <template>[[_getIpAddresses(item)]]</template>
<data-table-column>

Little advice iron-data-table is dead no one maintains this repo better use vaadin-grid

Upvotes: 1

Related Questions