https://github.com/adamkleingit/react-rich-tree
[Not Maintained] A simple yet powerful tree component for React
https://github.com/adamkleingit/react-rich-tree
component react react-component reactjs tree tree-component tree-view treeview
Last synced: about 1 year ago
JSON representation
[Not Maintained] A simple yet powerful tree component for React
- Host: GitHub
- URL: https://github.com/adamkleingit/react-rich-tree
- Owner: adamkleingit
- Created: 2017-09-24T18:30:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-20T15:32:47.000Z (over 7 years ago)
- Last Synced: 2025-04-11T10:18:08.284Z (about 1 year ago)
- Topics: component, react, react-component, reactjs, tree, tree-component, tree-view, treeview
- Language: TypeScript
- Homepage:
- Size: 214 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React Rich Tree
## Not maintained
This project is not currently maintained. Feel free to fork it and use it for your needs.
## A full featured tree component for React
We've built so many projects that required a tree component, and could never find a library that supported all features.
And building your own tree component is not an easy task.
So, we decided to build one for React, with all the features you can think of:
* Simple to use
* Well Documented
* Customizable & Extensible (override field names, custom templates, etc...)
* Keyboard navigation
* Async data
* Drag & Drop
* Select & Multiselect
* Filtering
* Virtual Scrolling
* Save & restore tree state
* Event callbacks
* API for accessing & altering the tree state
* Easily styled (comes with very minimal styling)
## Getting started
`npm i -S react-rich-tree`
```
import { Tree } from 'react-rich-tree';
nodes = [{
id: 1,
name: 'root',
children: [{
id: 2,
name: 'child'
}, {
id: 4,
name: 'child2'
}]
}, {
id: 5,
name: 'root2'
}];
options = {}
onEvent = (event) => console.log(event)
```
## Full example
```
import { Tree, TreeNode, TreeModel, KEYS, TREE_ACTIONS } from 'react-rich-tree';
nodes = [{
id: 1,
name: 'root',
type: 'folder',
children: [{
id: 2,
type: 'file',
name: 'child'
}, {
id: 4,
type: 'file',
name: 'child2'
}]
}, {
id: 5,
type: 'folder',
name: 'root2',
hasChildren: true // async
}];
options = {
childrenField: 'children',
displayField: 'name',
idField: 'id',
getChildren: (node: TreeNode) => http.get(`/children/${node.id}`), // async load children - to be used with `hasChildren` property on the node
actionMapping: { // override key and mouse actions
mouse: {
click: TREE_ACTIONS.TOGGLE_SELECTED,
dblClick: (tree: TreeModel, node: TreeNode, $event: any) => node.toggleExpanded(),
contextMenu: null,
expanderClick: TREE_ACTIONS.TOGGLE_EXPANDED,
drop: TREE_ACTIONS.MOVE_NODE
},
keys: {
[KEYS.RIGHT]: TREE_ACTIONS.DRILL_DOWN,
[KEYS.LEFT]: TREE_ACTIONS.DRILL_UP,
[KEYS.DOWN]: TREE_ACTIONS.NEXT_NODE,
[KEYS.UP]: TREE_ACTIONS.PREVIOUS_NODE,
[KEYS.SPACE]: TREE_ACTIONS.TOGGLE_SELECTED,
[KEYS.ENTER]: TREE_ACTIONS.TOGGLE_SELECTED
}
},
allowDrag: (node: TreeNode) => node.isLeaf, // boolean or function. isLeaf is a function on TreeNode wrapper class
allowDrop: (node: TreeNode) => node.data.type === 'folder', // data is the original data supplied by nodes
levelPadding: 4, // to be used for whole row selection (instead of putting padding on children)
nodeClass: (node: TreeNode) => node.type, // for styling
useVirtualScroll: true,
nodeHeight: 30,
dropSlotHeight: 3,
animateExpand: true,
animateSpeed: 50,
animateAcceleration: 1.1,
scrollOnSelect: true,
getNodeClone: (node: TreeNode) => ({ ...node.data, id: uuid.v4() }), // for dragging with ctrl pressed
TreeNodeComponent: ({ node }) => { node.data.name } ({node.children.length}),
TreeNodeWrapperComponent: MyCustomNodeWrapper, // a component class that extends NodeWrapper component (or replaces it)
TreeNodeFullComponent: MyCustomFullNode, // a component class that extends Node component (or replaces it)
LoadingComponent: ({ node }) => 
}
```
## Storybook
coming soon
## Docs
coming soon
## What's next
We would always love to hear suggestions for features & improvements - just open an issue.
Some things on our mind down the road:
* Context menu
* Checkbox & master checkbox support
* Add Demo & StoryBook
* Add Tests
## Contributing
Run once:
`npm run setup`
Run after changing code:
`npm run build`
`npm run start:example`
Please check the issues / project before starting to work on a feature / bug to make sure it's not already in progress.