sd-treeview

please flow this link for document https://folder-treeview.web.app/ a folders and files view in tree-view formate

use this Component in this Way

<Treeview treeViewData={treeViewData} click:{click}

now the formate of treeViewData is : treeViewData= [ { name: "Local Disk(C:)", folder: true, children: [ { name: "index.html", folder: false, icon: "🗎", iconCss: { color: "red", size: "20px", }, }, ], isPress: false, istextPress: false, }, { name: "Local Disk(D:)", folder: true, children: [ { name: "index.html", folder: false, icon: "🗎", }, { name: "sample.css", folder: false, icon: "🗝", }, { name: "Local Disk(F:)", folder: true, children: [ { name: "index.html", folder: false, icon: "🗎", }, { name: "Local Disk(E:)", folder: true, children: [ { name: "index.html", folder: false, icon: "🗎", iconCss: { size: "15px", color: "red", }, textCss: { color: "red", size: "10px", }, }, ], isPress: false, istextPress: false, }, ], isPress: false, istextPress: false, }, ], isPress: false, istextPress: false, }, ];

please add isPress and istextPress two and click function is a function that provide after click information

click fun define this way: click={(e)=>console.log(e)}

Now , Here This is The FolderStructure Here name : is the Short name of Folder, address :is the full path of the folder; folder: here it take a boolean value that deine it is a folder or not , children:[] : this is all child of that folder, isPress: this define open the folder or not, istextPress:this also define press on text or not

{ name: "Local Disk(C:)", folder: true, children: [ { name: "index.html", folder: false, icon: "🗎", iconCss: { color: "red", size: "20px", }, }, ], isPress: false, istextPress: false, },

now file or children of folder

name : this is the name of the file folder : this take false so define it is a file icon : this take only string of file icon then iconCss take only two formate color and size also have textCss this also take color formate and size formate

name: "index.html", folder: false, icon: "🗎", iconCss: { color: "red", size: "20px", } textCss:{ color:"blue", size:"10px" }