mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
fix(data-table): handle ToolbarSearch
filtering in DataTable
(#2037)
This commit is contained in:
parent
1acd713537
commit
3192824322
2 changed files with 36 additions and 24 deletions
|
@ -147,6 +147,10 @@
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
const batchSelectedIds = writable(false);
|
const batchSelectedIds = writable(false);
|
||||||
const tableRows = writable(rows);
|
const tableRows = writable(rows);
|
||||||
|
|
||||||
|
// Store a copy of the original rows for filter restoration.
|
||||||
|
$: originalRows = [...rows];
|
||||||
|
|
||||||
$: thKeys = headers.reduce((a, c) => ({ ...a, [c.key]: c.key }), {});
|
$: thKeys = headers.reduce((a, c) => ({ ...a, [c.key]: c.key }), {});
|
||||||
const resolvePath = (object, path) => {
|
const resolvePath = (object, path) => {
|
||||||
if (path in object) return object[path];
|
if (path in object) return object[path];
|
||||||
|
@ -164,6 +168,36 @@
|
||||||
selectedRowIds = [];
|
selectedRowIds = [];
|
||||||
if (refSelectAll) refSelectAll.checked = false;
|
if (refSelectAll) refSelectAll.checked = false;
|
||||||
},
|
},
|
||||||
|
filterRows: (searchValue, customFilter) => {
|
||||||
|
const value = searchValue.trim().toLowerCase();
|
||||||
|
|
||||||
|
if (value.length === 0) {
|
||||||
|
// Reset to original rows.
|
||||||
|
tableRows.set(originalRows);
|
||||||
|
return originalRows.map((row) => row.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
let filteredRows = [];
|
||||||
|
|
||||||
|
if (typeof customFilter === "function") {
|
||||||
|
// Apply custom filter if provided.
|
||||||
|
filteredRows = originalRows.filter((row) => customFilter(row, value));
|
||||||
|
} else {
|
||||||
|
// Default filter checks all non-id fields for a basic, case-insensitive match (non-fuzzy).
|
||||||
|
filteredRows = originalRows.filter((row) => {
|
||||||
|
return Object.entries(row)
|
||||||
|
.filter(([key]) => key !== "id")
|
||||||
|
.some(([key, _value]) => {
|
||||||
|
if (typeof _value === "string" || typeof _value === "number") {
|
||||||
|
return (_value + "")?.toLowerCase().includes(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
tableRows.set(filteredRows);
|
||||||
|
return filteredRows.map((row) => row.id);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
let expanded = false;
|
let expanded = false;
|
||||||
|
|
|
@ -49,32 +49,10 @@
|
||||||
import { tick, getContext } from "svelte";
|
import { tick, getContext } from "svelte";
|
||||||
import Search from "../Search/Search.svelte";
|
import Search from "../Search/Search.svelte";
|
||||||
|
|
||||||
const { tableRows } = getContext("DataTable") ?? {};
|
const ctx = getContext("DataTable") ?? {};
|
||||||
|
|
||||||
$: originalRows = tableRows ? [...$tableRows] : [];
|
|
||||||
$: if (shouldFilterRows) {
|
$: if (shouldFilterRows) {
|
||||||
let rows = originalRows;
|
filteredRowIds = ctx?.filterRows(value, shouldFilterRows);
|
||||||
|
|
||||||
if (value.trim().length > 0) {
|
|
||||||
if (shouldFilterRows === true) {
|
|
||||||
rows = rows.filter((row) => {
|
|
||||||
return Object.entries(row)
|
|
||||||
.filter(([key]) => key !== "id")
|
|
||||||
.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);
|
|
||||||
filteredRowIds = rows.map((row) => row.id);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function expandSearch() {
|
async function expandSearch() {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue