fix(toolbar-search): re-filter rows if DataTable rows change (#2154)

Fixes #2143

Make `ToolbarSearch` filtering reactive to `DataTable` rows.

Previously, `ToolbarSearch` did not update when `DataTable` rows
changed. Now it subscribes to the context rows and re-runs
`filterRows` in `afterUpdate` to prevent infinite loops.

Author: metonym

src/DataTable/ToolbarSearch.svelte

@@ -46,15 +46,39 @@
    */
   export let ref = null;
 
-  import { tick, getContext } from "svelte";
+  import { tick, getContext, afterUpdate, onMount } from "svelte";
   import Search from "../Search/Search.svelte";
 
   const ctx = getContext("DataTable") ?? {};
 
+  let rows = null;
+  let unsubscribe = null;
+
   $: if (shouldFilterRows) {
-    filteredRowIds = ctx?.filterRows(value, shouldFilterRows);
+    unsubscribe = ctx?.tableRows.subscribe((tableRows) => {
+      // Only update if the rows have actually changed.
+      // This approach works in both Svelte 4 and Svelte 5.
+      if (JSON.stringify(tableRows) !== JSON.stringify(rows)) {
+        rows = tableRows;
+      }
+    });
+  } else {
+    rows = null;
   }
 
+  onMount(() => {
+    return () => {
+      unsubscribe?.();
+    };
+  });
+
+  afterUpdate(() => {
+    // Only filter rows in a callback to avoid an infinite update loop.
+    if (rows !== null) {
+      filteredRowIds = ctx?.filterRows(value, shouldFilterRows);
+    }
+  });
+
   async function expandSearch() {
     await tick();
     if (disabled || persistent || expanded) return;

tests/DataTable/DataTableSearch.test.ts

@@ -182,8 +182,7 @@ describe("DataTableSearch", () => {
     });
   });
 
-  // TODO: fix reactivity
-  it.skip("re-filters rows when toggled", async () => {
+  it("re-filters rows when toggled", async () => {
     render(DataTableSearch);
 
     allRowsRendered();