<base href="https://polygit.org/vaadin-grid+vaadin+v2.0.3/polymer+polymer+v1.9.0/components/"/>

<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-grid/all-imports.html">

<my-app></my-app>

<dom-module id="my-app">
  <template>
    <vaadin-grid items='[{"name": "John", "surname": "Lennon", "role": "singer"}, {"name": "Ringo", "surname": "Starr", "role": "drums"}]'>
      <vaadin-grid-column>
        <template class="header">Name</template>
        <template>[[item.name]]</template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">Surname</template>
        <template>[[item.surname]]</template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">Role</template>
        <template>[[item.role]]</template>
      </vaadin-grid-column>
    </vaadin-grid>
  </template>
  <script>
    addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'my-app'
      });
    });
  </script>
</dom-module>

// Code goes here

/* Styles go here */