Interactive-tree NPM

interactive-tree

React tree component. Can be used to display a simple tree or Can be used to display a more complex tree that can

Have its rows dragged and dropped
Extra columns to be placed in to display custom info for each row
Extra columns to be placed in to display icons that can be clicked for each row (to fire callbacks)

npm install --save interactive-tree

Usage

Simple example

Simple tree with only a heading and a simple tree

class Example extends React.Component {
  render () {
    return (
      <Tree
        title="Categories"
        id="categories-tree-id"
        tree={
          {
            children: [
            {
              id: 1,
              name: 'Credit',
              parentId: 0,
              children: [
                {
                  id: 2,
                  name: 'Investing',
                  parentId: 1,
                  children: []
                }
              ]
          }]}}
      />
    )
  }
}

Detailed example

Detailed example showing how to

Allow rows to be moved with 'handleMove'
Extra columns added in to display more information in with 'columns'
Icons added on each row to extend the functionality via 'icons'
fieldNames to allow different names on the tree to be used via 'fieldNames'
Extra information stored in each leaf node which can be used by the 'columns' and 'icons' prop

class Example extends React.Component {
  render () {
    return (
      <Tree
        title="Categories"
        columns={[
          {
            header: "Total",
            func: (leaf) => leaf.netExpenses
          }
        ]}
        icons={[
          {
            class: "fas fa-eye",
            callback: (leaf) =>
              console.log(`Open bucket at leaf id: ${leaf.id}`)
          }
        ]}
        fieldNames={{
          parentId: 'parentBucketId'
        }
        handleMove={(item, newparent) => console.log(item, newparent)}
        tree={
          {
            children: [
            {
              id: 1,
              name: 'Credit',
              parentBucketId: 0,
              netExpenses: '2925.13'
              children: [
                {
                  id: 2,
                  name: 'Investing',
                  parentBucketId: 1,
                  netExpenses: '1342.29'
                  children: []
                }
              ]
          }]}}
      />
    )
  }
}

API

title

Type: string Mandatory: Yes Description: Title for the given tree

tree

Type: tree Mandatory: Yes Description: Data for the tree to display and use

id

Type: string Mandatory: No Description: Id for the whole tree

handleMove

Type: callback (item, newparent) => {} Mandatory: No Description: If provided, exposes an icon that allows rows to be moved, Callback fired on drop. It is expected that some code be written for this callback to actually perform the move/modification of the tree. Reason being, the move may need to update anything such as redux/state/DB etc, therefore simply exposing the intention allows the developer to make the changes where necessary.

columns

Type: Array of objects Mandatory: No Description: Columns to display additional data

icons

Type: Array of objects Mandatory: No Description: Icons that'll be execute provided callbacks when clicked (Icons tested with Font Awesome)

fieldnames

Type: object Mandatory: No Description: Name of fields that contains required information Defaults
id: id
name: name
name: name
parentId: parentId

Todo

Expose prop that allows the clicking of the row to fire a provided callback as opposed to expanding/closing the row (current behaviour)
Improve ability for custom styling
Provide method in project to convert array of objects to tree