Getting iron-data-table to render demo data

Question

When I run my code in this JSbin, I expect the iron-data-table to render with populated data similar to the way it does on this demo page. Instead, only the table headers render but the rest of the cells fail to populate.

What changes can be made to the JSbin to achieve the desired behavior?

http://jsbin.com/hepebapori/1/edit?html,console,output

<!DOCTYPE html>
<html>  
  <head>
    <base href="https://polygit.org/polymer+:master/components/">
    <link rel="import" href="polymer/polymer.html">

    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>

    <link rel="import" href="iron-ajax/iron-ajax.html">
    <link rel="import" href="paper-button/paper-button.html">

    <link href="https://rawgit.com/saulis/iron-data-table/master/iron-data-table.html" rel="import">

  </head>
  <body>
    <dom-module id="x-foo">
      <template>
        <style>
        </style>
        <paper-button on-tap="msg">Click Me</paper-button>

        <iron-ajax auto
          url="https://saulis.github.io/iron-data-table/demo/users.json" 
          last-response="{{users}}"
          >
        </iron-ajax>
        <iron-data-table selection-enabled items="[[users.results]]">
          <data-table-column name="Picture" width="50px" flex="0">
            <template>
              <img src="[[item.user.picture.thumbnail]]">
            </template>
          </data-table-column>
          <data-table-column name="First Name">
            <template>[[item.user.name.first]]</template>
          </data-table-column>
          <data-table-column name="Last Name">
            <template>[[item.user.name.last]]</template>
          </data-table-column>
          <data-table-column name="Email">
            <template>[[item.user.email]]</template>
          </data-table-column>
        </iron-data-table>

      </template>
      <script>
        (function(){
          'use strict';
          Polymer({
            is: 'x-foo',
            msg: function() {
              console.log('This proves Polymer is working!');
            },
          });
        })();
      </script>
    </dom-module>
    <x-foo></x-foo>
  </body>
</html>

Marc · Accepted Answer · 2016-07-31T10:26:39.457

Your problem is the import of the iron-data-table. Just using rawgit won't do the magic, since you need to use a proxy server such as polygit to make webcomponents work (you're already loading Polymer like this, but not iron-data-table).

Due to a mediocre documentation it took me a while to figure out, how to combine the polymer import with the iron-data-table.

The two configurations needed are polymer+:master and iron-data-table+Saulis+:master.

Combined, your base tag looks like this:

<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">

With this, you can import the element just like the others:

<link rel="import" href="iron-data-table/iron-data-table.html">

Working JSbin (Tested in Google Chrome)

score 0 · Answer 2 · answered Sep 06 '16 at 10:09

To start using iron-data-table in your project you have to:

download packages:

bower i iron-data-table -S

bower install --save PolymerElements/iron-ajax

create html file referencing those packages:

<html>
<head>
    <title></title>
  <meta charset="utf-8" />
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/iron-ajax/iron-ajax.html" />
    <link rel="import" href="bower_components/iron-data-table/iron-data-table.html">
</head>
<body>
    <template is="dom-bind">
        <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
        <iron-data-table items="[[data]]">
            <data-table-column name="First Name">
                <template>
                    [[item.name.first]]
                </template>
            </data-table-column>
            <data-table-column name="Last Name">
                <template>
                    [[item.name.last]]
                </template>
            </data-table-column>
        </iron-data-table>
    </template>
</body>
</html>

create data.json file in the same place where html file is:

[
  {"name": {
    "title": "miss",
    "first": "donna",
    "last": "davis"
  }},
  {
    "name": {
      "title": "mr",
      "first": "samuel",
      "last": "kelley"
    }
  },
  {"name": {
    "title": "ms",
    "first": "katie",
    "last": "butler"
  }}
]

Getting iron-data-table to render demo data

2 Answers2