Add docs for column and data options

dist/frappe-datatable.cjs.js

@@ -242,10 +242,12 @@ var isObject_1 = isObject;
 
 var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+/** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
 
 var _freeGlobal = freeGlobal;
 
+/** Detect free variable `self`. */
 var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
 
 /** Used as a reference to the global object. */
@@ -253,16 +255,34 @@ var root = _freeGlobal || freeSelf || Function('return this')();
 
 var _root = root;
 
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
 var now = function() {
   return _root.Date.now();
 };
 
 var now_1 = now;
 
+/** Built-in value references. */
 var Symbol = _root.Symbol;
 
 var _Symbol = Symbol;
 
+/** Used for built-in method references. */
 var objectProto = Object.prototype;
 
 /** Used to check objects for own properties. */
@@ -291,11 +311,10 @@ function getRawTag(value) {
 
   try {
     value[symToStringTag] = undefined;
-    var unmasked = true;
   } catch (e) {}
 
   var result = nativeObjectToString.call(value);
-  if (unmasked) {
+  {
     if (isOwn) {
       value[symToStringTag] = tag;
     } else {
@@ -330,8 +349,9 @@ function objectToString(value) {
 
 var _objectToString = objectToString;
 
-var nullTag = '[object Null]';
+/** `Object#toString` result references. */
-var undefinedTag = '[object Undefined]';
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
 
 /** Built-in value references. */
 var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
@@ -384,6 +404,7 @@ function isObjectLike(value) {
 
 var isObjectLike_1 = isObjectLike;
 
+/** `Object#toString` result references. */
 var symbolTag = '[object Symbol]';
 
 /**
@@ -410,6 +431,7 @@ function isSymbol(value) {
 
 var isSymbol_1 = isSymbol;
 
+/** Used as references for various `Number` constants. */
 var NAN = 0 / 0;
 
 /** Used to match leading and trailing whitespace. */
@@ -473,11 +495,12 @@ function toNumber(value) {
 
 var toNumber_1 = toNumber;
 
+/** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max;
+var nativeMax = Math.max,
-var nativeMin = Math.min;
+    nativeMin = Math.min;
 
 /**
  * Creates a debounced function that delays invoking `func` until after `wait`
@@ -659,6 +682,7 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
+/** Error message constants. */
 var FUNC_ERROR_TEXT$1 = 'Expected a function';
 
 /**
@@ -805,7 +829,7 @@ function isNumeric(val) {
 
 let throttle$1 = throttle_1;
 
-let debounce$2 = debounce_1;
+let debounce$1 = debounce_1;
 
 function nextTick(fn, context = null) {
     return (...args) => {
@@ -818,7 +842,6 @@ function nextTick(fn, context = null) {
         });
     };
 }
-
 function linkProperties(target, source, properties) {
     const props = properties.reduce((acc, prop) => {
         acc[prop] = {
@@ -830,7 +853,6 @@ function linkProperties(target, source, properties) {
     }, {});
     Object.defineProperties(target, props);
 }
-
 function isSet(val) {
     return val !== undefined || val !== null;
 }
@@ -1226,7 +1248,7 @@ class DataManager {
             }
         }
 
-        const _row = this.prepareRow(row, rowIndex);
+        const _row = this.prepareRow(row, {rowIndex});
         const index = this.rows.findIndex(row => row[0].rowIndex === rowIndex);
         this.rows[index] = _row;
 
@@ -1606,6 +1628,22 @@ class CellManager {
                 this.instance.showToastMessage(message, 2);
             }
         });
+
+        if (this.options.pasteFromClipboard) {
+            this.keyboard.on('ctrl+v', (e) => {
+                // hack
+                // https://stackoverflow.com/a/2177059/5353542
+                this.instance.pasteTarget.focus();
+
+                setTimeout(() => {
+                    const data = this.instance.pasteTarget.value;
+                    this.instance.pasteTarget.value = '';
+                    this.pasteContentInCell(data);
+                }, 10);
+
+                return false;
+            });
+        }
     }
 
     bindMouseEvents() {
@@ -1994,6 +2032,30 @@ class CellManager {
         return rows.reduce((total, row) => total + row.length, 0);
     }
 
+    pasteContentInCell(data) {
+        if (!this.$focusedCell) return;
+
+        const matrix = data
+            .split('\n')
+            .map(row => row.split('\t'))
+            .filter(row => row.length && row.every(it => it));
+
+        let { colIndex, rowIndex } = $.data(this.$focusedCell);
+
+        let focusedCell = {
+            colIndex: +colIndex,
+            rowIndex: +rowIndex
+        };
+
+        matrix.forEach((row, i) => {
+            let rowIndex = i + focusedCell.rowIndex;
+            row.forEach((cell, j) => {
+                let colIndex = j + focusedCell.colIndex;
+                this.updateCell(colIndex, rowIndex, cell);
+            });
+        });
+    }
+
     activateFilter(colIndex) {
         this.columnmanager.toggleFilter();
         this.columnmanager.focusFilter(colIndex);
@@ -2513,7 +2575,7 @@ class ColumnManager {
                     this.rowmanager.showRows(rowsToShow);
                 });
         };
-        $.on(this.header, 'keydown', '.dt-filter', debounce$2(handler, 300));
+        $.on(this.header, 'keydown', '.dt-filter', debounce$1(handler, 300));
     }
 
     sortRows(colIndex, sortOrder) {
@@ -3299,7 +3361,8 @@ const KEYCODES = {
     9: 'tab',
     27: 'esc',
     67: 'c',
-    70: 'f'
+    70: 'f',
+    86: 'v'
 };
 
 class Keyboard {
@@ -3391,10 +3454,11 @@ var DEFAULT_OPTIONS = {
     layout: 'fixed', // fixed, fluid, ratio
     noDataMessage: 'No Data',
     cellHeight: null,
+    dynamicRowHeight: false,
     inlineFilters: false,
     treeView: false,
     checkedRowStatus: true,
-    dynamicRowHeight: false
+    pasteFromClipboard: false
 };
 
 class DataTable {
@@ -3434,8 +3498,11 @@ class DataTable {
             this.options || {}, options
         );
 
-        this.options.headerDropdown
+        options.headerDropdown = options.headerDropdown || [];
-            .push(...(options.headerDropdown || []));
+        this.options.headerDropdown = [
+            ...DEFAULT_OPTIONS.headerDropdown,
+            ...options.headerDropdown
+        ];
 
         // custom user events
         this.events = Object.assign(
@@ -3464,6 +3531,7 @@ class DataTable {
                     </span>
                 </div>
                 <div class="dt-toast"></div>
+                <textarea class="dt-paste-target"></textarea>
             </div>
         `;
 
@@ -3472,6 +3540,7 @@ class DataTable {
         this.bodyScrollable = $('.dt-scrollable', this.wrapper);
         this.freezeContainer = $('.dt-freeze', this.wrapper);
         this.toastMessage = $('.dt-toast', this.wrapper);
+        this.pasteTarget = $('.dt-paste-target', this.wrapper);
     }
 
     refresh(data, columns) {
@@ -3589,11 +3658,11 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.4";
+var version = "0.0.5";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
-var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js"};
+var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","docs":"vuepress dev docs-wip"};
-var devDependencies = {"chai":"3.5.0","deepmerge":"^2.0.1","eslint-config-airbnb":"^16.1.0","eslint-config-airbnb-base":"^12.1.0","eslint-plugin-import":"^2.11.0","mocha":"3.3.0","postcss-cssnext":"^3.1.0","postcss-nested":"^3.0.0","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-eslint":"^4.0.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify-es":"^0.0.1"};
+var devDependencies = {"chai":"3.5.0","deepmerge":"^2.0.1","eslint-config-airbnb":"^16.1.0","eslint-config-airbnb-base":"^12.1.0","eslint-plugin-import":"^2.11.0","mocha":"3.3.0","postcss-cssnext":"^3.1.0","postcss-nested":"^3.0.0","rollup":"^0.59.1","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-eslint":"^4.0.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify-es":"^0.0.1","vuepress":"^0.8.4"};
 var repository = {"type":"git","url":"https://github.com/frappe/datatable.git"};
 var keywords = ["datatable","data","grid","table"];
 var author = "Faris Ansari";

dist/frappe-datatable.css

@@ -247,6 +247,11 @@
 		        transform: translateY(-50%);
 	}
 
+.dt-paste-target {
+	position: fixed;
+	left: -999em;
+}
+
 body.dt-resize {
 	cursor: col-resize;
 }

dist/frappe-datatable.js

@@ -241,10 +241,12 @@ var isObject_1 = isObject;
 
     var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+    /** Detect free variable `global` from Node.js. */
     var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
 
     var _freeGlobal = freeGlobal;
 
+    /** Detect free variable `self`. */
     var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
 
     /** Used as a reference to the global object. */
@@ -252,16 +254,34 @@ var root = _freeGlobal || freeSelf || Function('return this')();
 
     var _root = root;
 
+    /**
+     * Gets the timestamp of the number of milliseconds that have elapsed since
+     * the Unix epoch (1 January 1970 00:00:00 UTC).
+     *
+     * @static
+     * @memberOf _
+     * @since 2.4.0
+     * @category Date
+     * @returns {number} Returns the timestamp.
+     * @example
+     *
+     * _.defer(function(stamp) {
+     *   console.log(_.now() - stamp);
+     * }, _.now());
+     * // => Logs the number of milliseconds it took for the deferred invocation.
+     */
     var now = function() {
       return _root.Date.now();
     };
 
     var now_1 = now;
 
+    /** Built-in value references. */
     var Symbol = _root.Symbol;
 
     var _Symbol = Symbol;
 
+    /** Used for built-in method references. */
     var objectProto = Object.prototype;
 
     /** Used to check objects for own properties. */
@@ -290,11 +310,10 @@ function getRawTag(value) {
 
       try {
         value[symToStringTag] = undefined;
-    var unmasked = true;
       } catch (e) {}
 
       var result = nativeObjectToString.call(value);
-  if (unmasked) {
+      {
         if (isOwn) {
           value[symToStringTag] = tag;
         } else {
@@ -329,8 +348,9 @@ function objectToString(value) {
 
     var _objectToString = objectToString;
 
-var nullTag = '[object Null]';
+    /** `Object#toString` result references. */
-var undefinedTag = '[object Undefined]';
+    var nullTag = '[object Null]',
+        undefinedTag = '[object Undefined]';
 
     /** Built-in value references. */
     var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
@@ -383,6 +403,7 @@ function isObjectLike(value) {
 
     var isObjectLike_1 = isObjectLike;
 
+    /** `Object#toString` result references. */
     var symbolTag = '[object Symbol]';
 
     /**
@@ -409,6 +430,7 @@ function isSymbol(value) {
 
     var isSymbol_1 = isSymbol;
 
+    /** Used as references for various `Number` constants. */
     var NAN = 0 / 0;
 
     /** Used to match leading and trailing whitespace. */
@@ -472,11 +494,12 @@ function toNumber(value) {
 
     var toNumber_1 = toNumber;
 
+    /** Error message constants. */
     var FUNC_ERROR_TEXT = 'Expected a function';
 
     /* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max;
+    var nativeMax = Math.max,
-var nativeMin = Math.min;
+        nativeMin = Math.min;
 
     /**
      * Creates a debounced function that delays invoking `func` until after `wait`
@@ -658,6 +681,7 @@ function debounce(func, wait, options) {
 
     var debounce_1 = debounce;
 
+    /** Error message constants. */
     var FUNC_ERROR_TEXT$1 = 'Expected a function';
 
     /**
@@ -804,7 +828,7 @@ function isNumeric(val) {
 
     let throttle$1 = throttle_1;
 
-let debounce$2 = debounce_1;
+    let debounce$1 = debounce_1;
 
     function nextTick(fn, context = null) {
         return (...args) => {
@@ -817,7 +841,6 @@ function nextTick(fn, context = null) {
             });
         };
     }
-
     function linkProperties(target, source, properties) {
         const props = properties.reduce((acc, prop) => {
             acc[prop] = {
@@ -829,7 +852,6 @@ function linkProperties(target, source, properties) {
         }, {});
         Object.defineProperties(target, props);
     }
-
     function isSet(val) {
         return val !== undefined || val !== null;
     }
@@ -1225,7 +1247,7 @@ class DataManager {
                 }
             }
 
-        const _row = this.prepareRow(row, rowIndex);
+            const _row = this.prepareRow(row, {rowIndex});
             const index = this.rows.findIndex(row => row[0].rowIndex === rowIndex);
             this.rows[index] = _row;
 
@@ -1605,6 +1627,22 @@ class CellManager {
                     this.instance.showToastMessage(message, 2);
                 }
             });
+
+            if (this.options.pasteFromClipboard) {
+                this.keyboard.on('ctrl+v', (e) => {
+                    // hack
+                    // https://stackoverflow.com/a/2177059/5353542
+                    this.instance.pasteTarget.focus();
+
+                    setTimeout(() => {
+                        const data = this.instance.pasteTarget.value;
+                        this.instance.pasteTarget.value = '';
+                        this.pasteContentInCell(data);
+                    }, 10);
+
+                    return false;
+                });
+            }
         }
 
         bindMouseEvents() {
@@ -1993,6 +2031,30 @@ class CellManager {
             return rows.reduce((total, row) => total + row.length, 0);
         }
 
+        pasteContentInCell(data) {
+            if (!this.$focusedCell) return;
+
+            const matrix = data
+                .split('\n')
+                .map(row => row.split('\t'))
+                .filter(row => row.length && row.every(it => it));
+
+            let { colIndex, rowIndex } = $.data(this.$focusedCell);
+
+            let focusedCell = {
+                colIndex: +colIndex,
+                rowIndex: +rowIndex
+            };
+
+            matrix.forEach((row, i) => {
+                let rowIndex = i + focusedCell.rowIndex;
+                row.forEach((cell, j) => {
+                    let colIndex = j + focusedCell.colIndex;
+                    this.updateCell(colIndex, rowIndex, cell);
+                });
+            });
+        }
+
         activateFilter(colIndex) {
             this.columnmanager.toggleFilter();
             this.columnmanager.focusFilter(colIndex);
@@ -2512,7 +2574,7 @@ class ColumnManager {
                         this.rowmanager.showRows(rowsToShow);
                     });
             };
-        $.on(this.header, 'keydown', '.dt-filter', debounce$2(handler, 300));
+            $.on(this.header, 'keydown', '.dt-filter', debounce$1(handler, 300));
         }
 
         sortRows(colIndex, sortOrder) {
@@ -3298,7 +3360,8 @@ const KEYCODES = {
         9: 'tab',
         27: 'esc',
         67: 'c',
-    70: 'f'
+        70: 'f',
+        86: 'v'
     };
 
     class Keyboard {
@@ -3390,10 +3453,11 @@ var DEFAULT_OPTIONS = {
         layout: 'fixed', // fixed, fluid, ratio
         noDataMessage: 'No Data',
         cellHeight: null,
+        dynamicRowHeight: false,
         inlineFilters: false,
         treeView: false,
         checkedRowStatus: true,
-    dynamicRowHeight: false
+        pasteFromClipboard: false
     };
 
     class DataTable {
@@ -3433,8 +3497,11 @@ class DataTable {
                 this.options || {}, options
             );
 
-        this.options.headerDropdown
+            options.headerDropdown = options.headerDropdown || [];
-            .push(...(options.headerDropdown || []));
+            this.options.headerDropdown = [
+                ...DEFAULT_OPTIONS.headerDropdown,
+                ...options.headerDropdown
+            ];
 
             // custom user events
             this.events = Object.assign(
@@ -3463,6 +3530,7 @@ class DataTable {
                     </span>
                 </div>
                 <div class="dt-toast"></div>
+                <textarea class="dt-paste-target"></textarea>
             </div>
         `;
 
@@ -3471,6 +3539,7 @@ class DataTable {
             this.bodyScrollable = $('.dt-scrollable', this.wrapper);
             this.freezeContainer = $('.dt-freeze', this.wrapper);
             this.toastMessage = $('.dt-toast', this.wrapper);
+            this.pasteTarget = $('.dt-paste-target', this.wrapper);
         }
 
         refresh(data, columns) {
@@ -3588,11 +3657,11 @@ class DataTable {
     DataTable.instances = 0;
 
     var name = "frappe-datatable";
-var version = "0.0.4";
+    var version = "0.0.5";
     var description = "A modern datatable library for the web";
     var main = "dist/frappe-datatable.cjs.js";
-var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js"};
+    var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","docs":"vuepress dev docs-wip"};
-var devDependencies = {"chai":"3.5.0","deepmerge":"^2.0.1","eslint-config-airbnb":"^16.1.0","eslint-config-airbnb-base":"^12.1.0","eslint-plugin-import":"^2.11.0","mocha":"3.3.0","postcss-cssnext":"^3.1.0","postcss-nested":"^3.0.0","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-eslint":"^4.0.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify-es":"^0.0.1"};
+    var devDependencies = {"chai":"3.5.0","deepmerge":"^2.0.1","eslint-config-airbnb":"^16.1.0","eslint-config-airbnb-base":"^12.1.0","eslint-plugin-import":"^2.11.0","mocha":"3.3.0","postcss-cssnext":"^3.1.0","postcss-nested":"^3.0.0","rollup":"^0.59.1","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-eslint":"^4.0.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify-es":"^0.0.1","vuepress":"^0.8.4"};
     var repository = {"type":"git","url":"https://github.com/frappe/datatable.git"};
     var keywords = ["datatable","data","grid","table"];
     var author = "Faris Ansari";

docs/assets/js/index.js

@@ -10,7 +10,11 @@ const {
 let datatable1 = new DataTable('.example-1', {
     columns,
     data,
-    checkboxColumn: true
+    checkboxColumn: true,
+    headerDropdown: [{
+        label: 'Add Column',
+        action: console.log
+    }]
 });
 
 // // Formatted Cells

index.html

@@ -79,6 +79,10 @@
 					data,
 					inlineFilters: true,
 					dynamicRowHeight: true,
+					headerDropdown: [{
+						label: 'Add Column',
+						action: console.log
+					}],
 					getEditor(colIndex, rowIndex, value, parent) {
 						// editing obj only for date field
 						if (colIndex != 6) return;

package.json

@@ -9,7 +9,8 @@
     "production": "rollup -c --production",
     "build:docs": "rollup -c --docs",
     "dev": "rollup -c -w",
-    "test": "mocha --compilers js:babel-core/register --colors ./test/*.spec.js"
+    "test": "mocha --compilers js:babel-core/register --colors ./test/*.spec.js",
+    "docs": "vuepress dev vuepress"
   },
   "devDependencies": {
     "chai": "3.5.0",
@@ -20,12 +21,15 @@
     "mocha": "3.3.0",
     "postcss-cssnext": "^3.1.0",
     "postcss-nested": "^3.0.0",
+    "rollup": "^0.59.1",
     "rollup-plugin-commonjs": "^8.3.0",
     "rollup-plugin-eslint": "^4.0.0",
     "rollup-plugin-json": "^2.3.0",
     "rollup-plugin-node-resolve": "^3.0.3",
     "rollup-plugin-postcss": "^1.2.8",
-    "rollup-plugin-uglify-es": "^0.0.1"
+    "rollup-plugin-uglify-es": "^0.0.1",
+    "script-loader": "^0.7.2",
+    "vuepress": "^0.8.4"
   },
   "repository": {
     "type": "git",
@@ -37,7 +41,7 @@
     "grid",
     "table"
   ],
-  "author": "Faris Ansari",
+  "author": "Frappe Technologies",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/frappe/datatable/issues"

src/defaults.js

@@ -48,9 +48,9 @@ export default {
     layout: 'fixed', // fixed, fluid, ratio
     noDataMessage: 'No Data',
     cellHeight: null,
+    dynamicRowHeight: false,
     inlineFilters: false,
     treeView: false,
     checkedRowStatus: true,
-    dynamicRowHeight: false,
     pasteFromClipboard: false
 };

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

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

vuepress/.vuepress/components/datatableData.js

@@ -0,0 +1,683 @@
+
+function getSampleData(multiplier) {
+    let columns = ['Name', {name: 'Position', width: 195}, 'Office', 'Extn.', 'Start Date', 'Salary'];
+    let data = [
+        ['Tiger Nixon', 'System Architect', 'Edinburgh', 5421, '2011/04/25', '320,800'],
+        ['Garrett Winters', 'Accountant', 'Tokyo', 8422, '2011/07/25', '170,750'],
+        ['Ashton Cox', 'Junior Technical Author', 'San Francisco', 1562, '2009/01/12', '86,000'],
+        ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', 6224, '2012/03/29', '433,060'],
+        ['Airi Satou', 'Accountant', 'Tokyo', 5407, '2008/11/28', '162,700'],
+        ['Brielle Williamson', 'Integration Specialist', 'New York', 4804, '2012/12/02', '372,000'],
+        ['Herrod Chandler', 'Sales Assistant', 'San Francisco', 9608, '2012/08/06', '137,500'],
+        ['Rhona Davidson', 'Integration Specialist', 'Tokyo', 6200, '2010/10/14', '327,900'],
+        ['Colleen Hurst', 'Javascript Developer', 'San Francisco', 2360, '2009/09/15', '205,500'],
+        ['Sonya Frost', 'Software Engineer', 'Edinburgh', 1667, '2008/12/13', '103,600'],
+        ['Jena Gaines', 'Office Manager', 'London', 3814, '2008/12/19', '90,560'],
+        ['Quinn Flynn', 'Support Lead', 'Edinburgh', 9497, '2013/03/03', '342,000'],
+        ['Charde Marshall', 'Regional Director', 'San Francisco', 6741, '2008/10/16', '470,600'],
+        ['Haley Kennedy', 'Senior Marketing Designer', 'London', 3597, '2012/12/18', '313,500'],
+        ['Tatyana Fitzpatrick', 'Regional Director', 'London', 1965, '2010/03/17', '385,750'],
+        ['Michael Silva', 'Marketing Designer', 'London', 1581, '2012/11/27', '198,500'],
+        ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 3059, '2010/06/09', '725,000'],
+        ['Gloria Little', 'Systems Administrator', 'New York', 1721, '2009/04/10', '237,500'],
+        ['Bradley Greer', 'Software Engineer', 'London', 2558, '2012/10/13', '132,000'],
+        ['Dai Rios', 'Personnel Lead', 'Edinburgh', 2290, '2012/09/26', '217,500'],
+        ['Jenette Caldwell', 'Development Lead', 'New York', 1937, '2011/09/03', '345,000'],
+        ['Yuri Berry', 'Chief Marketing Officer (CMO)', 'New York', 6154, '2009/06/25', '675,000'],
+        ['Caesar Vance', 'Pre-Sales Support', 'New York', 8330, '2011/12/12', '106,450'],
+        ['Doris Wilder', 'Sales Assistant', 'Sidney', 3023, '2010/09/20', '85,600'],
+        ['Angelica Ramos', 'Chief Executive Officer (CEO)', 'London', 5797, '2009/10/09', '1,200,000'],
+        ['Gavin Joyce', 'Developer', 'Edinburgh', 8822, '2010/12/22', '92,575'],
+        ['Jennifer Chang', 'Regional Director', 'Singapore', 9239, '2010/11/14', '357,650'],
+        ['Brenden Wagner', 'Software Engineer', 'San Francisco', 1314, '2011/06/07', '206,850'],
+        ['Fiona Green', 'Chief Operating Officer (COO)', 'San Francisco', 2947, '2010/03/11', '850,000'],
+        ['Shou Itou', 'Regional Marketing', 'Tokyo', 8899, '2011/08/14', '163,000'],
+        ['Michelle House', 'Integration Specialist', 'Sidney', 2769, '2011/06/02', '95,400'],
+        ['Suki Burks', 'Developer', 'London', 6832, '2009/10/22', '114,500'],
+        ['Prescott Bartlett', 'Technical Author', 'London', 3606, '2011/05/07', '145,000'],
+        ['Gavin Cortez', 'Team Leader', 'San Francisco', 2860, '2008/10/26', '235,500'],
+        ['Martena Mccray', 'Post-Sales support', 'Edinburgh', 8240, '2011/03/09', '324,050'],
+        ['Unity Butler', 'Marketing Designer', 'San Francisco', 5384, '2009/12/09', '85,675'],
+        ['Howard Hatfield', 'Office Manager', 'San Francisco', 7031, '2008/12/16', '164,500'],
+        ['Hope Fuentes', 'Secretary', 'San Francisco', 6318, '2010/02/12', '109,850'],
+        ['Vivian Harrell', 'Financial Controller', 'San Francisco', 9422, '2009/02/14', '452,500'],
+        ['Timothy Mooney', 'Office Manager', 'London', 7580, '2008/12/11', '136,200'],
+        ['Jackson Bradshaw', 'Director', 'New York', 1042, '2008/09/26', '645,750'],
+        ['Olivia Liang', 'Support Engineer', 'Singapore', 2120, '2011/02/03', '234,500'],
+        ['Bruno Nash', 'Software Engineer', 'London', 6222, '2011/05/03', '163,500'],
+        ['Sakura Yamamoto', 'Support Engineer', 'Tokyo', 9383, '2009/08/19', '139,575'],
+        ['Thor Walton', 'Developer', 'New York', 8327, '2013/08/11', '98,540'],
+        ['Finn Camacho', 'Support Engineer', 'San Francisco', 2927, '2009/07/07', '87,500'],
+        ['Serge Baldwin', 'Data Coordinator', 'Singapore', 8352, '2012/04/09', '138,575'],
+        ['Zenaida Frank', 'Software Engineer', 'New York', 7439, '2010/01/04', '125,250'],
+        ['Zorita Serrano', 'Software Engineer', 'San Francisco', 4389, '2012/06/01', '115,000'],
+        ['Jennifer Acosta', 'Junior Javascript Developer', 'Edinburgh', 3431, '2013/02/01', '75,650'],
+        ['Cara Stevens', 'Sales Assistant', 'New York', 3990, '2011/12/06', '145,600'],
+        ['Hermione Butler', 'Regional Director', 'London', 1016, '2011/03/21', '356,250'],
+        ['Lael Greer', 'Systems Administrator', 'London', 6733, '2009/02/27', '103,500'],
+        ['Jonas Alexander', 'Developer', 'San Francisco', 8196, '2010/07/14', '86,500'],
+        ['Shad Decker', 'Regional Director', 'Edinburgh', 6373, '2008/11/13', '183,000'],
+        ['Michael Bruce', 'Javascript Developer', 'Singapore', 5384, '2011/06/27', '183,000'],
+        ['Donna Snider', 'Customer Support', 'New York', 4226, '2011/01/25', '112,000']
+    ];
+
+    if (multiplier) {
+        Array.from(new Array(multiplier - 1)).forEach(d => {
+            data = data.concat(data);
+        });
+    }
+
+    return {
+        columns,
+        data
+    };
+}
+
+function getTreeData() {
+    return {
+        columns: [{
+            'id': 'account',
+            'content': 'Account'
+        }, {
+            'id': 'opening_debit',
+            'content': 'Opening (Dr)'
+        }, {
+            'id': 'opening_credit',
+            'content': 'Opening (Cr)'
+        },
+        // {
+        //     'id': 'debit',
+        //     'content': 'Debit'
+        // },
+        // {
+        //     'id': 'credit',
+        //     'content': 'Credit'
+        // },
+        {
+            'id': 'closing_debit',
+            'content': 'Closing (Dr)'
+        }, {
+            'id': 'closing_credit',
+            'content': 'Closing (Cr)'
+        }, {
+            'id': 'currency',
+            'content': 'Currency',
+            'hidden': 1
+        }],
+        data: [{
+            'account_name': 'Application of Funds (Assets)',
+            'account': 'Application of Funds (Assets)',
+            'parent_account': null,
+            'indent': 0,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 12023729.54,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 12023729.54,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Current Assets',
+            'account': 'Current Assets',
+            'parent_account': 'Application of Funds (Assets)',
+            'indent': 1,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 13960649.54,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 13960649.54,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Accounts Receivable',
+            'account': 'Accounts Receivable',
+            'parent_account': 'Current Assets',
+            'indent': 2,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 742790.474,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 742790.474,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Debtors',
+            'account': 'Debtors',
+            'parent_account': 'Accounts Receivable',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 742790.474,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 742790.474,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Bank Accounts',
+            'account': 'Bank Accounts',
+            'parent_account': 'Current Assets',
+            'indent': 2,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 280676.822,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 280676.822,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Corporation Bank',
+            'account': 'Corporation Bank',
+            'parent_account': 'Bank Accounts',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 290676.822,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 290676.822,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'HDFC Bank',
+            'account': 'HDFC Bank',
+            'parent_account': 'Bank Accounts',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 10000.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 10000.0,
+            'has_value': true
+        }, {
+            'account_name': 'Cash In Hand',
+            'account': 'Cash In Hand',
+            'parent_account': 'Current Assets',
+            'indent': 2,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 229904.494,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 229904.494,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Cash',
+            'account': 'Cash',
+            'parent_account': 'Cash In Hand',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 229904.494,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 229904.494,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Stock Assets',
+            'account': 'Stock Assets',
+            'parent_account': 'Current Assets',
+            'indent': 2,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 12707277.75,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 12707277.75,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'All Warehouses',
+            'account': 'All Warehouses',
+            'parent_account': 'Stock Assets',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 12707277.75,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 12707277.75,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Finished Goods',
+            'account': 'Finished Goods',
+            'parent_account': 'All Warehouses',
+            'indent': 4,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 87320.3,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 87320.3,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Retail Stores',
+            'account': 'Retail Stores',
+            'parent_account': 'All Warehouses',
+            'indent': 4,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 4540590.0,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 4540590.0,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Bandra Store',
+            'account': 'Bandra Store',
+            'parent_account': 'Retail Stores',
+            'indent': 5,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 3246800.0,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 3246800.0,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Central Warehouse',
+            'account': 'Central Warehouse',
+            'parent_account': 'Retail Stores',
+            'indent': 5,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 1236790.0,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 1236790.0,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Lower Parel Store',
+            'account': 'Lower Parel Store',
+            'parent_account': 'Retail Stores',
+            'indent': 5,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 57000.0,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 57000.0,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Stores',
+            'account': 'Stores',
+            'parent_account': 'All Warehouses',
+            'indent': 4,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 8016525.27,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 8016525.27,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Work In Progress',
+            'account': 'Work In Progress',
+            'parent_account': 'All Warehouses',
+            'indent': 4,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 62842.18,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 62842.18,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Fixed Assets',
+            'account': 'Fixed Assets',
+            'parent_account': 'Application of Funds (Assets)',
+            'indent': 1,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 19920.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 19920.0,
+            'has_value': true
+        }, {
+            'account_name': 'Electronic Equipments',
+            'account': 'Electronic Equipments',
+            'parent_account': 'Fixed Assets',
+            'indent': 2,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 80.0,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 80.0,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'Furnitures and Fixtures',
+            'account': 'Furnitures and Fixtures',
+            'parent_account': 'Fixed Assets',
+            'indent': 2,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 20000.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 20000.0,
+            'has_value': true
+        }, {
+            'account_name': 'Temporary Accounts',
+            'account': 'Temporary Accounts',
+            'parent_account': 'Application of Funds (Assets)',
+            'indent': 1,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 1917000.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 1917000.0,
+            'has_value': true
+        }, {
+            'account_name': 'Temporary Opening',
+            'account': 'Temporary Opening',
+            'parent_account': 'Temporary Accounts',
+            'indent': 2,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 1917000.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 1917000.0,
+            'has_value': true
+        }, {
+            'account_name': 'Source of Funds (Liabilities)',
+            'account': 'Source of Funds (Liabilities)',
+            'parent_account': null,
+            'indent': 0,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 2371628.002,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 2371628.002,
+            'has_value': true
+        }, {
+            'account_name': 'Current Liabilities',
+            'account': 'Current Liabilities',
+            'parent_account': 'Source of Funds (Liabilities)',
+            'indent': 1,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 2371628.002,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 2371628.002,
+            'has_value': true
+        }, {
+            'account_name': 'Accounts Payable',
+            'account': 'Accounts Payable',
+            'parent_account': 'Current Liabilities',
+            'indent': 2,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 368311.85,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 368311.85,
+            'has_value': true
+        }, {
+            'account_name': 'Creditors',
+            'account': 'Creditors',
+            'parent_account': 'Accounts Payable',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 194871.85,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 194871.85,
+            'has_value': true
+        }, {
+            'account_name': 'Salary Payable',
+            'account': 'Salary Payable',
+            'parent_account': 'Accounts Payable',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 173440.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 173440.0,
+            'has_value': true
+        }, {
+            'account_name': 'Duties and Taxes',
+            'account': 'Duties and Taxes',
+            'parent_account': 'Current Liabilities',
+            'indent': 2,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 150146.822,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 150146.822,
+            'has_value': true
+        }, {
+            'account_name': 'CGST',
+            'account': 'CGST',
+            'parent_account': 'Duties and Taxes',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 51479.591,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 51479.591,
+            'has_value': true
+        }, {
+            'account_name': 'IGST',
+            'account': 'IGST',
+            'parent_account': 'Duties and Taxes',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 1944.0,
+            'opening_credit': 0.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 1944.0,
+            'closing_credit': 0.0,
+            'has_value': true
+        }, {
+            'account_name': 'SGST',
+            'account': 'SGST',
+            'parent_account': 'Duties and Taxes',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 97711.231,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 97711.231,
+            'has_value': true
+        }, {
+            'account_name': 'UGST',
+            'account': 'UGST',
+            'parent_account': 'Duties and Taxes',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 2900.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 2900.0,
+            'has_value': true
+        }, {
+            'account_name': 'Stock Liabilities',
+            'account': 'Stock Liabilities',
+            'parent_account': 'Current Liabilities',
+            'indent': 2,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 1853169.33,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 1853169.33,
+            'has_value': true
+        }, {
+            'account_name': 'Stock Received But Not Billed',
+            'account': 'Stock Received But Not Billed',
+            'parent_account': 'Stock Liabilities',
+            'indent': 3,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 1853169.33,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 1853169.33,
+            'has_value': true
+        }, {
+            'account_name': 'Equity',
+            'account': 'Equity',
+            'parent_account': null,
+            'indent': 0,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 10000.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 10000.0,
+            'has_value': true
+        }, {
+            'account_name': 'Capital Stock',
+            'account': 'Capital Stock',
+            'parent_account': 'Equity',
+            'indent': 1,
+            'from_date': '2018-04-01',
+            'to_date': '2019-03-31',
+            'currency': 'INR',
+            'opening_debit': 0.0,
+            'opening_credit': 10000.0,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 0.0,
+            'closing_credit': 10000.0,
+            'has_value': true
+        }, {}, {
+            'account': 'Total',
+            'account_name': 'Total',
+            'warn_if_negative': true,
+            'opening_debit': 32260956.43,
+            'opening_credit': 22618854.891999997,
+            'debit': 0.0,
+            'credit': 0.0,
+            'closing_debit': 32260956.43,
+            'closing_credit': 22618854.891999997,
+            'parent_account': null,
+            'indent': 0,
+            'has_value': true,
+            'currency': 'INR'
+        }]
+    };
+}
+
+export {
+    getSampleData,
+    getTreeData
+}

vuepress/.vuepress/config.js

@@ -0,0 +1,18 @@
+module.exports = {
+    title: 'Frappe DataTable',
+    description: 'A simple, modern and interactive datatable for the web',
+    dest: './static/docs/datatable',
+    base: '/docs/datatable/',
+    themeConfig: {
+        sidebar: [
+            '/getting-started',
+            '/download',
+            '/configuration',
+            '/events'
+        ],
+        nav: [
+            { text: 'Documentation', link: '/getting-started'},
+            { text: 'GitHub', link: 'https://github.com/frappe/datatable'},
+        ]
+    }
+}

vuepress/.vuepress/override.styl

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

vuepress/.vuepress/public/img/data-table-logo.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="340.42303" height="330.00024" viewBox="0 0 90.070259 87.312561" version="1.1" id="svg3970" inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <defs id="defs3964"/>
+  
+  <metadata id="metadata3967">
+    
+  </metadata>
+  <g inkscape:label="Layer 1" id="layer1" transform="translate(-7.1255851,-173.21277)">
+    <rect transform="scale(-1,1)" ry="13.229167" rx="13.229167" y="173.21277" x="-94.438156" height="87.312546" width="87.312553" id="rect2004" style="opacity:1;fill:#edfdff;fill-opacity:1;stroke:none;stroke-width:1.74624979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;"/>
+    <path style="opacity:1;fill:#c3f1ff;fill-opacity:1;stroke:none;stroke-width:6.59999943;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 0 96.25 L 0 151.25 L 77.5 151.25 C 80.27 151.25 82.5 149.02 82.5 146.25 L 82.5 101.25 C 82.5 98.48 80.27 96.25 77.5 96.25 L 0 96.25 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect2006"/>
+    <path style="opacity:1;fill:#c3f1ff;fill-opacity:1;stroke:none;stroke-width:6.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 50 0 C 22.299998 0 1.4210855e-14 22.299998 0 50 L 0 54.5 L 78 54.5 C 80.77 54.5 83 52.27 83 49.5 L 83 4.5 C 83 2.503655 81.832377 0.80274423 80.148438 0 L 50 0 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect2008"/>
+    <rect style="opacity:1;fill:#71caff;fill-opacity:1;stroke:none;stroke-width:1.74624979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" id="rect2010" width="57.195782" height="14.552094" x="40.000061" y="198.74506" ry="1.3229167" rx="1.3229166"/>
+    <path style="opacity:1;fill:#c3f1ff;fill-opacity:1;stroke:none;stroke-width:6.59999943;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 0 193 L 0 248 L 77.5 248 C 80.27 248 82.5 245.77 82.5 243 L 82.5 198 C 82.5 195.23 80.27 193 77.5 193 L 0 193 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect2012"/>
+    <path style="fill:#87e34c;fill-opacity:1;stroke:none;stroke-width:1.00000012px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" clip-path="none" d="M 0 219.61328 L 0 284.29688 C 0 309.61626 27.643317 330 61.980469 330 L 268.01953 330 C 300.54576 330 327.04905 311.70603 329.75586 288.25586 L 330 248.5 C 256.7254 233.20714 83.19117 220.5514 0 219.61328 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="path2020"/>
+    <path style="opacity:1;fill:#c3f1ff;fill-opacity:1;stroke:none;stroke-width:6.59999943;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 129.25 193.5 C 126.48 193.5 124.25 195.73 124.25 198.5 L 124.25 243.5 C 124.25 246.27 126.48 248.5 129.25 248.5 L 330 248.5 L 330 193.5 L 129.25 193.5 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect2014"/>
+    <path style="opacity:1;fill:#c3f1ff;fill-opacity:1;stroke:none;stroke-width:6.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 127.10156 0 C 125.41762 0.80274423 124.25 2.503655 124.25 4.5 L 124.25 49.5 C 124.25 52.27 126.48 54.5 129.25 54.5 L 330 54.5 L 330 50 C 330 22.299998 307.7 0 280 0 L 127.10156 0 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect2016"/>
+    <path style="opacity:1;fill:#59b81c;fill-opacity:1;stroke:none;stroke-width:6.59999943;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 129.25 290.5 C 126.48 290.5 124.25 292.73 124.25 295.5 L 124.25 330 L 280 330 C 304.09518 330 324.09664 313.12363 328.89648 290.5 L 129.25 290.5 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect1135"/>
+    <path style="opacity:1;fill:#59b81c;fill-opacity:1;stroke:none;stroke-width:6.59999943;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 0.94921875 289.75 C 5.4614968 312.74994 25.639123 330 50 330 L 82.5 330 L 82.5 294.75 C 82.5 291.98 80.27 289.75 77.5 289.75 L 0.94921875 289.75 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect1139"/>
+    <path style="opacity:1;fill:#59b81c;fill-opacity:1;stroke:none;stroke-width:1.74624979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="m 7.1257773,231.31877 v 7.51065 H 27.630987 c 0.732896,0 1.322917,-0.59002 1.322917,-1.32292 v -5.36505 C 20.620295,231.67818 13.007809,231.3851 7.1257773,231.31877 Z" id="path1264"/>
+    <path style="fill:#59b81c;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" clip-path="none" d="m 40.000259,232.82824 v 4.81056 c 0,0.73289 0.59002,1.32291 1.322916,1.32291 h 53.115108 c -11.982795,-2.50088 -34.095004,-4.73297 -54.438024,-6.13347 z" id="path1163"/>
+  </g>
+</svg>

vuepress/.vuepress/public/img/frappe-bird-grey.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100%"
+   height="100%"
+   viewBox="0 0 260 260"
+   version="1.1"
+   xml:space="preserve"
+   style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"
+   id="svg16"
+   sodipodi:docname="frappe-bird-grey.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
+     id="metadata22"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs20" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1029"
+     id="namedview18"
+     showgrid="false"
+     inkscape:snap-global="false"
+     inkscape:zoom="2.5673415"
+     inkscape:cx="125.36812"
+     inkscape:cy="132.66533"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg16" /><path
+     inkscape:connector-curvature="0"
+     id="path846"
+     d="m 39.426993,41.26578 c -0.08308,-0.002 -0.162537,0.01476 -0.244177,0.01847 -0.195406,-0.01104 -0.394663,-0.0078 -0.595581,0.02219 -0.671494,0.09826 -1.359798,0.439289 -1.985268,1.097637 L 36.166705,42.984362 3.911539,86.00785 c -1.4521873,1.95837 -0.089029,5.089411 2.840468,4.758942 l 35.051779,-4.999463 7.486826,52.499391 c 0.143332,1.06941 0.708175,1.87792 1.45651,2.37853 0.06099,0.57446 0.300326,1.15825 0.786491,1.67605 l 54.221237,55.16042 c 0.35241,0.34946 0.76163,0.57974 1.18925,0.71967 l 43.2449,43.9932 c 2.19797,2.06517 5.73881,0.59111 5.73827,-2.44537 l 0.72154,-88.30898 100.76861,-99.226182 c 2.03273,-1.933848 0.52846,-5.096585 -1.98911,-5.01476 L 146.21842,46.315471 c -1.15721,-0.0078 -1.82288,0.589677 -2.08644,0.84183 L 70.489255,119.67376 95.234723,86.666413 c 1.320352,-1.808803 0.561745,-3.846193 -0.6872,-4.787579 L 41.349464,41.92492 C 40.706305,41.485816 40.049657,41.2839 39.427179,41.266357 Z"
+     style="fill:#29344a;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /></svg>

vuepress/api/datamanager.md

@@ -0,0 +1,22 @@
+## DataManager
+
+All the methods listed here are available on the `datatable.datamanager` property.
+
+Example
+```javascript
+const datatable = new DataTable(container, options);
+datatable.datamanager.getRows();
+```
+
+#### sortRows
+
+Sorts rows according the values in the column identified by `colIndex` and order `sortOrder`.
+
+```javascript
+sortRows(colIndex: Number, sortOrder: 'asc | desc | none'): void
+
+// Usage
+datatable.datamanager.sortRows(data, columns);
+```
+
+---

vuepress/api/datatable.md

@@ -0,0 +1,125 @@
+## Datatable
+
+All the methods listed here are available on the `datatable` instance created using the `DataTable` constructor.
+
+Example
+```javascript
+const datatable = new DataTable(container, options);
+datatable.refresh(data);
+```
+
+#### refresh
+
+Refreshes the datatable with new `data` and `column`
+
+```javascript
+refresh(data: Array, columns: Array): void
+
+// Usage
+datatable.refresh(data, columns);
+```
+
+---
+
+#### setDimensions
+
+Refreshes the datatable layout.
+
+```javascript
+setDimensions(): void
+
+// Usage
+datatable.setDimensions();
+```
+
+---
+
+#### appendRows
+
+Append new rows to the datatable
+
+```javascript
+appendRows(rows: Array): void
+
+// Usage
+datatable.appendRows(rows);
+```
+
+---
+
+#### showToastMessage
+
+Show a toast message at the bottom center of the datatable. You can hide the message by providing `hideAfter` value which is in seconds.
+
+```javascript
+showToastMessage(message: String, hideAfter: Number): void
+
+// Usage
+datatable.showToastMessage('Hey', 2);
+```
+
+---
+
+#### clearToastMessage
+
+Clear any toast message in the datatable.
+
+```javascript
+clearToastMessage(): void
+
+// Usage
+datatable.clearToastMessage();
+```
+
+---
+
+#### getColumns
+
+Get all the columns
+
+```javascript
+getColumns(): Array
+
+// Usage
+datatable.getColumns();
+```
+
+---
+
+#### getRows
+
+Get all the rows
+
+```javascript
+getRows(): Array
+
+// Usage
+datatable.getRows();
+```
+
+---
+
+#### freeze
+
+Show an overlay on the datatable which displays the `freezeMessage` value provided in `options`. You cannot interact with the datatable when it is frozen.
+
+```javascript
+freeze(): void
+
+// Usage
+datatable.freeze();
+```
+
+---
+
+#### unfreeze
+
+Remove the freeze overlay.
+
+```javascript
+unfreeze(): void
+
+// Usage
+datatable.unfreeze();
+```
+

vuepress/configuration.md

@@ -0,0 +1,357 @@
+---
+sidebarDepth: 2
+---
+
+# Configuration
+
+Frappe DataTable has a lot of customizable features, this section is dedicated to enabling / disabling existing functionality.
+
+## Container
+
+The first parameter required by the `DataTable` constructor is the container element. You can pass in a CSS Selector or a DOM Object.
+
+```javascript
+const datatable = new DataTable('#datatable', options);
+// or
+const container = document.querySelector('#datatable');
+const datatable = new DataTable(container, options);
+```
+
+## Options
+
+The second parameter required by the `DataTable` constructor is the options object. The minimum required configuration is to pass `column` and `data` values.
+
+```javascript
+const options = {
+    columns: ['Name', 'Position', 'Salary'],
+    data: [
+        ['John Doe', 'DevOps Engineer', '$12300'],
+        ['Mary Jane', 'UX Design', '$14000'],
+    ]
+}
+
+const datatable = new DataTable(container, options);
+```
+
+The following options are configurable:
+
+### columns
+ - Type: `Array`
+ - Default: `[]`
+ - Required
+
+The minimum required value is to pass a list of column header names
+
+```js
+const options = {
+    columns: ['Name', 'Position', 'Country']
+}
+```
+
+You can also pass an Array of Object Descriptors for each column header
+
+```js
+const options = {
+    columns: [
+        {
+            name: 'Name',
+            id: 'name',
+            editable: false,
+            resizable: false,
+            sortable: false,
+            focusable: false,
+            dropdown: false,
+            width: 32,
+            format: (value) => {
+                return value.bold();
+            }
+        },
+        ...
+    ]
+}
+```
+
+#### column / name
+ - Type: `String`
+ - Required
+
+#### column / id
+ - Type: `String`
+ - Default: Slugified version of `name`
+
+#### column / editable
+ - Type: `Boolean`
+ - Default: `true`
+
+If this is set to false, the entire column will be read-only
+
+#### column / resizable
+ - Type: `Boolean`
+ - Default: `true`
+
+If this is set to false, the column width will be fixed and is not resizable using mouse drag
+
+#### column / sortable
+ - Type: `Boolean`
+ - Default: `true`
+
+If this is set to false, the column is not sortable using column actions
+
+#### column / focusable
+ - Type: `Boolean`
+ - Default: `true`
+
+If this is set to false, the cells in the column is not focusable on click
+
+#### column / dropdown
+ - Type: `Boolean`
+ - Default: `true`
+
+Show / Hide the dropdown action button on column header
+
+#### column / width
+ - Type: `Number`
+
+If the `layout` option is set to
+- `fluid`, then this value doesn't have any effect
+- `fixed`, then this value is set in pixels
+- `ratio`, then this value works similar to `flex` property in CSS. So, if column A has `width: 1` and column B has `width: 2`, then column B will occupy twice as much width as column A
+
+#### column / format
+ - Type: `Function`
+ - Default: `null`
+
+Custom Formatter function that is passed the value of the cell. You can process the value and return any valid HTML to customize how the cell is rendered.
+
+---
+
+### data
+ - Type: `Array`
+ - Default: `[]`
+ - Required
+
+The minimum required value is to pass an array of array of cell values. The order of cell values should match with the order of columns passed
+
+```js
+const options = {
+    columns: ['Name', 'Position', 'Country'],
+    data: [
+        ['Faris', 'Software Developer', 'India'],
+        ['Kenneth', 'Marketing Engineer', 'India']
+    ]
+}
+```
+
+You can also pass an Object Descriptor for each cell value
+
+```js
+const options = {
+    columns: ['Name', 'Position', 'Country'],
+    data: [
+        [
+            {
+                content: 'Faris',
+                // disable editing just for this cell
+                editable: false,
+                // format function takes precedence over
+                // the format function defined in column header
+                format: (value) => {
+                    return value.fontcolor('blue');
+                }
+            },
+            ...
+        ],
+        ...
+    ]
+}
+```
+
+### getEditor
+ - Type: `Function`
+ - Default: `null`
+
+Customize the editor behaviour.
+
+---
+
+### serialNoColumn
+ - Type: `Boolean`
+ - Default: `true`
+
+Whether to show serial number as the first column in datatable.
+
+---
+
+### checkboxColumn
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to show checkbox column in the datatable.
+
+---
+
+### clusterize
+ - Type: `Boolean`
+ - Default: `true`
+
+Whether to use clusterize to render the data.
+
+> If you don't want to show large number of rows. Then you can turn this off. In that case you don't need to load the `clusterize.js` lib
+
+---
+
+### layout
+ - Type: `String`
+ - Default: `fixed`
+ - Options: `fixed | fluid | ratio`
+
+This option controls how width of each `column` is calculated in the DataTable.
+
+#### fixed
+
+The column width is calculated based on the content of the first row of the table. This layout can result in horizontal scroll.
+
+#### fluid
+
+The column width is adjusted based on the width of container. So the columns will be resized if the window is resized. This layout won't result in horizontal scroll. You will always see all the columns.
+
+#### ratio
+
+This layout works similar to the `flex` property in CSS. When column A has `width` set as `1` and column B as `2`, then column B's width  will be twice as much as column A.
+
+---
+
+### noDataMessage
+ - Type: `String`
+ - Default: `No Data`
+
+The message shown when there are no rows to show in the DataTable.
+
+---
+
+### dynamicRowHeight
+ - Type: `Boolean`
+ - Default: `false`
+
+The height of the row will be set according to the content of the cell with the maximum height in that row.
+
+---
+
+### cellHeight
+ - Type: `Number`
+ - Default: `null`
+
+Set the height of each cell explicitly.
+
+> If this value is set, `dynamicRowHeight` won't have any effect.
+
+---
+
+### inlineFilters
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to enable the inline filter feature. If the value is `true`, then you can activate the filter row by pressing `Ctrl/Cmd + F` after clicking on any cell in the DataTable.
+
+---
+
+### treeView
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to render rows in a tree structure. For this to work, you must pass the `indent` value for each row.
+
+Example
+```javascript
+
+const data = [
+    {
+        'Department': 'IT Department',
+        'No of People': '10',
+        'indent': 0,
+    },
+    {
+        'Department': 'Javascript Team',
+        'No of People': '5',
+        'indent': 1,
+    },
+    {
+        'Department': 'Vue.js Team',
+        'No of People': '3',
+        'indent': 2,
+    },
+    {
+        'Department': 'React Team',
+        'No of People': '2',
+        'indent': 2,
+    },
+    {
+        'Department': 'Design Team',
+        'No of People': '5',
+        'indent': 1,
+    },
+]
+
+const datatable = new DataTable('#datatable', {
+    columns: ['Department', 'No of People'],
+    data: data
+});
+
+```
+
+---
+
+### checkedRowStatus
+ - Type: `Boolean`
+ - Default: `true`
+
+Whether to show the number of rows checked in a toast message.
+
+---
+
+### pasteFromClipboard
+ - _Experimental_
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to allow the user to paste copied content into selected cell(s).
+
+---
+
+### dropdownButton
+ - Type: `String`
+ - Default: `▼`
+
+String to render as the dropdown button. You can pass a span with an icon class.
+
+Example
+
+```javascript
+{
+    dropdownButton: '<span class="fa fa-chevron-down"></span>'
+}
+
+```
+
+### headerDropdown
+ - Type: `Array`
+
+When you hover over any column, you see the dropdown button which is used to perform certain actions for that column.
+This option allows you to pass an array of custom buttons custom actions defined by you.
+
+```javascript
+options = {
+    headerDropdown: [
+        {
+            label: 'Copy column contents',
+            action: function (column) {
+                // code to copy the column contents
+            }
+        },
+}
+```
+
+### events
+ - Type: `Object`
+
+ The events options is described in detailed in the [next section](events.md).

vuepress/download.md

@@ -0,0 +1,29 @@
+# Download
+
+Frappe DataTable can be consumed in several different forms.
+
+## CDN
+
+Load it directly from the unpkg CDN.
+
+```html
+<script src="https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.js"></script>
+```
+
+## Package managers
+
+Include it directly in your build workflow. You can find the compiled JS/CSS files in the `dist/` directory.
+
+```bash
+yarn add frappe-datatable
+# or
+npm install frappe-datatable
+```
+
+## Source
+
+The complete source code is always available on Github.
+
+```bash
+git clone https://github.com/frappe/datatable
+```

vuepress/events.md

@@ -0,0 +1,46 @@
+# Events
+
+Hook custom actions on certain events occurred during the lifecycle of DataTable. You can define a function to be called on these events using the `events` key in `options`.
+
+Example
+```javascript
+
+const options = {
+    events: {
+        onRemoveColumn(column) {
+            // your code
+        }
+    }
+}
+
+```
+
+## onRemoveColumn
+
+- params: `column`
+
+Called when a column is removed using the dropdown option or API.
+
+---
+
+## onSwitchColumn
+
+- params: `column1`, `column2`
+
+Called when a column position is switched using the drag behaviour.
+
+---
+
+## onSortColumn
+
+- params: `column`
+
+Called when a column's sorting is changed using the dropdown or API.
+
+---
+
+## onCheckRow
+
+- params: `row`
+
+Called when a row is checked using the checkbox or API.

vuepress/getting-started.md

@@ -0,0 +1,34 @@
+---
+sidebarDepth: 0
+---
+
+# Getting Started
+
+The easiest way to get started with Frappe DataTable is using this [JSFiddle Demo](https://jsfiddle.net/f4qe6phc/7/). Or you can copy the following template into a new index.html file.
+
+## Example
+
+```html
+<!-- include styles -->
+<link href="https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.css">
+
+<!-- create the container element -->
+<div id="datatable"></div>
+
+<!-- include the dependencies -->
+<script src="https://unpkg.com/sortablejs@1.7.0/Sortable.min.js"></script>
+<script src="https://unpkg.com/clusterize.js@0.18.0/clusterize.min.js"></script>
+<!-- include the lib -->
+<script src="https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.js"></script>
+
+<!-- initialize DataTable -->
+<script>
+  const datatable = new DataTable('#datatable', {
+    columns: ['Name', 'Position', 'Salary'],
+    data: [
+      ['Faris', 'Software Developer', '$1200'],
+      ['Manas', 'Software Engineer', '$1400'],
+    ]
+  });
+</script>
+```

vuepress/readme.md

@@ -0,0 +1,89 @@
+---
+home: true
+---
+
+<datatable-basic />
+
+## Installation
+
+```bash
+# Install using yarn
+$ yarn add frappe-datatable
+
+# or NPM
+$ npm install frappe-datatable
+```
+
+## Usage
+
+```javascript
+import DataTable from 'frappe-datatable';
+
+// or add
+// <script src="frappe-datatable.js" ></script>
+// in your html
+
+let datatable = new DataTable({
+    columns: ['Name', 'Position', ...],
+    data: [
+        ['Tiger Nixon', 'System Architect', ...],
+        ['Garrett Winters', 'Accountant', ...],
+        ...
+    ]
+});
+```
+
+## Cell Features
+
+* Custom Formatters
+* Inline Editing
+* Mouse Selection
+* Copy Cells
+* Keyboard Navigation
+* Custom Cell Editor
+
+<img src="./assets/datatable-cell-demo.gif" />
+
+## Column Features
+
+* Reorder Columns
+* Sort by Column
+* Remove / Hide Column
+* Custom Actions
+* Resize Column
+* Flexible Layout
+
+<img src="./assets/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>
+
+<style>
+    .theme-container.no-sidebar .home {
+        max-width: 740px;
+    }
+    .datatable {
+        font-size: 14px;
+    }
+    tr:nth-child(2n) {
+        background-color: transparent;
+    }
+    .content.custom > div {
+        /* height: 2000px; */
+    }
+    .home .hero .description {
+        max-width: 30rem;
+        font-size: 2rem;
+        margin-bottom: 4rem;
+    }
+</style>