vuegrid.html

<template>
    <vaadin-vertical-layout style="flex: 1">
        <h2>Book {{greeting}}!</h2>
        <HelloComp/>
        <vaadin-horizontal-layout style="justify-content: space-between; width: 100%; padding-bottom: 16px">
          <vaadin-text-field id="text" placeholder="Filter"></vaadin-text-field>
          <vaadin-button theme="primary" @click="newProduct"><iron-icon icon="vaadin:plus" slot="prefix"></iron-icon>New product</vaadin-button>
        </vaadin-horizontal-layout>
        <!--<vaadin-grid :items="users" onActiveItemChanged={this.foo} active-item={this.state.activeItem}>-->
        <vaadin-grid id="grid" :items.prop="users" v-html="gridHtml" v-on:active-item-changed="bookChanged" >
          <!--<vaadin-grid-column v-html="column"></vaadin-grid-column>-->
        </vaadin-grid>
        <div style="padding: 16px 4px 0 4px">Selected: {{this.activeItem}}</div>
    </vaadin-vertical-layout>
    <!--<vaadin-text-field id="text" placeholder="Type Something"></vaadin-text-field>
    <vaadin-button @click="clicked">Click Me!</vaadin-button>
    <h2>Hello {{msg}}!</h2>-->
  
</template>

<script>
import HelloComp from './HelloComp.vue'
export default {
  name: 'app',
  data () {
    return {
      greeting: "inventory",
      activeItem: null,
      gridHtml: `
        <vaadin-grid-column>
          <template class="header">ID</template>
          <template>[[item.id]]</template>
        </vaadin-grid-column>
         <vaadin-grid-column>
            <template class="header">Product Name</template>
            <template>[[item.name]]</template>
          </vaadin-grid-column>
          <vaadin-grid-column>
            <template class="header">Product price</template>
            <template>[[item.price]]</template>
          </vaadin-grid-column>
          <vaadin-grid-column>
            <template class="header">Availability</template>
            <template>[[item.availability]]</template>
          </vaadin-grid-column>
          <vaadin-grid-column>
            <template class="header">Stock count</template>
            <template>[[item.stock]]</template>
          </vaadin-grid-column>
          <vaadin-grid-column>
            <template class="header">Category</template>
            <template>[[item.category]]</template>
          </vaadin-grid-column>
      `,
      users: [
        { availability: "Coming", category: "Children's books", id: "1", price: "14.70 €", name: "Beginners guide to ice hockey", stock: "-"},
        { availability: "Available", category: "Cookbooks", id: "2", price: "27.80 €", name: "Being awesome at feeling down", stock: "378"},
        { availability: "Discontinued", category: "Cookbooks, Mystery", id: "3", price: "28.40 €", name: "Learning the basics of designing tree houses", stock: "-"},
        { availability: "Discontinued", category: "Romance", id: "4", price: "11.00 €", name: "The secrets of dummies", stock: "-"},
        { availability: "Discontinued", category: "Thriller, Sci-fi", id: "5", price: "23.70 €", name: "The cheap way to meditation", stock: "-"},
        { availability: "Coming", category: "Cookbooks, Best sellers", id: "6", price: "25.50 €", name: "Encyclopedia of playing the cello", stock: "-"},
        { availability: "Coming", category: "Non-fiction", id: "7", price: "27.70 €", name: "The cheap way to elephants", stock: "-"},
        { availability: "Discontinued", category: "Romance", id: "8", price: "5.00 €", name: "Surviving gardening", stock: "-"},
        { availability: "Available", category: "Romance, Best sellers", id: "9", price: "8.60 €", name: "Becoming one with debugging", stock: "6"},
        { availability: "Coming", category: "Sci-fi", id: "10", price: "28.60 €", name: "The life changer:debugging", stock: "-"},
        { availability: "Discontinued", category: "Cookbooks, Best sellers", id: "11", price: "16.50 €", name: "Becoming one with intergalaxy travel", stock: "-"},
        { availability: "Coming", category: "Mystery, Best sellers", id: "12", price: "13.70 €", name: "Encyclopedia of winter bathing", stock: "-"},
        { availability: "Coming", category: "Children's books, Mystery", id: "13", price: "29.10 €", name: "The mother of all references:winter bathing", stock: "-"},
        { availability: "Coming", category: "Children's books", id: "14", price: "11.00 €", name: "The secrets of debugging", stock: "-"},
        { availability: "Available", category: "Romance", id: "15", price: "12.50 €", name: "The complete visual guide to speaking to a big audience", stock: "27"},
        { availability: "Available", category: "Mystery", id: "16", price: "14.40 €", name: "The life changer:running barefoot", stock: "358"},
        { availability: "Available", category: "Cookbooks, Romance", id: "17", price: "9.70 €", name: "The life changer:keeping your wife happy", stock: "168"},
        { availability: "Available", category: "Best sellers", id: "18", price: "29.50 €", name: "The Vaadin way:playing the cello", stock: "235"},
        { availability: "Available", category: "Best sellers", id: "19", price: "16.60 €", name: "The secrets of designing tree houses", stock: "187"},
        { availability: "Discontinued", category: "Children's books, Thriller", id: "20", price: "7.10 €", name: "Book of ice hockey", stock: "-"},
        { availability: "Available", category: "Best sellers", id: "21", price: "6.60 €", name: "Becoming one with keeping your wife happy", stock: "102"},
        { availability: "Available", category: "Sci-fi", id: "22", price: "14.00 €", name: "The ultimate guide to children's education", stock: "509"},
        { availability: "Discontinued", category: "Children's books, Best sellers", id: "23", price: "12.30 €", name: "Becoming one with intergalaxy travel", stock: "-"},
        { availability: "Discontinued", category: "Romance, Sci-fi", id: "24", price: "15.70 €", name: "Book of playing the cello", stock: "-"},
        { availability: "Coming", category: "Non-fiction, Sci-fi", id: "25", price: "19.10 €", name: "The secrets of designing tree houses", stock: "-"},
        { availability: "Coming", category: "Best sellers", id: "26", price: "8.50 €", name: "Encyclopedia of intergalaxy travel", stock: "-"},
        { availability: "Coming", category: "Children's books, Sci-fi", id: "27", price: "25.80 €", name: "Surviving giant needles", stock: "-"},
        { availability: "Coming", category: "Children's books", id: "28", price: "7.80 €", name: "The Vaadin way:Vaadin TreeTable", stock: "-"},
        { availability: "Discontinued", category: "Children's books, Thriller", id: "29", price: "8.80 €", name: "The complete visual guide to creating software", stock: "-"},
        { availability: "Coming", category: "Romance", id: "30", price: "6.60 €", name: "Very much meditation", stock: "-"},
        { availability: "Coming", category: "Thriller", id: "31", price: "28.20 €", name: "Encyclopedia of rubber bands", stock: "-"},
        { availability: "Coming", category: "Non-fiction, Sci-fi", id: "32", price: "13.60 €", name: "Mastering speaking to a big audience", stock: "-"},
        { availability: "Discontinued", category: "Romance, Non-fiction", id: "33", price: "10.00 €", name: "Book of dummies", stock: "-"},
        { availability: "Available", category: "Mystery", id: "34", price: "20.00 €", name: "For fun and profit:elephants", stock: "50"},
        { availability: "Available", category: "Thriller", id: "35", price: "27.00 €", name: "How to fail at elephants", stock: "261"},
        { availability: "Discontinued", category: "Cookbooks, Children's books", id: "36", price: "24.10 €", name: "The art of computer programming", stock: "-"},
        { availability: "Coming", category: "Best sellers, Sci-fi", id: "37", price: "26.20 €", name: "Very much feeling down", stock: "-"},
        { availability: "Available", category: "Non-fiction, Sci-fi", id: "38", price: "14.80 €", name: "Being awesome at computer programming", stock: "293"},
        { availability: "Available", category: "Children's books, Non-fiction", id: "39", price: "21.60 €", name: "Avoiding elephants", stock: "232"},
        { availability: "Discontinued", category: "Best sellers", id: "40", price: "20.30 €", name: "Surviving meditation", stock: "-" }
      ],
      json: null
    }
  },
  created() {
    this.json = JSON.stringify(this.users);
  },
  methods: {
    newProduct() {
      this.greeting = document.getElementById("text").value;
    },
    bookChanged(event) {
      const item = event.detail.value;
      if(item != null){
        this.activeItem = item.name;
      }
      document.getElementById("grid").selectedItems = item ? [item] : [];

    }
  }
}
</script>

<style>
html, body {
  height:100%;
  
}

body {
  box-sizing: border-box;
  margin:0;
  padding: 16px;
  display:flex;
}
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>