polymer iron-data-table Row details
Example
Expand row details to display additional data.
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+: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 rel="import" href="iron-data-table/iron-data-table.html">
<link rel="import" href="iron-data-table/default-styles.html">
</head>
<body>
<dom-module id="x-foo">
<template>
<style>
#grid1 data-table-row-detail {
height: 100px;
}
#grid1 .detail {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
border: 2px solid #aaa;
}
</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 id="grid1" details-enabled items="[[users.results]]">
<template is="row-detail">
<div class="detail">
<img src="[[item.user.picture.medium]]">
<p>[[item.user.username]]</p>
<p>[[item.user.email]]</p>
</div>
</template>
<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>
</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>
