react-vtree icon indicating copy to clipboard operation
react-vtree copied to clipboard

I didn't find any where in the readme about sorting & filter feature ?

Open PoojaMgr opened this issue 4 years ago • 1 comments

Hi @Lodin ,

I am working on the project. So the problem here are -

  1. Rendering of giant data of nodes in tree (approx. 2k-3k)
  2. Have filter & sorting feature
  3. Performance issue of page due to such huge size of data

However, in the doc, I didn't find anywhere how to tackle with sorting & filtering feature. It would be really great, if you can direct me to the doc where these things are mentioned ?

PoojaMgr avatar Feb 16 '22 09:02 PoojaMgr

Could you link an example where you've seen sorting of a tree structure?

For filtering I think you're "gonna have a bad time" if you're trying to show/hide nodes that match certain filters. You could however use the recomputeTree function on the tree ref to expand all nodes matching a specific filter using the subtreeCallback function. If, however, youre experiencing performance issues I would suggest not manipulating the tree all at once with a relatively complicated filter. In this case where performance is an issue I would recommend maintaining an index of the current node matching a filter and providing a button that will scroll the user to the next node matching that filter.

If you're experiencing performance issues due to tree size you might want to consider asynchronously building the tree.

demo: https://lodin.github.io/react-vtree/?path=/story/tree--async-data-with-placeholder code: https://github.com/Lodin/react-vtree/blob/master/stories/AsyncData.story.tsx

note in the tree walker generator function the if condition that checks if the parent's data was downloaded:

if (parentMeta.data.downloaded) {

gregjoeval avatar Aug 30 '22 15:08 gregjoeval