<div class="vue-app">
  <example></example>
</div>

<script type="text/x-template" id="example">
  <template>
    <VueGridMultiselect
  :items="items" 
  item-key="id" 
  :item-label="['name', 'name|state']" 
  v-model="selectedItems" 
  title="Cities"
  group-by="state"
  item-details="info"
  menu-position="float"
  split-by="state"
>
</VueGridMultiselect>
  </template>
</script>

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
  text-rendering: optimizelegibility;
}
.vue-app {
  max-width: 60rem;
  margin: 1rem auto;
  border-radius: 4px;
}
.buttons {
	text-align: right;
}
.buttons > button {
	background-color: #32a8c5;
	color: #fff;
	outline: none;
	padding: 0.5rem;
	border: 1px solid #e6eceb;
	border-radius: 4px;
	cursor: pointer;
}

const example = {
  name: 'example',
  template: '#example',
  components: {
    VueGridMultiselect
  },
  data() {
    return {
      selectedItems: [
        { id: 1, name: "San Francisco", state: "USA", info: "San Francisco information" },
        { id: 4, name: "Munich", state: "Germany", info: "Munich information" }
      ],
      items: [
        { id: 1, name: "San Francisco", state: "USA", info: "San Francisco information" },
        { id: 2, name: "Las Vegas", state: "USA", info: "Las Vegas information" },
        { id: 3, name: "Washington", state: "USA", info: "Washington information" },
        { id: 4, name: "Munich", state: "Germany", info: "Munich information" }
      ]
    };
  },
  methods: {
    save() {
      alert('Save')
    },
    cancel() {
      alert('Cancel')
    }
  }
}

new Vue({
  el: '.vue-app',
  components: {
    example
  }
});