0.5.9 - Added debounce delay prop when searching the table data

jamesdordoy · Mar 12, 2020 · 22978b9 · 22978b9
1 parent 8b30133
commit 22978b9
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 16,936 deletions.
diff --git a/README.md b/README.md
@@ -99,6 +99,7 @@ Alternatively, if you have custom filters applied and you would prefered they ar
 | `order-dir` | String | "asc" | (optional) The default order by direction |
 | `per-page` | Array | ['10','25','50'] | (optional) Amount to be displayed |
 | `theme` | String | "light" | (optional) Must be dark or light |
+| `debounce-delay` | Number | 0 | (optional) Adds a debounce delay to the get request when searching |
 | `classes` | Object | See Below | (optional) Table classes |
 | `pagination` | Object | {}  | (optional) props for [gilbitron/laravel-vue-pagination](https://github.com/gilbitron/laravel-vue-pagination#props) |
 | `add-filters-to-url` | Boolean | false | (optional) Will adjust the current url to keep track of used filters and will also store them in local storage. |

diff --git a/docs/css/chunk-vendors.f5109e5a.css → docs/css/chunk-vendors.1e6085d0.css b/docs/css/chunk-vendors.f5109e5a.css → docs/css/chunk-vendors.1e6085d0.css
diff --git a/docs/index.html b/docs/index.html
@@ -13,4 +13,4 @@
           );
         }
       }
-    }(window.location))</script><link href=/laravel-vue-datatable/css/app.a12833b9.css rel=preload as=style><link href=/laravel-vue-datatable/css/chunk-vendors.f5109e5a.css rel=preload as=style><link href=/laravel-vue-datatable/js/app.13e15f85.js rel=preload as=script><link href=/laravel-vue-datatable/js/chunk-vendors.ba41ea86.js rel=preload as=script><link href=/laravel-vue-datatable/css/chunk-vendors.f5109e5a.css rel=stylesheet><link href=/laravel-vue-datatable/css/app.a12833b9.css rel=stylesheet></head><body class=min-h-100><noscript><strong>We're sorry but laravel-vue-datatable doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/laravel-vue-datatable/js/chunk-vendors.ba41ea86.js></script><script src=/laravel-vue-datatable/js/app.13e15f85.js></script></body></html>
+    }(window.location))</script><link href=/laravel-vue-datatable/css/app.a12833b9.css rel=preload as=style><link href=/laravel-vue-datatable/css/chunk-vendors.1e6085d0.css rel=preload as=style><link href=/laravel-vue-datatable/js/app.e5a4068f.js rel=preload as=script><link href=/laravel-vue-datatable/js/chunk-vendors.17a48e06.js rel=preload as=script><link href=/laravel-vue-datatable/css/chunk-vendors.1e6085d0.css rel=stylesheet><link href=/laravel-vue-datatable/css/app.a12833b9.css rel=stylesheet></head><body class=min-h-100><noscript><strong>We're sorry but laravel-vue-datatable doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/laravel-vue-datatable/js/chunk-vendors.17a48e06.js></script><script src=/laravel-vue-datatable/js/app.e5a4068f.js></script></body></html>
diff --git a/docs/js/app.13e15f85.js b/docs/js/app.13e15f85.js
diff --git a/docs/js/app.13e15f85.js.map b/docs/js/app.13e15f85.js.map
diff --git a/docs/js/app.e5a4068f.js b/docs/js/app.e5a4068f.js
diff --git a/docs/js/app.e5a4068f.js.map b/docs/js/app.e5a4068f.js.map
diff --git a/docs/js/chunk-vendors.ba41ea86.js → docs/js/chunk-vendors.17a48e06.js b/docs/js/chunk-vendors.ba41ea86.js → docs/js/chunk-vendors.17a48e06.js
diff --git a/docs/js/chunk-vendors.17a48e06.js.map b/docs/js/chunk-vendors.17a48e06.js.map
diff --git a/docs/js/chunk-vendors.ba41ea86.js.map b/docs/js/chunk-vendors.ba41ea86.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "laravel-vue-datatable",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "description": "Vue.js datatable made with Laravel and Bootstrap in mind",
   "author": "James Dordoy <[email protected]>",
   "homepage": "https://jamesdordoy.github.io/laravel-vue-datatable/",

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
@@ -84,12 +84,12 @@
 
 <script>
 
