react-tree-component

Description

React Tree Component for showing simple hiearchy structures on the UI. Component is based on rc-tree (https://github.com/react-component/tree) component.

Installation

npm install @opuscapita/react-tree-component

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

Prop name	Type	Default	Description
treeId	string	defaultTree	Tree identifier
className	string	''	Tree container custom class for styling
iconClass	string	'carets'	FontAwesome content based indicators:
		chevron	nodes as chevrons
		carets	nodes as carets
		arrow	nodes as arrows
onExpand	Function	() => {}	Handling the node expand. Takes 'expandedKeys' as parameter jsx onExpand(expKeys) { console.log(expKeys, arguments); }
onSelect	Function	() => {}	Handling the item select. Takes 'selectedKeys' and 'info' (event object to get node)as parameter jsx onSelect(selKeys, info) { console.log(selKeys, info); }
onCheck	Function	() => {}	Handling the item checked
onDragDrop	Function	() => {}	Fires when item is dragged and dropped
onOrderButtonClick	Function	undefined	Fires when ordering arrows are clicked
isDragDropLegal	Function	undefined	This callback is executed before completing drag n' drop action. Function should return a bool
showIcon	Boolean	false	Whether show or hide node guide lines
checkable	Boolean	false	Whether show or hide checkboxes from tree
selectable	Boolean	false	Whether item can be selected.
disabled	Boolean	false	Disables all node items checkboxes.
draggable	Boolean	false	Whether item can be dragged around.
defaultExpandAll	Boolean	false	Expand all nodes by default.
			Note! For better performance do not
			enable this for large dataSets.
treeData	Array	[]	Array of node objects.
dataLookUpKey	String	'key'	Unique identifier of data item.
dataLookUpValue	String	'parent'	Representative value of data item.
dataLookUpLeafValue	String	undefined	Representative value of leaf data item (if differs from dataLookUpValue).
dataLookUpChildren	String	'children'	Data item property to identifiy subitems
checkedKeys	Array	[]	Array of checked items (ids)
expandedKeys	Array	[]	Array of expanded items (ids)
defaultExpandedKeys	Array	[]	Array of items that are expanded by default (ids). Use expandedKeys instead, if you're using 'handleExpandedKeysManually'
selectedKeys	Array	[]	Array of selected items (ids)
deselectOnContainerClick	Boolean	true	Deselects all selected keys when not clicking on any particular item
showExpandAll	Boolean	false	Show expand all toggle
title	String	undefined	Tree title
headerRight	Node	undefined	Content displayed on the right side of the header
showOrderingArrows	Boolean	false	Shows arrows for reordering the tree items. (if you don't want to use (flawed) drag n' drop)
handleExpandedKeysManually	Boolean	false	Use this, if you want a full control of expanded keys. Don't use this, if you want rc-tree to handle node expansion automatically

Code example

import React from 'react';
import { OCTreeView } from '@opuscapita/react-tree-component';   

export default class TreeView extends React.Component {
  const familyData = [
    {
      personId: '100',
      name: 'John Doe',
      siblings: [
        { personId: '100100', name: 'Martha Doe', siblings: [] },
        { personId: '100200', name: 'Jonathan Doe', siblings: [ { personId: '100200100', name: 'Mike Doe', siblings: [] }] },
      ], 
    },
    {
      personId: '200',
      name: 'Haley Miley',
      siblings: [
        { personId: '200100', name: 'Cyrus Miley', siblings: [] },
      ],
    },
  ]; 
  const treeConfig = {
    treeData: exampleData,
    treeId: 'FamilyTree',
    checkable: true,
    selectable: false,
    defaultExpandAll: false,
    showIcon: false,
    dataLookUpKey: 'personId',
    dataLookUpValue: 'name',
    dataLookUpChildren: 'siblings',
    disableCheckbox: true,
  };
  render() {
    return (
      <OCTreeView {...treeConfig} />
    );
  }
}