JSFiddle - React, Tailwind, and code Playground
by Sergey Kulikov
HTML
<base href="https://polygit.org/vaadin-material-theme+:master/vaadin-grid+vaadin+^4.1.4/paper-checkbox+^2.0.0/iron-ajax+:master/polymer+^2.5.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-filter.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<!-- FOR TEST -->
<link rel="import" href="vaadin-grid/vaadin-grid-selection-column.html">
<link rel="import" href="paper-checkbox/paper-checkbox.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>
<paper-checkbox>Test</paper-checkbox>
<!-- 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>
<!-- FOR TEST -->
<vaadin-grid-column>
<template>
<paper-checkbox aria-label="Select Row" checked="{{selected}}">Selected
</paper-checkbox>
</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...