feat(table): make debounceSearch a global option (#912)

* fix(table): debounce function not called * feat(table): make debounceSearch a global option
oruga-ui · Apr 29, 2024 · 517598f · 517598f
1 parent 10ee451
commit 517598f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/packages/docs/components/Table.md b/packages/docs/components/Table.md
@@ -57,7 +57,7 @@ title: Table
 | customIsChecked       | Custom method to verify if row is checked, works when is checkable. Useful for backend pagination                         | (row: unknown, data: unknown[]) =&gt; boolean | -                                                                               |                                                                                                                                                                   |
 | customRowKey          | Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended)         | string                                        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;customRowKey: undefined<br>}</code>           |
 | data                  | Table data                                                                                                                | unknown[]                                     | -                                                                               | Default function (see source code)                                                                                                                                |
-| debounceSearch        | Filtering debounce time (in milliseconds)                                                                                 | number                                        | -                                                                               |                                                                                                                                                                   |
+| debounceSearch        | Filtering debounce time (in milliseconds)                                                                                 | number                                        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;debounceSearch: undefined<br>}</code>         |
 | defaultSort           | Sets the default sort column and order — e.g. ['first_name', 'desc']                                                      | string \| string[]                            | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;defaultSort: undefined<br>}</code>            |
 | defaultSortDirection  | Sets the default sort column direction on the first click                                                                 | string                                        | `asc`, `desc`                                                                   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;defaultSortDirection: "asc"<br>}</code>       |
 | detailIcon            | Icon name of detail action                                                                                                | string                                        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;detailIcon: "chevron-right"<br>}</code>       |

diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
@@ -236,7 +236,10 @@ const props = defineProps({
     /** Add a native event to filter */
     filtersEvent: { type: String, default: "" },
     /** Filtering debounce time (in milliseconds) */
-    debounceSearch: { type: Number, default: undefined },
+    debounceSearch: { 
+        type: Number, 
+        default: () => getOption("table.debounceSearch", undefined),
+    },
     /** Show header */
     showHeader: {
         type: Boolean,
@@ -928,7 +931,7 @@ watch(
     filters.value,
     (value) => {
         if (props.debounceSearch)
-            useDebounce(() => handleFiltersChange(value), props.debounceSearch);
+            useDebounce(() => handleFiltersChange(value), props.debounceSearch)();
         else handleFiltersChange(value);
     },
     { deep: true },

diff --git a/packages/oruga/src/components/types.ts b/packages/oruga/src/components/types.ts
@@ -1263,6 +1263,8 @@ but will set body to position fixed, might break some layouts. */
                 detailKey: string;
                 /** Whether table is striped */
                 striped: boolean;
+                /** Filtering debounce time (in milliseconds) */
+                debounceSearch: number;
             }>;
         tabs?: ComponentConfigBase &
             Partial<{