vaadin-grid 2.0.0-alpha2 Selection
HTML
<base href="https://polygit.org/vaadin-grid+vaadin+v2.0.0-beta3/polymer+polymer+v1.7.0/components/"/>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-grid/vaadin-grid.html">
<link rel="import" href="vaadin-grid/vaadin-grid-selection-column.html">
<link rel="import" href="paper-elements/paper-elements.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<my-app></my-app>
<dom-module id="my-app">
<template>
<style>
:host {
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 24px;
}
.capitalized {
text-transform: capitalize;
}
img {
border-radius: 50%;
height: 32px;
width: 32px;
}
</style>
<paper-button on-tap="_exportJSON" raised>Export JSON</paper-button>
<paper-button on-tap="_exportCSV" raised>Export CSV</paper-button>
<iron-ajax url="https://randomuser.me/api?results=100&inc=name,email,picture" last-response="{{users}}" auto></iron-ajax>
<vaadin-grid id="grid" items="[[users.results]]" selected-items="{{selected}}">
<vaadin-grid-selection-column auto-select="[[autoSelect]]"></vaadin-grid-selection-column>
<vaadin-grid-column width="50px" flex-grow="0">
<template class="header">#</template>
<template>[[index]]</template>
</vaadin-grid-column>
<vaadin-grid-column width="50px" flex-grow="0">
<template class="header"></template>
<template>
<img src="[[item.picture.thumbnail]]"></img>
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">First Name</template>
<template>
<div class="capitalized">[[item.name.first]]</div>
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Last Name</template>
<template>
<div...