minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Search

aslanalyiev opened this issue · comments

commented

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

@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?

commented

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 :)