vaadin-grid 2.0.0-alpha2 Selection

by Saulis

HTML

<base href="https://polygit.org/vaadin-grid+vaadin+v2.0.0-alpha2/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="_selectAll" raised>Select All</paper-button>
    <paper-button on-tap="_clear" raised>Clear Selection</paper-button>
    <paper-checkbox checked="{{autoSelect}}">Enable Row Click Selection</paper-checkbox>
    
    <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]]">
      <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...