vaadin-grid

vaadin

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/vaadin/vaadin-grid/v3.0.0/vaadin-grid/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-grid.html">
<link rel="import" href="vaadin-grid-column.html">
<link rel="import" href="../iron-image/iron-image.html">
<link rel="import" href="demo/x-data-provider.html">
<dom-bind>
  <template>
    <x-data-provider data-provider="{{dataProvider}}"></x-data-provider>

    <vaadin-grid data-provider="[[dataProvider]]" size="200">

      <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>
          <iron-image src="[[item.picture.thumbnail]]"></iron-image>
        </template>
      </vaadin-grid-column>

      <vaadin-grid-column width="calc(50% - 100px)">
        <template class="header">First Name</template>
        <template>[[item.name.first]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column width="calc(50% - 100px)">
        <template class="header">Last Name</template>
        <template>[[item.name.last]]</template>
      </vaadin-grid-column>

    </vaadin-grid>
  </template>
</dom-bind>