Description:
This is a React Treeview component which is customizable on every level.
More features:
- Checkboxes supported.
- Custom delete buttons.
- Lazy-load data asynchronously.
- Custom loading indicator.
- Delete animation.
- Unlimited nesting levels.
- Granular control over when to show expand, checkbox or delete options.
- Multi-select/unselect checkbox (shift + Check) like Gmail.
- Control the node adding/delete animation speed.
Installation:
# NPM $ npm install react-super-treeview --save
Usage:
import React, { Component } from 'react';
import SuperTreeView from 'react-super-treeview';
import 'style.css';
export default class extends Component {
constructor (){
super();
this.state = {
data: [
{
id: 1,
name: 'Parent A'
},
{
id: 2,
name: 'Parent B',
isExpanded: true,
isChecked: true,
children: [
{
id: 21,
name: 'Child 1',
isExpanded: true,
children: [
{
id: 5,
name: "Grand Child",
isExpanded: true
}
]
},
{
id: 22,
name: 'Child 2'
},
{
id: 23,
name: 'Child 3'
},
{
id: 24,
name: 'Child 4'
}
]
}
]
}
}
render(){
const codeString = `this.state = {
data: [
{
id: 1,
name: 'Parent A'
},
{
id: 2,
name: 'Parent B',
isExpanded: true,
isChecked: true,
children: [
{
id: 21,
name: 'Child 1',
isExpanded: true,
children: [
{
id: 5,
name: "Grand Child",
isExpanded: true
}
]
},
{
id: 22,
name: 'Child 2'
},
{
id: 23,
name: 'Child 3'
},
{
id: 24,
name: 'Child 4'
}
]
}
]
}
<SuperTreeView
data={ this.state.data }
onUpdateCb={(updatedData)=>{
this.setState({data: updatedData})
}}
/>`;
return (
<div>
<h2>Basic</h2>
<hr/>
<div className="row">
<div className="col-xs-12 col-lg-8 col-md-8">
<div className="panel panel-default">
<div className="panel-body">
<SuperTreeView
data={ this.state.data }
onUpdateCb={(updatedData)=>{
this.setState({data: updatedData})
}}
/>
</div>
</div>
</div>
</div>
<h5>Source code:</h5>
<SyntaxHighlighter language='javascript' style={style}>
{codeString}
</SyntaxHighlighter>
</div>
)
}
}Default props.
depth: 0,
deleteElement: <div>(X)</div>,
getStyleClassCb: (/* node, depth */) => {
return '';
},
isCheckable: (/* node, depth */) => {
return true;
},
isDeletable: (/* node, depth */) => {
return true;
},
isExpandable: (/* node, depth */) => {
return true;
},
keywordChildren: 'children',
keywordChildrenLoading: 'isChildrenLoading',
keywordLabel: 'name',
keywordKey: 'id',
loadingElement: <div>loading...</div>,
noChildrenAvailableMessage: 'No data found',
onCheckToggleCb: (/* Array of nodes, depth */) => {},
onDeleteCb: (/* node, updatedData, depth */) => { return true },
onExpandToggleCb: (/* node, depth */) => {},
onUpdateCb: (/* updatedData, depth */) => {},
transitionEnterTimeout: 1200,
transitionExitTimeout: 1200Preview:
