JSFiddle - React, Tailwind, and code Playground

by Sergey Kulikov

HTML

<base href="https://polygit.org/vaadin-grid+vaadin+^5.0.0/iron-ajax+:master/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-filter.html">
<link rel="import" href="iron-ajax/iron-ajax.html">

<dom-bind>
  <template is="dom-bind">
    <!-- Fetch an array of users to be shown in the grid -->
    <iron-ajax auto url="https://demo.vaadin.com/demo-data/1.0/people?count=200" handle-as="json" last-response="{{users}}"></iron-ajax>

    <!-- The array is set as the <vaadin-grid>'s "items" property -->
    <vaadin-grid aria-label="Basic Binding Example" items="[[users.result]]">

      <vaadin-grid-column width="50px" flex-grow="0">
        <template class="header">#</template>
        <template>[[index]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">
          <vaadin-grid-filter aria-label="First Name" path="firstName" value="[[_filterFirstName]]">
            <input slot="filter" placeholder="First Name" value="{{_filterFirstName::input}}" focus-target>
          </vaadin-grid-filter>
        </template>
        <template>[[item.firstName]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">Last Name</template>
        <template>[[item.lastName]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column width="150px">
        <template class="header">Address</template>
        <template>
          <p style="white-space: normal">[[item.address.street]], [[item.address.city]]</p>
        </template>
      </vaadin-grid-column>

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