Add gif for column features

vuepress/.vuepress/components/datatable-basic.vue

@@ -0,0 +1,27 @@
+<template>
+    <datatable-example v-on:scriptsLoaded="initDatatable">
+        <div id="example-basic"></div>
+    </datatable-example>
+</template>
+<script>
+import DatatableExample from "./datatable-example";
+import { getSampleData } from "./datatableData";
+
+export default {
+  name: "DatatableBasic",
+  components: {
+      DatatableExample
+  },
+  methods: {
+    initDatatable() {
+      const { data } = getSampleData();
+      let columns = ['Name', {name: 'Position', width: 195}, 'Office', 'Extn.', 'Start Date', 'Salary'];
+      const datatable = new DataTable("#example-basic", {
+        columns,
+        data,
+        inlineFilters: true
+      });
+    }
+  }
+};
+</script>

vuepress/.vuepress/components/datatable-cell.vue

@@ -0,0 +1,34 @@
+<template>
+    <datatable-example v-on:scriptsLoaded="initDatatable">
+        <div id="example-cell"></div>
+    </datatable-example>
+</template>
+<script>
+import DatatableExample from "./datatable-example";
+import { getSampleData } from "./datatableData";
+
+export default {
+  name: "DatatableCell",
+  components: {
+    DatatableExample
+  },
+  methods: {
+    initDatatable() {
+      const { data } = getSampleData();
+      let columns = [
+        "Name",
+        { name: "Position", width: 185 },
+        { name: "Office" },
+        "Extn.",
+        "Start Date",
+        { name: "Salary", format: value => "$" + value }
+      ];
+
+      const datatable = new DataTable("#example-cell", {
+        columns,
+        data
+      });
+    }
+  }
+};
+</script>

vuepress/.vuepress/components/datatable-example.vue

@@ -1,48 +1,56 @@
 <template>
-    <div class="example">
+    <div>
-
+        <slot></slot>
     </div>
 </template>
 <script>
-import config from '../config';
+import { getSampleData } from "./datatableData";
-import { getSampleData } from './datatableData';
 
 export default {
-    name: 'DatatableExample',
+  name: "DatatableExample",
-    props: ['type'],
+  props: ["type"],
-    mounted () {
+  mounted() {
-        this.loadScriptsAndStyle().then(() => {
+    this.loadScriptsAndStyle().then(() => {
-            const { columns, data } = getSampleData();
+        this.$emit('scriptsLoaded');
-            const datatable = new DataTable('.example', {
+    });
-                columns,
+  },
-                data,
+  methods: {
-                // layout: 'fluid'
+    initDatatable() {
-            })
+      const { columns, data } = getSampleData();
-        });
+      const datatable = new DataTable("#example-" + this.type, {
+        columns,
+        data
+      });
     },
-    methods: {
+    loadScriptsAndStyle() {
-        loadScriptsAndStyle() {
+      if (!window.scriptsLoadedPromise) {
-            return Promise.all([
+          window.scriptsLoadedPromise = Promise.all([
-                this.loadScript('//unpkg.com/sortablejs@1.7.0/Sortable.min.js'),
+            this.loadScript("//unpkg.com/sortablejs@1.7.0/Sortable.min.js"),
-                this.loadScript('//unpkg.com/clusterize.js@0.18.1/clusterize.min.js'),
+            this.loadScript("//unpkg.com/clusterize.js@0.18.1/clusterize.min.js"),
-                this.loadScript('//unpkg.com/frappe-datatable@0.0.6/dist/frappe-datatable.min.js'),
+            this.loadScript("//unpkg.com/frappe-datatable@0.0.8/dist/frappe-datatable.min.js"),
-                this.loadStyle('//unpkg.com/frappe-datatable@0.0.6/dist/frappe-datatable.min.css')
+            this.loadStyle("//unpkg.com/frappe-datatable@0.0.8/dist/frappe-datatable.min.css")
-            ])
+          ]);
-        },
+      }
-        loadScript(src) {
+
-            return new Promise(resolve => {
+      return window.scriptsLoadedPromise;
-                const script = document.createElement('script');
+
-                script.src = src;
+    },
-                script.onload = resolve;
+    loadScript(src) {
-                document.body.appendChild(script);
+      return new Promise(resolve => {
-            });
+        const script = document.createElement("script");
-        },
+        script.src = src;
-        loadStyle(src) {
+        script.async = false;
-            const link = document.createElement('link');
+        script.type = 'text/javascript';
-            link.rel = 'stylesheet';
+        script.onload = resolve;
-            link.href = src;
+        document.body.appendChild(script);
-            document.head.appendChild(link);
+      });
-        }
+    },
+    loadStyle(src) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = src;
+      document.head.appendChild(link);
     }
-}
+  }
+};
 </script>

vuepress/.vuepress/override.styl

@@ -1 +1 @@
-@import "../../docs.styl"
+// @import "../../docs.styl"

vuepress/readme.md

@@ -2,7 +2,7 @@
 home: true
 ---
 
-<datatable-example type="basic" />
+<datatable-basic />
 
 ## Installation
 
@@ -33,7 +33,7 @@ let datatable = new DataTable({
 });
 ```
 
-## Features
+## Cell Features
 
 * Custom Formatters
 * Inline Editing
@@ -42,6 +42,26 @@ let datatable = new DataTable({
 * Keyboard Navigation
 * Custom Cell Editor
 
+## Column Features
+
+* Reorder Columns
+* Sort by Column
+* Remove / Hide Column
+* Custom Actions
+* Resize Column
+* Flexible Layout
+
+<img :src="$withBase('/img/datatable-column-demo.gif')" />
+
+## Row Features
+
+* Row Selection
+* Tree Structured Rows
+* Inline Filters
+* Large Number of Rows
+* Dynamic Row Height
+
+
 <div class="footer">
 Made with ❤️ by Frappe
 </div>
@@ -56,6 +76,9 @@ Made with ❤️ by Frappe
     tr:nth-child(2n) {
         background-color: transparent;
     }
+    .content.custom > div {
+        height: 2000px;
+    }
     .home .hero .description {
         max-width: 30rem;
         font-size: 2rem;