feat(ui): add searchDebounceMs/filterDebounceMs to useTable complete mode (#34127)

* feat(ui): add internal useDebouncedValue hook for Table Signed-off-by: Johan Persson <johanopersson@gmail.com> * feat(ui): expose searchDebounceMs and filterDebounceMs on UseTableCompleteOptions Signed-off-by: Johan Persson <johanopersson@gmail.com> * feat(ui): debounce search/filter in useTable complete mode pipeline Signed-off-by: Johan Persson <johanopersson@gmail.com> * docs(ui): add SearchWithDebounce Table dev story Signed-off-by: Johan Persson <johanopersson@gmail.com> * docs(ui): document searchDebounceMs/filterDebounceMs and fix Table search note Signed-off-by: Johan Persson <johanopersson@gmail.com> * docs(ui): add searchDebounceMs/filterDebounceMs to Table props reference Signed-off-by: Johan Persson <johanopersson@gmail.com> * docs(ui): note controlled-callback behavior on Table debounce props Signed-off-by: Johan Persson <johanopersson@gmail.com> * chore(ui): regenerate API report for useTable debounce options Signed-off-by: Johan Persson <johanopersson@gmail.com> * chore(ui): changeset for useTable complete-mode debounce options Signed-off-by: Johan Persson <johanopersson@gmail.com> * chore: accept 'debouncing' in Vale vocabulary Signed-off-by: Johan Persson <johanopersson@gmail.com> --------- Signed-off-by: Johan Persson <johanopersson@gmail.com>
2026-05-05 16:45:18 +02:00
parent ddca41f775
commit 25909ba27a
9 changed files with 211 additions and 13 deletions
@@ -126,9 +126,9 @@ Configure page size and available options through `paginationOptions`. The table

 ### Search

-The `useTable` hook returns a `search` object with `value` and `onChange` properties, ready to connect to a search input. With `mode: 'complete'`, provide a `searchFn` that filters the dataset based on the search query.
+The `useTable` hook returns a `search` object with `value` and `onChange` properties, ready to connect to a search input. With `mode: 'complete'`, provide a `searchFn` that filters the dataset based on the search query. When the search query changes, pagination resets to the first page automatically.

-The search state is debounced internally, so rapid typing doesn't trigger excessive re-filtering. When the search query changes, pagination resets to the first page automatically.
+In `complete` mode, set `searchDebounceMs` (and/or `filterDebounceMs`) to defer the filtering pipeline until typing settles — useful for large datasets. Both default to `0` (no debounce). The controlled `search` / `onSearchChange` (and `filter` / `onFilterChange`) surface continues to fire on every change. For `offset` and `cursor` modes, requests are already debounced internally, so these options don't apply.

 For server-side search with `offset` or `cursor` modes, the search query is passed to your `getData` function. See [Server-Side Data](#server-side-data).

@@ -157,6 +157,28 @@ export const useTableOptionsPropDefs: Record<string, PropDef> = {
      </>
    ),
  },
+  searchDebounceMs: {
+    type: 'number',
+    description: (
+      <>
+        Trailing-edge debounce delay (ms) applied to the search value before it
+        reaches <Chip>searchFn</Chip>. Defaults to <Chip>0</Chip> (no debounce).
+        Does not affect the controlled <Chip>onSearchChange</Chip> callback.
+        Only used with <Chip>complete</Chip> mode.
+      </>
+    ),
+  },
+  filterDebounceMs: {
+    type: 'number',
+    description: (
+      <>
+        Trailing-edge debounce delay (ms) applied to the filter value before it
+        reaches <Chip>filterFn</Chip>. Defaults to <Chip>0</Chip> (no debounce).
+        Does not affect the controlled <Chip>onFilterChange</Chip> callback.
+        Only used with <Chip>complete</Chip> mode.
+      </>
+    ),
+  },
 };

 export const useTableReturnPropDefs: Record<string, PropDef> = {