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

Closes #591

src/DataTable/DataTable.svelte

@@ -140,6 +140,7 @@
     sortDirection: "none",
   });
   const headerItems = writable([]);
+  const tableRows = writable(rows);
   const thKeys = derived(headerItems, () =>
     headers
       .map(({ key }, i) => ({ key, id: key }))
@@ -155,6 +156,7 @@
     sortHeader,
     tableSortable,
     batchSelectedIds,
+    tableRows,
     resetSelectedRowIds: () => {
       selectAll = false;
       selectedRowIds = [];
@@ -173,7 +175,7 @@
   let refSelectAll = null;
 
   $: batchSelectedIds.set(selectedRowIds);
-  $: rowIds = rows.map((row) => row.id);
+  $: rowIds = $tableRows.map((row) => row.id);
   $: expandableRowIds = rowIds.filter(
     (id) => !nonExpandableRowIds.includes(id)
   );
@@ -193,23 +195,25 @@
   $: if (radio || batchSelection) selectable = true;
   $: tableSortable.set(sortable);
   $: headerKeys = headers.map(({ key }) => key);
-  $: rows = rows.map((row) => ({
-    ...row,
-    cells: headerKeys.map((key, index) => ({
-      key,
-      value: resolvePath(row, key),
-      display: headers[index].display,
-    })),
-  }));
-  $: sortedRows = rows;
+  $: tableRows.set(
+    rows.map((row) => ({
+      ...row,
+      cells: headerKeys.map((key, index) => ({
+        key,
+        value: resolvePath(row, key),
+        display: headers[index].display,
+      })),
+    }))
+  );
+  $: sortedRows = [...$tableRows];
   $: ascending = $sortHeader.sortDirection === "ascending";
   $: sortKey = $sortHeader.key;
   $: sorting = sortable && sortKey != null;
   $: if (sorting) {
     if ($sortHeader.sortDirection === "none") {
-      sortedRows = rows;
+      sortedRows = $tableRows;
     } else {
-      sortedRows = [...rows].sort((a, b) => {
+      sortedRows = [...$tableRows].sort((a, b) => {
         const itemA = ascending
           ? resolvePath(a, sortKey, "")
           : resolvePath(b, sortKey, "");
@@ -236,7 +240,7 @@
     page && pageSize
       ? rows.slice((page - 1) * pageSize, page * pageSize)
       : rows;
-  $: displayedRows = getDisplayedRows(rows, page, pageSize);
+  $: displayedRows = getDisplayedRows($tableRows, page, pageSize);
   $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
 </script>
 

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;