minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
515 stars 69 forks source link

Search #198

Open aslanalyiev opened 1 year ago

aslanalyiev commented 1 year ago

Is your feature request related to a problem? Please describe. Sometimes it is hard to implement a search with nested folders

Describe the solution you'd like It would be cool to implement a search option from the box

minop1205 commented 1 year ago

@aslanalyiev I'm not sure what the UI image is for filtering a tree view by search, do you have a specific image?

Or do you have any references?

aslanalyiev commented 1 year ago

I meant to provide a prop where a user can put a string and TreeComponent will automatically filter data(nested as well)

const treeDataWithALotOfNestedChildren = [....];

const searchText = 'name of some element from the tree data'; //some string that a user provided to find needed the tree elements

<Tree
   tree={treeDataWithALotOfNestedChildren}
   ...requiredProps
   searchQuery={searchText}
/>

result:

New filtered tree with the preservation of the structure(e.g. if a deeply nested child has a lot of parents that don't meet searchText they also should be rendered).

initialTree:

titleR
  title2
     title3
titleR2

searchText = title3

result:

titleR
  title2
     title3

smth like that :)

1pone commented 3 months ago

any update👀