ratiw · cristijora · May 31, 2017
diff --git a/docs/.nojekyll b/docs/.nojekyll
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,43 @@
+### Tutorial Content
+
+The tutorial has been designed to be followed along, so you could start from the beginning through the end. At the end of each lesson, there will be a link to the whole code on GitHub.
+
+> __Note__   
+> If you're using Bootstrap 3 CSS, clone the code from [vuetable-2-tutorial-bootstrap](https://github.com/ratiw/vuetable-2-tutorial-bootstrap) instead.
+> 
+> If you're using Bulma CSS, clone the code from [vuetable-2-tutorial-bulma](https://github.com/ratiw/vuetable-2-tutorial-bulma).
+
+
+##### Prerequisite
+- [Install the required tools](./prerequisite#install-the-required-tools)
+- [Create a tutorial project with Vue-CLI](./prerequisite#create-a-tutorial-project-with-vue-cli)
+- [Sample API endpoint](./prerequisite#sample-api-endpoint)
+
+##### Lessons
+1. [Your first Vuetable](./lesson-01)
+2. [Displaying more fields](./lesson-02)
+3. [Cleaning up code](./lesson-03)
+4. [Make change to field title](./lesson-04)
+5. [Column alignment](./lesson-05)
+6. [Format fields using `callback` option](./lesson-06)
+7. [Adding pagination](./lesson-07)
+8. [Displaying pagination information](./lesson-08)
+9. [Customizing Vuetable](./lesson-09)
+10. [Make columns sortable](./lesson-10)
+11. [Using special fields](./lesson-11)
+12. [Adding Detail Row](./lesson-12)
+13. [Adding Search Filter](./lesson-13)
+
+14. [Moving Field Definitions to another file](./lesson-14)
+15. [Passing Props to MyVuetable - Part 1](./lesson-15)
+16. [Passing Props to MyVuetable - Part 2](./lesson-16)
+17. [Passing Scoped Slot to MyVuetable](./lesson-17)
+18. Converting to Bootstrap CSS
+    - The `css` property
+    - Table Styling
+    - Pagination Styling
+    - Using the `icon-render` property
+
+##### Contributions
+
+You can PR on any error you've encountered. No matter you think how small it is, please do not worry. :)
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -0,0 +1,25 @@
+#### [Tutorial Content](./Home)
+
+##### Prerequisite
+- [Install the required tools](./prerequisite#install-the-required-tools)
+- [Create a tutorial project with Vue-CLI](./prerequisite#create-a-tutorial-project-with-vue-cli)
+- [Sample API endpoint](./prerequisite#sample-api-endpoint)
+
+##### Lessons
+- [Your first Vuetable](./lesson-01)
+- [Displaying more fields](./lesson-02)
+- [Cleaning up code](./lesson-03)
+- [Make changes to field titles](./lesson-04)
+- [Column alignment](./lesson-05)
+- [Format fields using `callback` option](./lesson-06)
+- [Adding pagination](./lesson-07)
+- [Displaying pagination information](./lesson-08)
+- [Customizing Vuetable](./lesson-09)
+- [Make columns sortable](./lesson-10)
+- [Using special fields](./lesson-11)
+- [Adding Detail Row](./lesson-12)
+- [Adding Search Filter](./lesson-13)
+- [Moving Field Definitions to another file](./lesson-14)
+- [Passing Props to MyVuetable - Part 1](./lesson-15)
+- [Passing Props to MyVuetable - Part 2](./lesson-16)
+- [Passing Scoped Slot to MyVuetable](./lesson-17)
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>vuetable-2-tutorial - A Vue.js project</title>
+  <meta name="description" content="A Vue.js project">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="https://unpkg.com/docsify/lib/themes/vue.css">
+  <link rel="stylesheet" href="https://unpkg.com/vuep/dist/vuep.css">
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" media="screen" title="no title" charset="utf-8">
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script>
+  window.$docsify = {
+    name: 'vuetable-2-tutorial',
+    repo: 'https://github.com/ratiw/vuetable-2',
+    loadSidebar: true
+  }
+</script>
+<script src="https://unpkg.com/docsify/lib/docsify.min.js"></script>
+<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
+<script src="https://unpkg.com/vue"></script>
+<script src="https://unpkg.com/vuep"></script>
+<script src="https://unpkg.com/vuetable-2"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js" charset="utf-8"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" charset="utf-8"></script>
+<script src="https://unpkg.com/accounting" charset="utf-8"></script>
+
+<style type="text/css">
+  .vuep {
+    height: inherit !important;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .vuep-editor,
+  .vuep-preview {
+    width: 100%;
+  }
+
+  .vuep-preview{
+    min-height:600px;
+  }
+
+  .cm-s-material .cm-error {
+    color: rgba(255, 83, 112, 1);
+    background-color: inherit !important;
+  }
+
+  table.vuetable{
+    display: table;
+  }
+
+  .markdown-section{
+    max-width:1100px
+  }
+
+</style>
+</html>
diff --git a/docs/lesson-01.md b/docs/lesson-01.md
@@ -0,0 +1,126 @@
+# Your first Vuetable
+
+* install `babel-preset-es2015` via yarn
+  ```shell
+  $ yarn add babel-preset-es2015 --dev
+  ```
+
+  This is necessary because we're going to use ES2015 syntax in our code.
+
+* install vuetable-2 using yarn
+
+  ```shell
+  $ yarn add vuetable-2 --dev
+  ```
+
++ Create MyVuetable component (`src\components\MyVuetable.vue`)
+
+    ```vue
+    // MyVuetable.vue
+
+    <template>
+      <vuetable ref="vuetable"
+        api-url="https://vuetable.ratiw.net/api/users"
+        :fields="['name', 'email', 'birthdate']"
+      ></vuetable>
+    </template>
+
+    <script>
+    import Vuetable from 'vuetable-2/src/components/Vuetable'
+
+    export default {
+      components: {
+        Vuetable
+      }
+    }
+    </script>
+    ```
+
++ Modify `index.html` to include [JQuery] and [Semantic UI]
++
+    ```html
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <title>vuetable-2-tutorial</title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" media="screen" title="no title" charset="utf-8">
+      </head>
+      <body>
+        <div id="app"></div>
+        <!-- built files will be auto injected -->
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js" charset="utf-8"></script>
+      </body>
+    </html>
+    ```
+
++ Modify `App.vue` to use `MyVuetable` component instead of `Hello` component
+
+    ```html
+    <template>
+      <div id="app">
+        <img src="./assets/logo.png">
+        <div class="ui container">
+          <my-vuetable></my-vuetable>
+        </div>
+      </div>
+    </template>
+
+    <script>
+    import MyVuetable from './components/MyVuetable'
+
+    export default {
+      name: 'app',
+      components: {
+        MyVuetable
+      }
+    }
+    </script>
+
+    <style>
+    #app {
+      font-family: 'Avenir', Helvetica, Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      text-align: center;
+      color: #2c3e50;
+      margin-top: 60px;
+    }
+    </style>
+    ```
+
+* Run the project to see the changes`
+    ```shell
+    $ yarn run dev
+    ```
+
+    you should see something like this
+
+    ![image](https://raw.githubusercontent.com/ratiw/images/master/vuetable-2-tutorial/01-1.png)
+
+### Congratulations!
+
+You've now successfully created your first component using Vuetable.
+
+## Play with it
+
+<vuep template="#lesson01"></vuep>
+
+<script v-pre type="text/x-template" id="lesson01">
+<template>
+    <vuetable ref="vuetable"
+          api-url="https://vuetable.ratiw.net/api/users"
+          :fields="['name', 'email', 'birthdate']">
+    </vuetable>
+</template>
+
+<script>
+  Vue.use(Vuetable);
+  export default {}
+</script>
+
+</script>
+
+[Source code for this lesson](https://github.com/ratiw/vuetable-2-tutorial/tree/lesson-1)
diff --git a/docs/lesson-02.md b/docs/lesson-02.md
@@ -0,0 +1,60 @@
+# Displaying more fields
+
+## Add more fields to MyVuetable
+Looking at the sameple data from the API, we have more information that we could display especially the data in the `address` object. 
+
+Let's see how we can display those nested data
+
+* add `address.line1`, `address.line2`, `address.zipcode` in `MyVuetable.vue`
+
+    ```vue
+    // MyVuetable.vue
+
+    <template>
+      <vuetable ref="vuetable"
+        api-url="https://vuetable.ratiw.net/api/users"
+        :fields="['name', 'email', 'birthdate', 'address.line1', 'address.line2', 'address.zipcode']"
+      ></vuetable>
+    </template>
+
+    <script>
+    import Vuetable from 'vuetable-2/src/components/Vuetable'
+
+    export default {
+      components: {
+        Vuetable
+      }
+    }
+    </script>
+    ```
+
+* run the project
+
+    ```shell
+      $ yarn run dev
+    ```
+
+    You should now see the additional fields showing in our Vuetable
+    ![image](https://raw.githubusercontent.com/ratiw/images/master/vuetable-2-tutorial/02-1.png)
+
+## Play with it
+
+<vuep template="#lesson02"></vuep>
+
+<script v-pre type="text/x-template" id="lesson02">
+<template>
+    <vuetable ref="vuetable"
+          api-url="https://vuetable.ratiw.net/api/users"
+          :fields="['name', 'email', 'birthdate','address.line1', 'address.line2', 'address.zipcode']">
+    </vuetable>
+</template>
+
+<script>
+  Vue.use(Vuetable);
+  export default {}
+</script>
+
+</script>
+
+
+[Source code for this lesson](https://github.com/ratiw/vuetable-2-tutorial/tree/lesson-2)
diff --git a/docs/lesson-03.md b/docs/lesson-03.md
@@ -0,0 +1,73 @@
+
+# Cleaning up code
+
+In the last lesson, we added more fields to be displayed using the `fields` prop. In the more complex data structure, there could be a lot more field to display. As you can see the `fields` prop could get quite lengthy.
+
+We could make use of the `data` section of Vue to make it cleaner, like so.
+
+```vue
+// MyVuetable.vue
+
+<template>
+  <vuetable ref="vuetable"
+    api-url="https://vuetable.ratiw.net/api/users"
+    :fields="fields"
+  ></vuetable>
+</template>
+
+<script>
+import Vuetable from 'vuetable-2/src/components/Vuetable'
+
+export default {
+  components: {
+    Vuetable
+  },
+  data () {
+    return {
+      fields: [
+        'name', 'email', 'birthdate',
+        'address.line1', 'address.line2', 'address.zipcode'
+      ]
+    }
+  }
+}
+</script>
+```
+
+Run the project again to see that everything is still working the same.
+```shell
+  $ yarn run dev
+```
+
+We should also remove the unused file that comes pre-install with vue-cli webpack template.
+- Delete `src\components\Hello.vue`
+
+## Play with it
+
+<vuep template="#lesson03"></vuep>
+
+<script v-pre type="text/x-template" id="lesson03">
+<template>
+    <vuetable ref="vuetable"
+          api-url="https://vuetable.ratiw.net/api/users"
+          :fields="fields">
+    </vuetable>
+</template>
+
+<script>
+  Vue.use(Vuetable);
+  export default {
+  data () {
+      return {
+        fields: [
+          'name', 'email', 'birthdate',
+          'address.line1', 'address.line2', 'address.zipcode'
+        ]
+      }
+    }
+  }
+</script>
+
+</script>
+
+[Source code for this lesson](https://github.com/ratiw/vuetable-2-tutorial/tree/lesson-3)