How do I use filterTreeNode prop?

[gustavomm19]

I am trying to make a search bar to filter the nodes as I type in, can I use this prop to make that?

[iloveip]

I have the same question. Is there anyway to do that?

[Dimitri-codePop]

Do you find how to use filterTreeNode ?

[v-tikhonov-sc]

The same question

[HarishRh]

@here any update on how to use that node?

[AHorak]

Same problem! filterTreeNode will be called for every node, but i don't know how the filtering is done.

[AHorak]

@all Has anyone found the solution?

[AHorak]

I am trying to make a search bar to filter the nodes as I type in, can I use this prop to make that?

Hi @gustavomm19 , my function looks like this:

function onFilterTreeNode(treeNode: EventDataNode<DataNode>): boolean {
        Logger.Debug("onFilterTreeNode");
        if (!filterText || filterText?.length === 0) {
            Logger.Debug("onFilterTreeNode X1");
            return true;
        }

        if (
            filterText &&
            treeNode.title &&
            treeNode.title?.toString().toLowerCase().search(filterText.toLowerCase()) !== -1
        ) {
            Logger.Debug("onFilterTreeNode X2 (return true) title=" + treeNode.title);
            return true;
        } else {
            Logger.Debug("onFilterTreeNode X3 (return false) title=" + treeNode.title);
            return false;
        }
    }

it gets called, but al items are still visible.

filterText is filled by my searchbar

const [filterText, setFilterText] = useState<string | undefined>();

[choweiyuan]

Found the example here but is pretty much what has been said before,

It highlights the row that meets the filter condition, won't remove the irrelevant nodes

[jhvanderven]

  const [search, setSearch] = useState('')
  const [filteredTreeItems, setFilteredTreeItems] = useState<TreeItem[]>([])
  
  const searchChanged = (e: ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value)
  }

  useEffect(() => {
    // from here: https://stackoverflow.com/questions/45289854/how-to-effectively-filter-tree-view-retaining-its-existing-structure
    const filter = (tree: TreeItem[], search: string) => {
      const getItems = (result: TreeItem[], item: TreeItem) => {
        // case sensitive search
        if (item.name.indexOf(search) >= 0) {
          result.push(item)
          return result
        }
        if (Array.isArray(item.items)) {
          const items = item.items.reduce(getItems, [])
          if (items.length) {
            result.push({ ...item, items })
          }
        }
        return result
      }

      return tree.reduce(getItems, [])
    }

    setFilteredTreeItems(search && search !== '' ? filter(treeItems, search) : [])
  }, [search, treeItems])

      <Input
        type="text"
        onChange={searchChanged}
        value={search}
        // some space between the search and the tree
        style={{ width: '200px', paddingBottom: '10px' }}
      />
      <Tree
        // ... other props
        treeData={search ? filteredTreeItems: treeItems}
      />