generator-polymer-init-vaadin-elements-app/app/templates/src/employee-list.html

Progressive web application template with Polymer App Toolbox and Vaadin Elements

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/vaadin-text-field/vaadin-text-field.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-filter.html">
<link rel="import" href="shared-styles.html">

<dom-module id="employee-list">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        background: transparent;
      }
      vaadin-grid-filter {
        width: 100%;
      }
      vaadin-text-field {
        width: 100%;
      }
    </style>

    <iron-ajax
      auto
      url="employees.json"
      handle-as="json"
      last-response="{{_employees}}"></iron-ajax>

    <div class="card">
      <vaadin-grid items="[[_employees]]">
        <vaadin-grid-column>
          <template class="header">
            <vaadin-grid-filter aria-label="First Name" path="firstName" value="[[_filterFirstName]]">
              <vaadin-text-field slot="filter" placeholder="First Name" value="{{_filterFirstName}}" focus-target></vaadin-text-field>
            </vaadin-grid-filter>
          </template>
          <template>[[item.firstName]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
          <template class="header">
            <vaadin-grid-filter aria-label="Last Name" path="lastName" value="[[_filterLastName]]">
              <vaadin-text-field slot="filter" placeholder="Last Name" value="{{_filterLastName}}" focus-target></vaadin-text-field>
            </vaadin-grid-filter>
          </template>
          <template>[[item.lastName]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
          <template class="header">Email</template>
          <template>[[item.email]]</template>
        </vaadin-grid-column>
      </vaadin-grid>
    </div>
  </template>
  <script>
    class EmployeeList extends Polymer.Element {
      static get is() {
        return 'employee-list';
      }
      static get properties() {
        return {
          _employees: {
            type: Array,
            value: () => []
          },
          _filterFirstName: {
            type: String,
            value: ''
          },
          _filterLastName: {
            type: String,
            value: ''
          }
        };
      }
    }
    window.customElements.define(EmployeeList.is, EmployeeList);
  </script>
</dom-module>