kamil-lip / bootstrap-vue-treeview

A treeview component for Bootstrap and Vue.js 2.0+

A treeview component for Bootstrap and Vue.js 2.0+

Online demo

https://bootstrap-vue-treeview.appdiamond.pl

Features

• Drag & drop nodes
• Context menu

Installation

npm install --save bootstrap-vue-treeview

Getting started

Webpack

If you use Webpack bundler (recommended) you can import component and register it locally:

import { bTreeView } from 'bootstrap-vue-treeview'
[...]
components: {
	bTreeView
},

or globally using plugin:

import BootstrapVueTreeview from 'bootstrap-vue-treeview'
Vue.use(BootstrapVueTreeview)

Now you can you the treeview component in your code:

<b-tree-view :data="treeData"></b-tree-view>

export default {
  data() {
    return {
      treeData: [{"id": 2, "name": "Venus" , "children": [{"id": 3, "name": "Neptune"}, {"id": 4, "name": "Stratus"} ] } ]
    }
  }
}

API

TreeView

1. Vue props

Prop	Type	Description	Default value	Required
data	Array	Tree data	-	Yes
nodeKeyProp	String	Name of the property containing unique node key	"id"	No
nodeChildrenProp	String	Where to look for node children	"children"	No
nodeLabelProp	String	Name of the property containing node label	"name"	No
showIcons	Boolean	Show/hide icons	false	No
iconClassProp	String	Name of the property containing icon class	"icon"	No
defaultIconClass	String	Icon class to apply if node has no icon class property	null	No
prependIconClass	String	Class to apply to every icon (common to all icons)	null	No
nodesDraggable	Boolean	Enable/disable drag & drop feature	false	No
contextMenu	Boolean	Enable/disable context menu	true	No
renameNodeOnDblClick	Boolean	Enable/disable double click to rename feature	true	No
contextMenuItems	Array of menu items	Context menu items	[ { code: 'DELETE_NODE', label: 'Delete node' }, { code: 'RENAME_NODE', label: 'Rename node' } ]	No

2. Events

Event name	Description	Parameters
nodeSelect	Triggered every time a node is selected/deselected. Check second parameter to verify if the node was selected or deselected	TreeNode object, isSelected
contextMenuItemSelect	Triggered every time a context menu item was clicked.	Context menu item object (see below), TreeNode object

TreeNode

Props and events of the tree node component are not intended to be used directly.

1. Methods

Method name	Description	Parameters
select	Select node	-
deselect	Deselect node	-
expand	Expand node (show children)	-
collapse	Collapse node (hide children)	-
toggle	Expand/collapse	-

Menu item

1. Properties

Property	Description
code	Code of the menu item. Check this code to know which menu item was clicked.
label	Label being displayed for the user

bootstrap-vue-treeview's Issues

Configuration error in package.json

When trying to do testing with this module using Jest, it fails to find the module. After some digging I figured out why:

Package.json:5 has "main": "dist/treeview.js", so Jest is trying to find that file.

It needs to be changed to "main": "dist/bootstrap-vue-treeview.js",

I have verified that this fixes the problem and Jest can find the module as expected.

Would very much appreciate if you could release an update with this fix.

Regarding ondemand load in Bootstrapvuetreeview

Hi,

The component is working great. I want to load the tree onload(onDemand). How can i do it? is it possible to load the tree ondemand?

Thanks

Props not set

my markup

<b-tree-view prependIconClass="fas" ref="tree" :data="treeData" :showIcons="true" ></b-tree-view>

after mounted

prependIconClass is "" and showIcons is false

TypeError: Cannot read property open of undefined at VueComponent.open

Is it possible to set a default selected item?

Is it possible to set a default selected item on created() or mounted() ?

Custom icons

Hi,

The component is great, but we would like to change the icons to fit our branding.

Would it be posssible to add a way to customize that? Some slots would do the trick I think, to replace the hardcoded SVG.

                <svg width="12"
                     height="12"
                     @click.prevent="toggle"
                     class="tree-node-icon"
                     v-if="hasChildren">
                    <path d="M2 1 L10 6 L2 11 Z"
                          class="svg-icon"/>
                </svg>

