Search code examples
javascriptpolymerpolymer-1.0iron-data-table

Getting iron-data-table to render demo data

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>
Solution

  • 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)