Skip to content

Implement Folder Tree in FrontEnd using React and RC-Tree

Notifications You must be signed in to change notification settings

MiaXIA/ReactTreeView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Tree View

Implement a demo for React folder view. Data structure generated by frontend and rendered in frontend using rc-tree with customized row view including selected highlight and row modified buttons.

Example ScreenShot

image

Build and Run Locally

use command in terminal

cd /the path where this folder is
npm install
npm start

Then it will run at localhost:3000

Usage

It can be used with other project by simply included RCTree.js file and provide the variable to render as the data property (also don't forget install rc-tree package and check the css file import path).

import RCTree from "/path to RCTRee.js";

let data = [
    {
      name: 'Mia/Folder1/Note1',
      description: 'You are inside Mia/Folder1/Note1',
      id: 'id-Mia/Folder1/Note1'
    },
    {
      name: 'Mia/Folder1/Note2',
      description: 'You are inside Mia/Folder1/Note2',
      id: 'id-Mia/Folder1/Note2'
    },
    {
      name: 'Mia',
      description: 'You are inside Mia',
      id: 'id-Mia'
    },
    {
      name: 'Mia/ProjectWork/Note1',
      description: 'You are inside Mia/ProjectWork/Note1',
      id: 'id-Mia/ProjectWork/Note1'
    },
    {
      name: 'Mia/ProjectWork/Note2',
      description: 'You are inside Mia/ProjectWork/Note2',
      id: 'id-Mia/ProjectWork/Note2'
    }
  ];

 <RCTree data={data} />

About

Implement Folder Tree in FrontEnd using React and RC-Tree

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published