Blog Detail

08

Nov
A Highly Customizable and Fast Vue Js tree component cover image

arrow_back A Highly Customizable and Fast Vue Js tree component

Vuejs-tree is a highly customizable and blazing fast Vue tree component introduced by Vincent Jacquier. It provides interactive trees that are easily extendable and customizable. You can view its demo here.

Installation

You can install this component by using yarn or Npm

yarn add vuejs-tree

or 

npm install vuejs-tree

Usage

Add the following lines at the top of your .js
file which contains your Vue instance.

  import Tree from 'vuejs-tree'


  // in your vue instance
  components: {
    'Tree': Tree
  },

Then add the following line in your HTML file to generate a tree. You can have as many trees per page as you want.

  <Tree id="my-tree-id" ref="my-tree-ref" :custom-options="myCustomOptions" :custom-styles="myCustomStyles" :nodes="treeDisplayData"></Tree>

Data Structure

You need to define data to display which is a nested array of hash.

Example:
data: {
  treeDisplayData: [
    {
      text: 'Root 1',
      state: { checked: false, selected: false, expanded: false },
      nodes: [
        {
          text: 'Child 1',
          state: { checked: false, selected: false, expanded: false },
          nodes: [
            {
              text: 'Grandchild 1',
              state: { checked: false, selected: false, expanded: false }
            },
            {
              text: 'Grandchild 2',
              state: { checked: false, selected: false, expanded: false }
            }
          ]
        },
        {
          text: 'Child 2',
          state: { checked: false, selected: false, expanded: false }
        }
      ]
    },
    {
      text: 'Root 2',
      state: { checked: false, selected: false, expanded: false }
    }
  ]
}

Node properties

Here is a fully customized node:

{
  id: 1,
  text: 'Root 1',
  definition: 'First node',
  depth: 1,
  checkable: false,
  selectable: false,
  expandable: true,
  tags: [42],
  state: {
    checked: false,
    expanded: false,
    selected: false
  },
  nodes: [
    {},
    ...
  ]
}

The Following properties define a node-level css and behavior.

key type Detail
id String or Integer --> Mandatory Used in the tree to differentiate each node
text String --> Mandatory The text value displayed at the right of the node icons
definition String --> Optional If some text is given, then it will show as a tooltip
depth Integer --> Optional It corresponds to the node depth, starting from 0, 1 or anything. It’s advisable to fill these fields if some of your nodes have the same id
tags [Integer] --> Optional The tag is displayed at the right end of the line
checkable Boolean --> Optional, default: true Used to enable or disable the node’s check event
selectable Boolean --> Optional, default: true Used to enable or disable the node’s select event
expandable Boolean --> Optional, default: true Used to enable or disable the node’s expand event
state - nodes’s state
state.checked Boolean --> Mandatory, default: false Change the node’s default state (at initialize)
state.selected Boolean --> Mandatory, default: false Change the node’s default state (at initialize)
state.expanded Boolean --> Mandatory, default: false Change the node’s default state (at initialize)
nodes Object --> Optional Used to display the node’s children. Look above for a structure example

Options / Styles

Here is an example of a customOptions hash the tree can take. I suggest you use a vuejs computed function if you want to use a function pointer.

computed: {
  myCustomStyles() {
    return {
      tree: {
        style: {
          height: 'auto',
          maxHeight: '300px',
          overflowY: 'visible',
          display: 'inline-block',
          textAlign: 'left'
        }
      },
      row: {
        style: {
          width: '500px',
          cursor: 'pointer'
        },
        child: {
          class: '',
          style: {
            height: '35px'
          },
          active: {
            class: 'custom_row_active_class',
            style: {
              height: '35px'
            }
          }
        }
      },
      addNode: {
        class: 'custom_class',
        style: {
          color: '#007AD5'
        }
      },
      editNode: {
        class: 'custom_class',
        style: {
          color: '#007AD5'
        }
      },
      deleteNode: {
        class: 'custom_class',
        style: {
          color: '#EE5F5B'
        }
      },
      selectIcon: {
        class: 'custom_class',
        style: {
          color: '#007AD5'
        },
        active: {
          class: 'custom_class',
          style: {
            color: '#2ECC71'
          }
        }
      },
      text: {
        style: {},
        class: 'capitalize',
        active: {
          style: {
            'font-weight': 'bold',
            color: '#2ECC71'
          }
        }
      }
    };
  },
  myCustomOptions() {
    return {
      treeEvents: {
        expanded: {
          state: true,
          fn: null,
        },
        collapsed: {
          state: false,
          fn: null,
        },
        selected: {
          state: false,
          fn: null,
        },
        checked: {
          state: true,
          fn: this.myCheckedFunction,
        }
      },
      events: {
        expanded: {
          state: true,
          fn: null,
        },
        selected: {
          state: false,
          fn: null,
        },
        checked: {
          state: false,
          fn: null,
        },
        editableName: {
          state: false,
          fn: null,
          calledEvent: null,
        }
      },
      addNode: { state: false, fn: null, appearOnHover: false },
      editNode: { state: true, fn: null, appearOnHover: true },
      deleteNode: { state: true, fn: null, appearOnHover: true },
      showTags: true,
    };
  }
},

Events

Tree

You can call your own function here by assigning a function pointer in the tree options and changing its state to true. These functions are called after all tree modifications.

onNodeSelected

Called when a node is selected. myCustomOptions.treeEvents.selected.fn

onNodeExpanded

Called when a node is expanded. myCustomOptions.treeEvents.expanded.fn
Or called when a node is collapsed.

myCustomOptions.treeEvents.collapsed.fn

onNodeChecked
Called when a node is collapsed. myCustomOptions.treeEvents.checked.fn

Tree row

You can call your own function here by assigning a function pointer in the tree options. It will replace the existing behavior of the tree for this event. You can also disable an event by changing its state to false.

toggleSelected

Called when a node is selected. myCustomOptions.events.selected.fn

toggleExpanded

Called when a node is expanded or collapsed. myCustomOptions.events.expanded.fn

toggleChecked

Called when a node is checked. myCustomOptions.events.checked.fn

editableName

You can call a special function if you assign it’s pointer in myCustomOptions.events.editableName.fn Or you can call an existing event by assigining it’s name in myCustomOptions.events.editableName.calledEvent

Example:

myCustomOptions.events.editableName.calledEvent = ‘selected’

You can view its methods and other options on Github.

Published at : 08-11-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project