Customizable React Treeview Component – Super Treeview

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

Preview:

Super Treeview

Download Details:

Author: azizali

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/azizali/react-super-treeview

License: MIT

You Might Be Interested In:

Add Comment