Merge pull request #6367 from jacobtylerwalls/tree-filter-by-getter

#6374 Tree: allow `filterBy` to be a getter
primefaces · Sep 24, 2024 · 74074bc · 74074bc
2 parents e4d431e + 42f2c6f
commit 74074bc
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
@@ -65772,9 +65772,9 @@
                             "name": "filterBy",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "string | ((node: TreeNode) => string)",
                             "default": "label",
-                            "description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
+                            "description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. A callable taking a TreeNode can be provided instead of a list of field names."
                         },
                         {
                             "name": "filterMode",

diff --git a/packages/primevue/scripts/components/tree.js b/packages/primevue/scripts/components/tree.js
@@ -50,9 +50,9 @@ const TreeProps = [
     },
     {
         name: 'filterBy',
-        type: 'string',
+        type: 'string | ((node: TreeNode) => string)',
         default: 'label',
-        description: 'When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.'
+        description: 'When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. A callable taking a TreeNode can be provided instead of a list of field names.'
     },
     {
         name: 'filterMode',

diff --git a/packages/primevue/src/tree/BaseTree.vue b/packages/primevue/src/tree/BaseTree.vue
@@ -43,7 +43,7 @@ export default {
             default: false
         },
         filterBy: {
-            type: String,
+            type: String | ((node) => String),
             default: 'label'
         },
         filterMode: {

diff --git a/packages/primevue/src/tree/Tree.d.ts b/packages/primevue/src/tree/Tree.d.ts
@@ -277,10 +277,10 @@ export interface TreeProps {
      */
     filter?: boolean | undefined;
     /**
-     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. A callable taking a TreeNode can be provided instead of a list of field names.
      * @defaultValue label
      */
-    filterBy?: string | undefined;
+    filterBy?: string | ((node: TreeNode) => string) | undefined;
     /**
      * Mode for filtering.
      * @defaultValue lenient

diff --git a/packages/primevue/src/tree/Tree.vue b/packages/primevue/src/tree/Tree.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { resolveFieldData } from '@primeuix/utils/object';
+import { isFunction, resolveFieldData } from '@primeuix/utils/object';
 import SearchIcon from '@primevue/icons/search';
 import SpinnerIcon from '@primevue/icons/spinner';
 import IconField from 'primevue/iconfield';
@@ -222,7 +222,7 @@ export default {
     computed: {
         filteredValue() {
             let filteredNodes = [];
-            const searchFields = this.filterBy.split(',');
+            const searchFields = isFunction(this.filterBy) ? [this.filterBy] : this.filterBy.split(',');
             const filterText = this.filterValue.trim().toLocaleLowerCase(this.filterLocale);
             const strict = this.filterMode === 'strict';