Filtering example

[cmdcolin]

Hi there, this is a random PR for an extra storybook for "filtering" the tree. It's just an idea, in case it helps.

I just found in my own app that I did need to run recomputeTree on filter text changing, and was gonna make an issue for it before figuring it out.

I am also very likely not filtering the tree in a very efficient way here either, if there is a better approach for example integrated into the tree walker maybe that could be added too :)

Thanks for the library!

[bharatpatil]

Thanks for this PR.

What if there are multiple root nodes?

[cmdcolin]

my understanding is that when there are multiple root nodes, you would probably still have a top level root with tree.children.length, it is just that the tree walker doesn't yield the root level node https://github.com/Lodin/react-vtree/blob/master/__stories__/MultipleRoots.story.tsx#L84-L86

[nosferatu500]

Easy solution:

Call filterTree for each root.

And instead of return your template when result is null:
{ name: 'no results', children: [], id: 'na', nestingLevel: 0, };

you can return empty object or null and filter it later from filtered result. It looks more better when you just hide empty nodes instead of comment each as 'no results'

Anyway thank you for this. I used it as base for my own filter solution.

[Tenshinra]

Any way to filter but keep the opened nodes? If we set isOpenByDefault to false (so we start with the tree not expanded), and we expand some nodes, and then filter, the nodes will not remain expanded. Any way to avoid this?

[Tenshinra]

Nervermind, we can use the async prop for the tree and it keeps the nodes open, don't mind me :)