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>
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 notiron-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
andiron-data-table+Saulis+:master
.Combined, your
base
tag looks like this:With this, you can import the element just like the others:
Working JSbin (Tested in Google Chrome)