OpusCapita / react-hierarchy-tree

Hierarchy tree component that uses @opuscapita/react-grid and @opuscapita/react-treeview components

react-hierarchy-tree

Description

Describe the component here

Installation

npm install @opuscapita/react-hierarchy-tree

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
idKey	string	'id'	Tree item's unique identifier property
valueKey	string	'name'	Tree item's node name property
leafValueKey	string	undefined	Tree item's leaf name property (if differs from valueKey)
childKey	string	'children'	Property where you'll find tree item's children
defaultExpandedKeys	array	[]	Array of items that are expanded by default (ids).
lockedKey	string	undefined	Property that tells whether node or it's parents can be deleted, moved, etc.
sortKey	string	undefined	Tree item's property used for grid sorting (if needed)
treeData	array	[]	Array of tree items
maxLevel	number	0	Maximal allowed number of hierarchy levels (if greater than 0)
maxValueLength	number	undefined	Maximal allowed number of characters of the item's node name (if needed)
onChange	func	required	onChange callback
onPreventDelete	func	undefined	Function that's called when deleting a locked item
grid	gridShape	required	@opuscapita/react-grid. See documentation for details
gridColumns	gridColumnShape	required	@opuscapita/react-grid. See documentation for details

Code example

import React from 'react';
import HierarchyTree from '@opuscapita/react-hierarchy-tree';

export default class TreeExample extends React.Component {
  render() {
    return (
      <HierarchyTree
        propName="propValue"
      />
    );
  }
}