Powerful Tree View Component - vue-tree

Install & Download:

# Yarn
$ yarn add @grapoza/vue-tree
# NPM
$ npm i @grapoza/vue-tree

Description:

A simple yet full-featured and highly customizable tree view component for Vue.

More Features:

Works in modern browsers using the precompiled scripts, or can be included in your babel/webpack chain.
Expandable nodes
Checkboxes
Radio buttons
Node selection
Addition and removal of nodes
Slots for node content
Skinning
Asynchronous loading of child nodes
Follows ARIA guidelines for treeview accessibility
Drag and drop (single nodes, works between trees)

How to use it:

1. Import the vue-tree.

import TreeView from "@grapoza/vue-tree"

2. Register the component.

export default {
  components: {
    TreeView
  }
}

3. Add the tree view component to the app template.

<template>
  <tree-view id="example" :initial-model="dataModel"></tree-view>
</template>

4. Add nodes to the tree view.

export default {
  components: {
    TreeView
  },
  data() {
    return {
      dataModel: [
        {id: "numberOrString", label: "Root Node", children: [
        {id: 1, label: "Child Node"},
        {id: 2, label: "Second Child"}]
        }
      ]
    }
  }
}

5. All default tree props.

initialModel: {
  type: Array,
  required: true
},
modelDefaults: {
  type: Object,
  required: false,
  default: function () { return {}; }
},
selectionMode: {
  // none, 'single', 'selectionFollowsFocus', or 'multiple'
  type: String,
  required: false,
  default: SelectionMode.None,
  validator: function (value) {
    return Object.values(SelectionMode).includes(value);
  }
},
skinClass: {
  type: String,
  required: false,
  default: 'default-tree-view-skin',
  validator: function (value) {
    return value === null || !value.match(/\s/);
  }
}

Preview:

Changelog:

v5.2.3 (10/22/2023)

Bugfixes

v5.2.1 (10/17/2023)

Update packages

v5.2.0 (04/16/2023)

Update

v5.1.0 (02/04/2023)

Add dataTransferEffectAllowed to TNS
Refactor composables
Update packages (manual clear of yarn.lock)
Fix exclusive node selection

v5.0.1 (02/05/2023)

Add dataTransferEffectAllowed to TNS
Refactor composables
Fix exclusive node selection

v5.0.0 (09/17/2022)

Code has been refactored to use the Composition API and composables (the composables will be refactored further in a future release).
Add maxMatches parameter to getMatching
A treeNodeChildCheckboxChange event is now fired by a node when its child is checked/unchecked

v4.0.3 (03/06/2022)