From e26f04a16b240ef128a95b17e4f3cb930eddd748 Mon Sep 17 00:00:00 2001 From: Mike Cunningham Date: Tue, 19 Apr 2022 23:48:49 -0400 Subject: [PATCH 1/2] Predicate filter performance/stability improvement --- src/material/table/table-data-source.ts | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/src/material/table/table-data-source.ts b/src/material/table/table-data-source.ts index 119968bab0ac..6f0b24156be8 100644 --- a/src/material/table/table-data-source.ts +++ b/src/material/table/table-data-source.ts @@ -235,24 +235,16 @@ export class _MatTableDataSource< * @param filter Filter string that has been set on the data source. * @returns Whether the filter matches against the data */ - filterPredicate: (data: T, filter: string) => boolean = (data: T, filter: string): boolean => { - // Transform the data into a lowercase string of all property values. - const dataStr = Object.keys(data) - .reduce((currentTerm: string, key: string) => { - // Use an obscure Unicode character to delimit the words in the concatenated string. - // This avoids matches where the values of two columns combined will match the user's query - // (e.g. `Flute` and `Stop` will match `Test`). The character is intended to be something - // that has a very low chance of being typed in by somebody in a text field. This one in - // particular is "White up-pointing triangle with dot" from - // https://en.wikipedia.org/wiki/List_of_Unicode_characters - return currentTerm + (data as {[key: string]: any})[key] + '◬'; - }, '') - .toLowerCase(); - + filterPredicate: ((data: T, filter: string) => boolean) = (data: T, filter: string): boolean => { // Transform the filter by converting it to lowercase and removing whitespace. const transformedFilter = filter.trim().toLowerCase(); - - return dataStr.indexOf(transformedFilter) != -1; + // Loops over the values in the array and returns true if any of them match the filter string + for (let val of Object.values(data)) { + if (val.toLowerCase().includes(transformedFilter)) { + return true; + } + } + return false; }; constructor(initialData: T[] = []) { From 4dd6db2649879947633ade68c2e76dd6382d847d Mon Sep 17 00:00:00 2001 From: Mike Cunningham Date: Wed, 20 Apr 2022 10:35:00 -0400 Subject: [PATCH 2/2] Linted --- src/material/table/table-data-source.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material/table/table-data-source.ts b/src/material/table/table-data-source.ts index 6f0b24156be8..52f637b867f9 100644 --- a/src/material/table/table-data-source.ts +++ b/src/material/table/table-data-source.ts @@ -235,7 +235,7 @@ export class _MatTableDataSource< * @param filter Filter string that has been set on the data source. * @returns Whether the filter matches against the data */ - filterPredicate: ((data: T, filter: string) => boolean) = (data: T, filter: string): boolean => { + filterPredicate: (data: T, filter: string) => boolean = (data: T, filter: string): boolean => { // Transform the filter by converting it to lowercase and removing whitespace. const transformedFilter = filter.trim().toLowerCase(); // Loops over the values in the array and returns true if any of them match the filter string