diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte index 21c0c256..50ac8c6d 100644 --- a/src/DataTable/ToolbarSearch.svelte +++ b/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;