Table custom debounce value

Author: pascalbaljet

lib/Components/Table.vue

@@ -27,13 +27,20 @@ export default {
         defaultVisibleToggleableColumns: {
             type: Array,
             required: true
+        },
+
+        searchDebounce: {
+            type: Number,
+            required: false,
+            default: 350
         }
     },
 
     data() {
         return {
             visibleColumns: [],
-            forcedVisibleSearchInputs: []
+            forcedVisibleSearchInputs: [],
+            debounceUpdateQuery: null
         };
     },
 
@@ -55,6 +62,15 @@ export default {
         }
     },
 
+    created() {
+        /*
+         * Debounces the update query.
+         */
+        this.debounceUpdateQuery = debounce(function(key, value, $el) {
+            this.updateQuery(key, value, $el);
+        }, this.searchDebounce);
+    },
+
     mounted(){
         const query = this.getCurrentQuery();
 
@@ -172,17 +188,10 @@ export default {
         /*
          * Returns a boolean whether the key should be visible.
          */
-        isForcedVisible(key){
+        isForcedVisible(key) {
             return this.forcedVisibleSearchInputs.includes(key);
         },
 
-        /*
-         * Debounces the update query with 350ms.
-         */
-        debounceUpdateQuery: debounce(function(key, value, $el) {
-            this.updateQuery(key, value, $el);
-        }, 350),
-
         /*
          * Parses the window's current query as an object.
          */

resources/views/table/table.blade.php

@@ -1,6 +1,7 @@
 <SpladeTable {{ $attributes->except('class') }}
     :striped="@js($striped)"
     :columns="@js($table->columns())"
+    :search-debounce="@js($searchDebounce)"
     :default-visible-toggleable-columns="@js($table->defaultVisibleToggleableColumns())"
 >
     <template #default="{!! $scope !!}">

src/Components/Table.php

@@ -20,8 +20,12 @@ public function __construct(
         public SpladeTable $for,
         public bool $striped = false,
         public bool $headless = false,
-        public string $scope = 'table'
+        public string $scope = 'table',
+        public ?int $searchDebounce = null,
     ) {
+        $this->searchDebounce = is_null($searchDebounce)
+            ? SpladeTable::getDefaultSearchDebounce()
+            : $searchDebounce;
     }
 
     /**

src/SpladeTable.php

@@ -37,6 +37,8 @@ class SpladeTable
 
     private static array $defaultPerPageOptions = [15, 30, 50, 100];
 
+    private static int $defaultSearchDebounce = 350;
+
     /**
      * Creates a new instance.
      *
@@ -124,6 +126,27 @@ public static function defaultPerPageOptions(array $perPageOptions)
         static::$defaultPerPageOptions = $perPageOptions;
     }
 
+    /**
+     * Get the default debounce value.
+     *
+     * @return int
+     */
+    public static function getDefaultSearchDebounce(): int
+    {
+        return static::$defaultSearchDebounce;
+    }
+
+    /**
+     * Set a default debounce value.
+     *
+     * @param  int  $milliseconds
+     * @return void
+     */
+    public static function defaultSearchDebounce(int $milliseconds)
+    {
+        static::$defaultSearchDebounce = max(0, $milliseconds);
+    }
+
     /**
      * Set a default for global search.
      *