update codepen examples

README.md

@@ -18,38 +18,29 @@ npm install --save vue-lineup@next
 
 **Minimal Usage Example**
 
-`App.vue`:
-```html
-<template>
-  <LineUp v-bind:data="data" />
-</template>
-```
 ```ts
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { LINEUP_COMPONENTS } from './components';
-
-@Component({
-  components: LINEUP_COMPONENTS,
-})
-export default class App extends Vue {
-  public readonly data = [] as any[];
-  public readonly cats = ['c1', 'c2', 'c3'];
-
-  constructor() {
-    super();
-    const cats = this.cats;
-    for (let i = 0; i < 100; ++i) {
-      this.data.push({
-        a: Math.random() * 10,
-        d: 'Row ' + i,
-        cat: cats[Math.floor(Math.random() * 3)],
-        cat2: cats[Math.floor(Math.random() * 3)],
-      });
-    }
-  }
+const cats = ['c1', 'c2', 'c3'];
+const data = [];
+for (let i = 0; i < 100; ++i) {
+  data.push({
+    a: Math.random() * 10,
+    d: 'Row ' + i,
+    cat: cats[Math.floor(Math.random() * 3)],
+    cat2: cats[Math.floor(Math.random() * 3)],
+  });
 }
-</script>
+
+// enable plugin to register components
+Vue.use(VueLineUp);
+
+const app = new Vue({
+  el: '#app',
+  template: `<LineUp v-bind:data="data" />`,
+  data: {
+    cats,
+    data
+  }
+});
 ```
 
 [CodePen](https://codepen.io/sgratzl/pen/pKGmvK)
@@ -60,10 +51,10 @@ export default class App extends Vue {
 **Advanced Usage Example**
 
 `App.vue`:
-```html
-<template>
-  <!--<LineUp v-bind:data="data" />-->
-  <LineUp v-bind:data="data" defaultRanking="true" style="height: 800px">
+```ts
+const app = new Vue({
+  el: '#app',
+  template: `<LineUp v-bind:data="data" defaultRanking="true" style="height: 800px">
     <LineUpStringColumnDesc column="d" label="Label" v-bind:width="100" />
     <LineUpCategoricalColumnDesc column="cat" v-bind:categories="cats" color="green" />
     <LineUpCategoricalColumnDesc column="cat2" v-bind:categories="cats" color="blue" />
@@ -72,11 +63,15 @@ export default class App extends Vue {
       <LineUpSupportColumn type="*" />
       <LineUpColumn column="*" />
     </LineUpRanking>
-  </LineUp>
-</template>
+  </LineUp>`,
+  data: {
+    cats,
+    data
+  }
+});
 ```
 
-[CodePen](https://codepen.io/sgratzl/pen/pKGmvK)
+[CodePen](https://codepen.io/sgratzl/pen/vrboWB)
 
 ![Advanced Result](https://user-images.githubusercontent.com/4129778/34654174-3235f784-f3f8-11e7-9361-44f5fa068bb9.png)