update doc, peer deps

README.md

@@ -107,44 +107,52 @@ Since it's a wrapper, all/most features are provided by the [jQuery DataTables](
 ## Parameters
 Our component parameters:
 ```javascript
-props: {
-  // Set the table classes you wish to use, default with bootstrap4
-  // but you can override with: themeforest, foundation, etc..
-  className: {
-    type: String,
-    default: 'table table-striped table-bordered dt-responsive nowrap w-100'
-  },
-  // the options object: https://datatables.net/manual/options
-  opts: {
-    type: Object
-  },
-  /**
-   * List all fields to be converted to opts columns
-   *
-   * @type {Object}
-   */
-  fields: {
-    type: Object
-  },
-  /**
-   * Pass in DataTables.Net loaded jQuery to resolve
-   * any multiple loaded browser jQuery conflict
-   *
-   * @type {Object}
-   */
-  jquery: {
-    type: Object
-  },
-  /**
-   * True to enable multi-select checkboxes
-   * Current implementation require datatables.net-select
-   *
-   * @type Boolean
-   */
-  selectable: {
-    type: Boolean
+  props: {
+    /**
+     * Set the table classes you wish to use, default with bootstrap4
+     * but you can override with: themeforest, foundation, etc..
+     *
+     * @type String
+     */
+    className: {
+      type: String,
+      default: 'table table-striped table-bordered nowrap w-100'
+    },
+    /**
+     * the options object: https://datatables.net/manual/options
+     *
+     * @type Object
+     */
+    opts: {
+      type: Object
+    },
+    /**
+     * List all fields to be converted to opts columns
+     *
+     * @type Object
+     */
+    fields: {
+      type: Object
+    },
+    /**
+     * Pass in DataTables.Net loaded jQuery to resolve
+     * any multiple loaded browser jQuery conflict
+     *
+     * @type Object
+     */
+    jquery: {
+      type: Object
+    },
+    /**
+     * True to enable multi-select checkboxes
+     * Current implementation require datatables.net-select
+     *
+     * @type Boolean
+     */
+    selectable: {
+      type: Boolean
+    }
   }
-},
 ```
 
 `fields` is an schema object that identify all datatables.net columns, example:

example/App.vue

@@ -60,6 +60,7 @@ export default {
         lengthChange: true,
         serverSide: true,
         fixedHeader: true,
+        saveState: true,
         buttons: ['copy', 'csv', 'print']
       },
       fields: {

lib/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/index.js": "/index.js?id=542b91159c8523321093",
-    "/index.js.map": "/index.js.map?id=3bc06a22bacc66deaa63"
+    "/index.js": "/index.js?id=5ee5f53ccf2d5efe4573",
+    "/index.js.map": "/index.js.map?id=4dc5128abdf6f7ba4dea"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-datatables-net",
   "description": "Vue jQuery DataTables.net wrapper component",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "author": "friends@niiknow.org",
   "license": "MIT",
   "main": "lib/index.js",
@@ -30,7 +30,7 @@
     "not ie <= 8"
   ],
   "peerDependencies": {
-    "datatables.net": "^1.10.19",
+    "jquery": ">=1.7",
     "vue": ">=2.0.0"
   },
   "devDependencies": {

src/VdtnetTable.vue

@@ -31,20 +31,28 @@
 export default {
   name: 'VdtnetTable',
   props: {
-    // Set the table classes you wish to use, default with bootstrap4
-    // but you can override with: themeforest, foundation, etc..
+    /**
+     * Set the table classes you wish to use, default with bootstrap4
+     * but you can override with: themeforest, foundation, etc..
+     *
+     * @type String
+     */
     className: {
       type: String,
       default: 'table table-striped table-bordered nowrap w-100'
     },
-    // the options object: https://datatables.net/manual/options
+    /**
+     * the options object: https://datatables.net/manual/options
+     *
+     * @type Object
+     */
     opts: {
       type: Object
     },
     /**
      * List all fields to be converted to opts columns
      *
-     * @type {Object}
+     * @type Object
      */
     fields: {
       type: Object
@@ -53,7 +61,7 @@ export default {
      * Pass in DataTables.Net loaded jQuery to resolve
      * any multiple loaded browser jQuery conflict
      *
-     * @type {Object}
+     * @type Object
      */
     jquery: {
       type: Object
@@ -239,6 +247,13 @@ export default {
       }
     })
   },
+  beforeDestroy() {
+    const vm = this
+    if (vm.dataTable) {
+      vm.dataTable.destroy(true)
+    }
+    vm.dataTable = null
+  },
   methods: {
     compileTemplate(template) {
       const vm  = this
@@ -259,6 +274,19 @@ export default {
       }
 
       return renderFunc
+    },
+    /**
+     * Set table data array that was loaded from somewhere else
+     * This method allow for local setting of data; though, it
+     * is recommended to use ajax instead of this.
+     *
+     * @param Array data the array of data
+     */
+    setTableData(data) {
+      const vm = this
+      vm.dataTable.clear().rows.add(data)
+      vm.dataTable.draw(false)
+      vm.dataTable.columns.adjust()
     }
   }
 }