Tree: Allow filterBy to be a callable #2659

jacobtylerwalls · 2024-09-09T20:42:29Z

jacobtylerwalls
Sep 9, 2024

I have a workaround allowing me to use some "hidden" functionality in <Tree>. Can I contribute a fix upstream that makes my workaround unnecessary?

I have this. It works great for my use case because resolveFieldData() already handles callables:

const filterCallbackWrapped = computed(() => {
    // Access some hidden functionality of the PrimeVue <Tree> to make
    // filter lookups lazy, that is, making use of other reactive state like
    // the selected language.
    // filter-by should be a string, but if we make it something that returns
    // a 1-element array containing a getter when split() is called on it,
    // that getter can return the best label to filter against.
    return {
        split: () => {
            return [
                (node: TreeNode) => bestLabel(node, otherReactiveState.value)
            ];
        },
    };
});

<template>
    <Tree :filter-by="filterCallbackWrapped">
</template>

I don't want to create a new column on my tree node data and calculate and update my tree every time other reactive state changes just in case someone uses the filter box. I'm already templating the tree row content myself. It would just be nice to access this hidden functionality without having to wrap it in something that can have split() called on it.

Would a patch like this be welcome?

diff --git a/packages/primevue/src/tree/Tree.vue b/packages/primevue/src/tree/Tree.vue
index e85aa7d81..a71e46d64 100755
--- 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';