new docs getting there

.npmignore

@@ -4,4 +4,5 @@ node_modules/
 *.log
 dev
 src
+docs
 .babelrc

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

@@ -0,0 +1,64 @@
+<template>
+<div>
+  <vue-good-table
+    :columns="columns"
+    :rows="rows">
+  </vue-good-table>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'basic-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 },
+        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
+        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
+        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
+      ],
+    };
+  },
+  computed: {
+  },
+  methods: {
+  },
+  mounted () {
+  },
+  components: {
+  },
+};
+</script>
+
+<style>
+table{
+  display: table;
+}
+</style>

docs/.vuepress/components/theme-example.vue

@@ -0,0 +1,76 @@
+<template>
+<div>
+  <vue-good-table
+    :columns="columns"
+    :rows="rows"
+    :styleClass="styleClasses"
+    :theme="theme">
+  </vue-good-table>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'theme-table',
+  props: ['theme', 'styleClasses'],
+  data() {
+    return {
+      columns: [
+        {
+          label: 'Name',
+          field: 'name',
+          filterOptions: {
+            enabled: true,
+          }
+        },
+        {
+          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;
+}
+tr {
+  border-top: none;
+}
+tr:nth-child(2n) {
+  background-color: transparent;
+}
+th, td {
+  border: none;
+  padding: auto auto;
+}
+</style>

docs/.vuepress/config.js

@@ -0,0 +1,39 @@
+module.exports = {
+  title: 'vue-good-table',
+  description: 'A powerful and easy to use data table plugin for VueJS',
+  themeConfig: {
+    repo: 'xaksis/vue-good-table',
+    sidebar: {
+      '/guide/': [
+        {
+          title: 'Introduction',
+          collapsable: false,
+          children: [
+            '',
+          ]
+        },
+        {
+          title: 'Configuration',
+          collapsable: false,
+          children: [
+            '/guide/configuration/',
+            '/guide/configuration/table-events',
+            '/guide/configuration/search-options',
+            '/guide/configuration/sort-options',
+            '/guide/configuration/pagination-options',
+            '/guide/configuration/column-options',
+            '/guide/configuration/column-filter-options',
+          ]
+        },
+        {
+          title: 'Style Configuration',
+          collapsable: false,
+          children: [
+            '/guide/style-configuration/',
+            '/guide/style-configuration/style-classes',
+          ]
+        },
+      ],
+    },
+  }
+}

docs/.vuepress/enhanceApp.js

@@ -0,0 +1,11 @@
+import VueGoodTable from '../../src';
+
+export default ({
+  Vue, // the version of Vue being used in the VuePress app
+  options, // the options for the root Vue instance
+  router, // the router instance for the app
+  siteData, // site metadata
+}) => {
+  // ...apply enhancements to the app
+  Vue.use(VueGoodTable);
+}

docs/README.md

@@ -0,0 +1,14 @@
+---
+home: true
+heroImage: /vgt-table.regular.png
+actionText: Get Started →
+actionLink: /guide/
+features:
+- title: Simple to Use
+  details: You get features like sorting / filtering / paging with minimal setup.
+- title: Advanced Customizations
+  details: Easily customize anything from table cells to column headers.
+- title: Performant
+  details: Creating performant client side tables has never been easier.
+footer: MIT Licensed | Copyright © 2018-present Akshay Anand
+---

docs/guide/README.md

@@ -0,0 +1,87 @@
+
+# Getting Started
+
+## Installation
+
+Install with npm:
+
+```bash
+npm install --save vue-good-table
+```
+
+Import globally in app:
+
+```javascript
+import VueGoodTable from 'vue-good-table';
+
+// import the styles 
+import 'vue-good-table/dist/vue-good-table.css'
+
+Vue.use(VueGoodTable);
+```
+
+Import into your component
+```js
+import VueGoodTable from 'vue-good-table';
+
+// add to component
+components: {
+  'vue-good-table': VueGoodTable,
+}
+```
+
+
+## Basic Example
+
+<basic-table/>
+
+```vue
+<template>
+  <div>
+    <vue-good-table
+      :columns="columns"
+      :rows="rows"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'my-component',
+  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 },
+        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
+        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
+        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
+      ],
+    };
+  },
+};
+</script>
+```