remove internal repo

deploy-docs.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env sh
+
+# abort on errors
+set -e
+
+# build
+npm run docs:build
+
+# navigate into the build output directory
+cd docs/.vuepress/dist
+
+# if you are deploying to a custom domain
+# echo 'www.example.com' > CNAME
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# if you are deploying to https://<USERNAME>.github.io
+# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master
+
+# if you are deploying to https://<USERNAME>.github.io/<REPO>
+git push -f [email protected]:xaksis/vue-good-table.git master:gh-pages
+
+cd -

docs/.vuepress/components/before-after-columns.vue

@@ -0,0 +1,81 @@
+<template>
+<div>
+  <vue-good-table
+    :columns="columns"
+    :rows="rows">
+    <template slot="table-row" slot-scope="props">
+      <span v-if="props.column.field == 'before'">
+        before
+      </span>
+      <span v-else-if="props.column.field == 'after'">
+        after
+      </span>
+      <span v-else>
+        {{props.formattedRow[props.column.field]}}
+      </span>
+    </template>
+  </vue-good-table>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'before-after-columns',
+  props: [],
+  data() {
+    return {
+      columns: [
+        {
+          label: 'Before',
+          field: 'before',
+        },
+        {
+          label: 'Name',
+          field: 'name',
+        },
+        {
+          label: 'Age',
+          field: 'age',
+          type: 'number',
+        },
+        {
+          label: 'Created On',
+          field: 'createdAt',
+          type: 'date',
+          dateInputFormat: 'YYYY-MM-DD',
+          dateOutputFormat: 'MMM Do YY',
+        },
+        {
+          label: 'Percent',
+          field: 'score',
+          type: 'percentage',
+        },
+        {
+          label: 'After',
+          field: 'after',
+        }
+      ],
+      rows: [
+        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
+        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
+        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
+      ],
+    };
+  },
+  computed: {
+  },
+  methods: {
+  },
+  mounted () {
+  },
+  components: {
+  },
+};
+</script>
+
+<style>
+table{
+  display: table;
+  margin: 0;
+}
+</style>

docs/.vuepress/components/checkbox-table.vue

@@ -0,0 +1,74 @@
+<template>
+<div>
+  <vue-good-table
+    @on-select-all="selectAll"
+    @on-row-click="toggleSelectRow"
+    :columns="columns"
+    :rows="rows"
+    :select-options="{ enabled: true }"
+    :search-options="{ enabled: true }">
+  </vue-good-table>  
+</div>
+</template>
+
+<script>
+export default {
+  name: 'checkbox-table',
+  props: [],
+  data() {
+    return {
+      columns: [
+        {
+          label: 'Name',
+          field: 'name',
+        },
+        {
+          label: 'Age',
+          field: 'age',
+          type: 'number',
+        },
+        {
+          label: 'Created On',
+          field: 'createdAt',
+          type: 'date',
+          dateInputFormat: 'YYYY-MM-DD',
+          dateOutputFormat: 'MMM Do YY',
+        },
+        {
+          label: 'Percent',
+          field: 'score',
+          type: 'percentage',
+        },
+      ],
+      rows: [
+        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
+        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
+        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
+      ],
+    };
+  },
+  computed: {
+  },
+  methods: {
+    selectAll(params) {
+    	// do what you want here
+    	console.log(params);
+    },
+    toggleSelectRow(params) {
+    	// row that was clicked
+    	console.log(params);
+    }
+  },
+  mounted() {
+  },
+  components: {
+  },
+};
+</script>
+
+<style>
+table{
+  display: table;
+  margin: 0;
+}
+</style>

docs/.vuepress/components/custom-row.vue

@@ -0,0 +1,69 @@
+<template>
+<div>
+  <vue-good-table
+    :columns="columns"
+    :rows="rows">
+    <template slot="table-row" slot-scope="props">
+      <span v-if="props.column.field == 'age'">
+        <span style="font-weight: bold; color: blue;">{{props.row.age}}</span> 
+      </span>
+      <span v-else>
+        {{props.formattedRow[props.column.field]}}
+      </span>
+    </template>
+  </vue-good-table>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'custom-row',
+  props: [],
+  data() {
+    return {
+      columns: [
+        {
+          label: 'Name',
+          field: 'name',
+        },
+        {
+          label: 'Age',
+          field: 'age',
+          type: 'number',
+        },
+        {
+          label: 'Created On',
+          field: 'createdAt',
+          type: 'date',
+          dateInputFormat: 'YYYY-MM-DD',
+          dateOutputFormat: 'MMM Do YY',
+        },
+        {
+          label: 'Percent',
+          field: 'score',
+          type: 'percentage',
+        },
+      ],
+      rows: [
+        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
+        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
+        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
+      ],
+    };
+  },
+  computed: {
+  },
+  methods: {
+  },
+  mounted () {
+  },
+  components: {
+  },
+};
+</script>
+
+<style>
+table{
+  display: table;
+}
+</style>

docs/.vuepress/components/grouped-table.vue

@@ -0,0 +1,90 @@
+<template>
+<div>
+  <vue-good-table
+    :columns="columns"
+    :rows="rows"
+    :group-options="options"
+    :search-options="{ 
+      enabled: true,
+    }"> 
+  </vue-good-table>  
+</div>
+</template>
+
+<script>
+export default {
+  name: 'grouped-table',
+  props: ['options'],
+  data() {
+    return  {
+      columns: [
+          {
+            label: 'Name',
+            field: 'name',
+          },
+          {
+            label: 'Diet',
+            field: 'diet',
+            type: 'text',
+          },
+          {
+            label: 'Count',
+            field: 'count',
+            type: 'number',
+          },
+        ],
+        rows: [
+          {
+            mode: 'span',
+            label: 'Mammal',
+            children: [
+              { name: 'Elephant', diet: 'herbivore', count: 5 },
+              { name: 'Cat', diet: 'carnivore', count: 28 },
+            ],
+          },
+          {
+            mode: 'span',
+            label: 'Reptiles',
+            children: [
+              { name: 'Snake', diet: 'carnivore', count: 40 },
+              { name: 'lizard', diet: 'insectivore', count: 34 },
+            ],
+          },
+          {
+            mode: 'span',
+            label: 'Fish',
+            children: [
+              { name: 'Shark', diet: 'carnivore', count: 2 },
+              { name: 'koi', diet: 'omnivore', count: 14 },
+            ],
+          },
+        ],
+  	};
+  },
+  computed: {
+  },
+  methods: {
+  },
+  mounted() {
+  },
+  components: {
+  },
+};
+</script>
+
+<style>
+table{
+  display: table;
+  margin: 0;
+}
+tr {
+  border-top: none;
+}
+tr:nth-child(2n) {
+  background-color: transparent;
+}
+th, td {
+  border: none;
+  padding: auto auto;
+}
+</style>

docs/.vuepress/config.js

@@ -1,6 +1,7 @@
 module.exports = {
   title: 'vue-good-table',
   description: 'A powerful and easy to use data table plugin for VueJS',
+  base: '/vue-good-table/',
   themeConfig: {
     repo: 'xaksis/vue-good-table',
     sidebar: {
@@ -25,6 +26,16 @@ module.exports = {
             '/guide/configuration/column-filter-options',
           ]
         },
+        {
+          title: 'Avanced Configuration',
+          collapsable: false,
+          children: [
+            '/guide/advanced/',
+            '/guide/advanced/checkbox-table',
+            '/guide/advanced/grouped-table',
+            '/guide/advanced/remote-workflow',
+          ]
+        },
         {
           title: 'Style Configuration',
           collapsable: false,