feat(toolbar-search): support auto-filterable rows (#1179)

Closes #591

src/DataTable/ToolbarSearch.svelte

@@ -16,6 +16,18 @@
   /** Set to `true` to disable the search bar */
   export let disabled = false;
 
+  /**
+   * Set to `true` to filter table rows using the search value.
+   *
+   * If `true`, the default search excludes `id`, `cells` fields and
+   * only does a basic comparison on string and number type cell values.
+   *
+   * To implement your own client-side filtering, pass a function
+   * that accepts a row and value and returns a boolean.
+   * @type {boolean | ((rows: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean)}
+   */
+  export let shouldFilterRows = false;
+
   /** Specify the tabindex */
   export let tabindex = "0";
 
@@ -25,9 +37,36 @@
    */
   export let ref = null;
 
-  import { tick } from "svelte";
+  import { tick, getContext } from "svelte";
   import Search from "../Search/Search.svelte";
 
+  const { tableRows } = getContext("DataTable");
+
+  $: originalRows = tableRows ? [...$tableRows] : [];
+  $: if (shouldFilterRows) {
+    let rows = originalRows;
+
+    if (value.trim().length > 0) {
+      if (shouldFilterRows === true) {
+        rows = rows.filter((row) => {
+          return Object.entries(row)
+            .filter(([key]) => !["cells", "id"].includes(key))
+            .some(([key, _value]) => {
+              if (typeof _value === "string" || typeof _value === "number") {
+                return (_value + "")
+                  ?.toLowerCase()
+                  .includes(value.trim().toLowerCase());
+              }
+            });
+        });
+      } else if (typeof shouldFilterRows === "function") {
+        rows = rows.filter((row) => shouldFilterRows(row, value) ?? false);
+      }
+    }
+
+    tableRows.set(rows);
+  }
+
   async function expandSearch() {
     if (disabled || persistent || expanded) return;
     expanded = true;