+import _ from 'lodash';
 import axios from 'axios';
 import VueTable from './Table.vue';
 import UrlFilters from '../mixins/UrlFilters';
 import DataTableCell from './DataTableCell.vue';
 import DataTableFilters from './DataTableFilters.vue';
-import _ from 'lodash'
 
 export default {
     created() {
@@ -104,7 +104,7 @@ export default {
             this.classes['table']['table-dark'] = true;
         }
 
-        this.debouncedGetData = _.debounce(this.getData, this.$attrs.delay_ms ? this.$attrs.delay_ms : 0);
+        this.debounceGetData = _.debounce(this.getData, this.debounceDelay ? this.debounceDelay : 0);
     },
     mounted() {
         this.columns.forEach((column) => {
@@ -116,15 +116,15 @@ export default {
         url: {
             handler: function(newUrl) {
                 this.loading = false;
-                this.debouncedGetData(newUrl, this.getRequestPayload);
+                this.debounceGetData(newUrl, this.getRequestPayload);
             },
         },
         tableProps: {
             handler: function() {
                 this.loading = false;
 
                 if (this.url) {
-                    this.debouncedGetData(this.url, this.getRequestPayload);
+                    this.debounceGetData(this.url, this.getRequestPayload);
                     let props = this.tableProps;
                     props.page = this.page;
                     this.$emit("onTablePropsChanged", props);
@@ -286,6 +286,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        debounceDelay: {
+            type: Number,
+            default: 0,
+        },
         pagination: {
             type: Object,
             default: () => ({

diff --git a/src/markdown/props/table.md b/src/markdown/props/table.md
@@ -7,6 +7,7 @@
 | order-dir | String | "asc" | (optional) The default order by direction |
 | per-page | Array | ['10','25','50'] | (optional) Amount to be displayed |
 | theme | String | "light" | (optional) Must be dark or light |
+| debounce-delay | Number | 0 | (optional) Adds a debounce delay to the get request when searching |
 | add-filters-to-url | Boolean | false | <p class="wrap-text"> (optional) Will adjust the current url to keep track of used filters and will also store them in local storage. </p> |
 | classes | Object | See Below | (optional) Table classes |
 | pagination | Object | {}  | (optional) props for [gilbitron/laravel-vue-pagination](https://github.com/gilbitron/laravel-vue-pagination#props) |
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,4 +13,4 @@ @@
               );
             }
           }
-        }(window.location))</script><link href=/laravel-vue-datatable/css/app.a12833b9.css rel=preload as=style><link href=/laravel-vue-datatable/css/chunk-vendors.f5109e5a.css rel=preload as=style><link href=/laravel-vue-datatable/js/app.13e15f85.js rel=preload as=script><link href=/laravel-vue-datatable/js/chunk-vendors.ba41ea86.js rel=preload as=script><link href=/laravel-vue-datatable/css/chunk-vendors.f5109e5a.css rel=stylesheet><link href=/laravel-vue-datatable/css/app.a12833b9.css rel=stylesheet></head><body class=min-h-100><noscript><strong>We're sorry but laravel-vue-datatable doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/laravel-vue-datatable/js/chunk-vendors.ba41ea86.js></script><script src=/laravel-vue-datatable/js/app.13e15f85.js></script></body></html>
+        }(window.location))</script><link href=/laravel-vue-datatable/css/app.a12833b9.css rel=preload as=style><link href=/laravel-vue-datatable/css/chunk-vendors.1e6085d0.css rel=preload as=style><link href=/laravel-vue-datatable/js/app.e5a4068f.js rel=preload as=script><link href=/laravel-vue-datatable/js/chunk-vendors.17a48e06.js rel=preload as=script><link href=/laravel-vue-datatable/css/chunk-vendors.1e6085d0.css rel=stylesheet><link href=/laravel-vue-datatable/css/app.a12833b9.css rel=stylesheet></head><body class=min-h-100><noscript><strong>We're sorry but laravel-vue-datatable doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/laravel-vue-datatable/js/chunk-vendors.17a48e06.js></script><script src=/laravel-vue-datatable/js/app.e5a4068f.js></script></body></html>