Could be something like that :

    <div  v-if="hasChildren" @click.prevent="toggle">
        <slot name="expand-icon">
                <svg width="12" height="12" class="tree-node-icon">
                    <path d="M2 1 L10 6 L2 11 Z" class="svg-icon"/>
                </svg>
           </slot>
    </div>

Same could be done to allow for a fully custom label icon

add child

Custom context menu

Allow custom context menu on each node tree

Click On Name And Expand Child Nodes

Hi, Currently when clicked caret icon only children nodes expands. I want to click on names & expand child nodes too. how can i do this ?

Is there any way to use it on nuxt.js

Hello. I want to use your library on nuxt.js . How can I do it? Thanks

Vue is not defined

Treenode.Vue line 246:

if (this.data[this.childrenProp] === undefined) {
     Vue.set(this.data, this.childrenProp, [])
}

returns ReferenceError: Vue is not defined

Update core-js

Currently bootstrap-vue-treeview uses core-js V2.6.12
However, this version is deprecated. See https://www.npmjs.com/package/core-js/v/2.6.12
Please update to the new V3.x

Thanks in advance

slice of undefined

Thank you for your great work.

I've got 1 issue:
Error in nextTick: "TypeError: Cannot read property 'slice' of undefined"

app.js:2850 TypeError: Cannot read property 'slice' of undefined
    at VueComponent.createNodeMap (app.js:52695)
    at VueComponent.<anonymous> (app.js:52802)
    at Array.<anonymous> (app.js:2946)
    at flushCallbacks (app.js:2867)

<b-tree-view
   :data="cats"
   :nodesDraggable="false"
   :showIcons="false"
   :contextMenu="false"
   :renameNodeOnDblClick="false"
   :contextMenuItems="[]"
   @nodeSelect="nodeSelect"
></b-tree-view>

This is my data:

You know why?
Thanks in advance.

[Vue warn]: Invalid default value for prop "contextMenuItems": Props with type Object/Array must use a factory function to return the default value.

I have an issue with this error message ad default value: do you have any suggestion?

Adds some links to names

Hi,
Is it a way to add a link to a node ?

aka.:

...
export default {
    ...
    methods: {
        getName(item) {
            return `<a href="${item.url}">${item.name}</a>`;
        }
    },
    computed: {
        treeData() {
            let foo = {
                id: 1,
                name: 'Foo',
                url: 'http://www.example.org/'
            };
            let output = [{
                name: this.getName(foo),
                id: foo.id
            }];
            return output;
        }
    }
};

Thanks for your great job !

Cannot find module 'bootstrap-vue-treeview'

Hello,

Where can I find the 1.0.8 version from npm?
I have following error during the import:
Cannot find module 'bootstrap-vue-treeview'

My files inside node_modules:

$ ls node_modules/bootstrap-vue-treeview/dist/
bootstrap-vue-treeview.common.js      bootstrap-vue-treeview.esm.js      bootstrap-vue-treeview.js
bootstrap-vue-treeview.common.js.map  bootstrap-vue-treeview.esm.js.map  bootstrap-vue-treeview.js.map

So I cannot find the main file from package.json:

  ],
  "license": "MIT",
  "main": "dist/treeview.js",
  "maintainers": [
    {
      "name": "kamil-lip",
      "email": "[email protected]"
    }
  ],

When I'm changing main to "dist/bootstrap-vue-treeview.js" it is working fine.

BR,
Adam

Typescript bindings

Can you provide typescript bindings, or i can and submit to you ?
Thanks for you greak work

Expand by default feature request

Is there a way to show all items expanded by default?
A prop for this would be very useful and much appreciated to make it easier.
Thanks.

right to left

Not supported from right to left،

Is this treeview support multiple selection ?

Hi, if this treeview support the checkbox to select multiple items?

How do I prevent node deletion？

How do I prevent node deletion？

Is it possible to style each node by his level?

I'm trying to down the opacity of each node, is it possible? There is any slot to do it?