{"id":13938003,"url":"https://github.com/vinz3872/vuejs-tree","last_synced_at":"2025-04-13T02:18:13.028Z","repository":{"id":38988516,"uuid":"110438843","full_name":"vinz3872/vuejs-tree","owner":"vinz3872","description":"A highly customizable and blazing fast Vue tree component ⚡🌲","archived":false,"fork":false,"pushed_at":"2023-02-09T07:28:24.000Z","size":4002,"stargazers_count":332,"open_issues_count":16,"forks_count":48,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T02:17:32.148Z","etag":null,"topics":["component","tree","treeview","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vinz3872.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-11-12T14:23:42.000Z","updated_at":"2025-03-18T09:33:39.000Z","dependencies_parsed_at":"2023-07-18T16:24:51.205Z","dependency_job_id":null,"html_url":"https://github.com/vinz3872/vuejs-tree","commit_stats":{"total_commits":112,"total_committers":11,"mean_commits":"10.181818181818182","dds":0.5714285714285714,"last_synced_commit":"4487c29441480fb9f227d57c17153383685f5892"},"previous_names":["scalia/vuejs-tree"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinz3872%2Fvuejs-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinz3872%2Fvuejs-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinz3872%2Fvuejs-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinz3872%2Fvuejs-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinz3872","download_url":"https://codeload.github.com/vinz3872/vuejs-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654104,"owners_count":21140237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","tree","treeview","vue","vuejs"],"created_at":"2024-08-07T23:04:09.832Z","updated_at":"2025-04-13T02:18:13.000Z","avatar_url":"https://github.com/vinz3872.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"VueJS Tree\n==========\n\n[![npm version](https://img.shields.io/npm/v/vuejs-tree.svg?style=flat)](https://www.npmjs.com/package/vuejs-tree)\n[![npm version](https://img.shields.io/github/package-json/dependency-version/vinz3872/vuejs-tree/vue?style=flat)](https://www.npmjs.com/package/vue)\n\nVue2 version [here](https://github.com/vinz3872/vuejs-tree/tree/vue2)\n\nA highly customizable vuejs tree viewer\n\n\n![tree](https://raw.githubusercontent.com/vinz3872/vuejs-tree/7b6d80f7362cdaf0da9eba9997a9b132c5b99e7b/images/tree.png)\n\n#### Example\n\n[codesandbox](https://codesandbox.io/s/vuejs-tree-sandbox-v3x-lmbyx)\n\n## Getting Started\n\n### Install\n\nYou can install using yarn:\n\n```bash\n$ yarn add vuejs-tree\n```\n\nor with npm:\n\n```bash\n$ npm install vuejs-tree\n```\n\n\n### Usage\n\nAdd the following lines at the top of your .js file which contains your Vue instance.\n\n```javascript\n  import Tree from 'vuejs-tree'\n\n\n  // in your vue instance\n  components: {\n    'Tree': Tree\n  },\n```\n\n\nThen add the following line in your html file to generate a tree. You can have as many trees per page as you want.\n```html\n  \u003cTree id=\"my-tree-id\" ref=\"my-tree-ref\" :custom-options=\"myCustomOptions\" :custom-styles=\"myCustomStyles\" :nodes=\"treeDisplayData\"\u003e\u003c/Tree\u003e\n```\n\n\n## Data Structure\n\nYou need to define data to display which is a nested array of hash.\n\nExample:\n\n```javascript\ndata: {\n  treeDisplayData: [\n    {\n      text: 'Root 1',\n      state: { checked: false, selected: false, expanded: false },\n      nodes: [\n        {\n          text: 'Child 1',\n          state: { checked: false, selected: false, expanded: false },\n          nodes: [\n            {\n              text: 'Grandchild 1',\n              state: { checked: false, selected: false, expanded: false }\n            },\n            {\n              text: 'Grandchild 2',\n              state: { checked: false, selected: false, expanded: false }\n            }\n          ]\n        },\n        {\n          text: 'Child 2',\n          state: { checked: false, selected: false, expanded: false }\n        }\n      ]\n    },\n    {\n      text: 'Root 2',\n      state: { checked: false, selected: false, expanded: false }\n    }\n  ]\n}\n```\n\n### Node properties\n\nHere is a fully customized node:\n\n```javascript\n{\n  id: 1,\n  text: 'Root 1',\n  definition: 'First node',\n  depth: 1,\n  checkable: false,\n  selectable: false,\n  expandable: true,\n  tags: [42],\n  state: {\n    checked: false,\n    expanded: false,\n    selected: false\n  },\n  nodes: [\n    {},\n    ...\n  ]\n}\n```\n\nThe Following properties define a node level css and behavior.\n\n| key              | type                                       | Detail                                                                                                                                        |\n|------------------|--------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|\n| id               | String or Integer --\u003e Mandatory      | Used in the tree to differentiate each node                                                                                                   |\n| text             | String --\u003e Mandatory                   | The text value displayed at the right of the node icons                                                                                       |\n| definition       | String --\u003e Optional                    | If some text is given, then it will show as a tooltip                                                                                         |\n| depth            | Integer --\u003e 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 |\n| tags             | [Integer] --\u003e Optional                 | The tag is displayed at the right end of the line                                                                                             |\n| checkable        | Boolean --\u003e Optional, default: true  | Used to enable or disable the node's check event                                                                                              |\n| selectable       | Boolean --\u003e Optional, default: true  | Used to enable or disable the node's select event                                                                                             |\n| expandable       | Boolean --\u003e Optional, default: true  | Used to enable or disable the node's expand event                                                                                             |\n| state            |                                            | nodes's state                                                                                              |\n| state.checked  | Boolean --\u003e Mandatory, default: false  | Change the node's default state  (at initialize)                                                                                              |\n| state.selected | Boolean --\u003e Mandatory, default: false  | Change the node's default state  (at initialize)                                                                                                            |\n| state.expanded | Boolean --\u003e Mandatory, default: false  | Change the node's default state  (at initialize)                                                                                                            |\n| nodes            | Object --\u003e Optional                    | Used to display the node's children. *Look above for a structure example*                                                                         |\n\n## Options / Styles\n\nHere is an example of a customOptions hash the tree can take.\nI suggest you to use a vuejs computed function if you want to use a function pointer.\n\n```javascript\ncomputed: {\n  myCustomStyles() {\n    return {\n      tree: {\n        style: {\n          height: 'auto',\n          maxHeight: '300px',\n          overflowY: 'visible',\n          display: 'inline-block',\n          textAlign: 'left'\n        }\n      },\n      row: {\n        style: {\n          width: '500px',\n          cursor: 'pointer'\n        },\n        child: {\n          class: '',\n          style: {\n            height: '35px'\n          },\n          active: {\n            class: 'custom_row_active_class',\n            style: {\n              height: '35px'\n            }\n          }\n        }\n      },\n      addNode: {\n        class: 'custom_class',\n        style: {\n          color: '#007AD5'\n        }\n      },\n      editNode: {\n        class: 'custom_class',\n        style: {\n          color: '#007AD5'\n        }\n      },\n      deleteNode: {\n        class: 'custom_class',\n        style: {\n          color: '#EE5F5B'\n        }\n      },\n      selectIcon: {\n        class: 'custom_class',\n        style: {\n          color: '#007AD5'\n        },\n        active: {\n          class: 'custom_class',\n          style: {\n            color: '#2ECC71'\n          }\n        }\n      },\n      text: {\n        style: {},\n        class: 'capitalize',\n        active: {\n          style: {\n            'font-weight': 'bold',\n            color: '#2ECC71'\n          }\n        }\n      }\n    };\n  },\n  myCustomOptions() {\n    return {\n      treeEvents: {\n        expanded: {\n          state: true,\n          fn: null,\n        },\n        collapsed: {\n          state: false,\n          fn: null,\n        },\n        selected: {\n          state: false,\n          fn: null,\n        },\n        checked: {\n          state: true,\n          fn: this.myCheckedFunction,\n        }\n      },\n      events: {\n        expanded: {\n          state: true,\n          fn: null,\n        },\n        selected: {\n          state: false,\n          fn: null,\n        },\n        checked: {\n          state: false,\n          fn: null,\n        },\n        editableName: {\n          state: false,\n          fn: null,\n          calledEvent: null,\n        }\n      },\n      addNode: { state: false, fn: null, appearOnHover: false },\n      editNode: { state: true, fn: null, appearOnHover: true },\n      deleteNode: { state: true, fn: null, appearOnHover: true },\n      showTags: true,\n    };\n  }\n},\n```\n\n#### Styles\n\n| Option name | Detail                                                                                             |\n|-------------|----------------------------------------------------------------------------------------------------|\n| tree        | Object - override default tree css |\n| row.style   | Object - override default tree node css |\n| row.child   | Object - override style of `\u003cdiv\u003e` into the `\u003cli\u003e` row (e.g. you can manage the height of the row)\u003cbr\u003eKeys:\u003cbr\u003e- `style`: css style applied when the node is not selected\u003cbr\u003e- `class`: class applied when the node is not selected\u003cbr\u003e- `active.style`: css style applied when the node is selected\u003cbr\u003e- `active.class`: class applied when the node is selected |\n| rowIndent   | Object - override style of `\u003cul\u003e`  (e.g. you can manage the child node indent) |\n| expanded    | Object - contains the class of the expanded icon |\n| addNode     | Object - contains the class and the style of the addNode button\u003cbr\u003eKeys:\u003cbr\u003e- `class`: addNode icon class, required to display the icon\u003cbr\u003e- `style`: addNode icon style |\n| editNode    | Object - contains the class and the style of the editNode button\u003cbr\u003eKeys:\u003cbr\u003e- `class`:  editNode icon class, required to display the icon\u003cbr\u003e- `style`: editNode icon style |\n| deleteNode  | Object - contains the class and the style of the deleteNode button\u003cbr\u003eKeys:\u003cbr\u003e- `class`:  deleteNode icon class, required to display the icon\u003cbr\u003e- `style`: deleteNode icon style |\n| selectIcon  | Object - contains the class and the style for the select node icon\u003cbr\u003eKeys:\u003cbr\u003e- `style`: unselected icon style\u003cbr\u003e- `class`: unselected icon class, required to display the icon\u003cbr\u003e- `active.style`: selected icon style\u003cbr\u003e- `active.class`: selected icon class, required to display the icon |\n| text        | Object - contains the class and the style for the node's text\u003cbr\u003eKeys:\u003cbr\u003e- `style`: css style applied when the node is not selected\u003cbr\u003e- `class`: class always applied to the text\u003cbr\u003e- `active.style`: css style applied when the node is selected |\n\n#### Options\n##### Tree options\n| Option name          | Detail                                                                                                                   |\n|----------------------|--------------------------------------------------------------------------------------------------------------------------|\n| treeEvents           | Object - contains the callback tree events, called **after** the tree row events                                         |\n| treeEvents.expanded  | Object - enable or disable the callback when a node is expanded. If enabled, **fn** (function pointer) must be present.  |\n| treeEvents.collapsed | Object - enable or disable the callback when a node is collasped. If enabled, **fn** (function pointer) must be present. |\n| treeEvents.selected  | Object - enable or disable the callback when a node is selected. If enabled, **fn** (function pointer) must be present.  |\n| treeEvents.checked   | Object - enable or disable the callback when a node is checked. If enabled, **fn** (function pointer) must be present.   |\n\n##### Row Options\n| Option name         | Detail                                                                                                                                                                                                                    |\n|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| showTags            | Boolean - Show the node's tag if given                                                                                                                                                                                    |\n| addNode             | Object - enable or disable the add node button. If enabled, **fn** must be present. If *appearOnHover* is true, the button will appear only if the row is hovered                                                         |\n| editNode            | Object - enable or disable the edit node button. If enabled, **fn** must be present. If *appearOnHover* is true, the button will appear only if the row is hovered                                                        |\n| deleteNode          | Object - enable or disable the delete node button. If enabled, **fn** must be present. If *appearOnHover* is true, the button will appear only if the row is hovered                                                      |\n| events              | Object - contains the node events, **override** the tree row events behavior                                                                                                                                              |\n| events.expanded     | Object - enable or disable the expanded node event. The **fn** key is optional, if present, it will **replace** the native behavior                                                                                       |\n| events.selected     | Object - enable or disable the selected node event. The **fn** key is optional, if present, it will **replace** the native behavior                                                                                       |\n| events.checked      | Object - enable or disable the checked node event. The **fn** key is  optional, if present, it will **replace** the native behavior                                                                                       |\n| events.editableName | Object - enable or disable the event when the node's name is clicked. If enabled, the key **fn** or **calledEvent** must be present. **calledEvent** is a string and it value must be an existing event (e.g. 'selected') |\n\n## Events\n\n### Tree\nYou can call your own function here by assigning a function pointer in the tree options and changing its state to true.\nThese functions are called after all tree modifications.\n\n#### onNodeSelected\nCalled when a node is selected.\n`myCustomOptions.treeEvents.selected.fn`\n\n#### onNodeExpanded\nCalled when a node is expanded.\n`myCustomOptions.treeEvents.expanded.fn`\n\nOr called when a node is collapsed.\n`myCustomOptions.treeEvents.collapsed.fn`\n\n#### onNodeChecked\nCalled when a node is collapsed.\n`myCustomOptions.treeEvents.checked.fn`\n\n### Tree row\nYou 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.\nYou can also disabled an event by changing it's state to false.\n\n#### toggleSelected\nCalled when a node is selected. `myCustomOptions.events.selected.fn`\n\n#### toggleExpanded\nCalled when a node is expanded or collapsed. `myCustomOptions.events.expanded.fn`\n\n#### toggleChecked\nCalled when a node is checked. `myCustomOptions.events.checked.fn`\n\n#### editableName\nYou can call a special function if you assign it's pointer in `myCustomOptions.events.editableName.fn`\nOr you can call an existing event by assigining it's name in `myCustomOptions.events.editableName.calledEvent`\n\nexample : `myCustomOptions.events.editableName.calledEvent = 'selected'`\n\n## Methods\n\nMethods Params:\n\n`depth` --\u003e Optional but help distinguish nodes with the same id.\n\n`argWanted` --\u003e It can either be a node attribute name (string) or a array of node attribute name (like ['id', 'name']).\n\n`format` --\u003e If you want the function to return an plain array (false) or a hash tree (true).\n\n`maxDepth` --\u003e The function will only access nodes within the maxDepth.\n\n`fullNode` --\u003e Return only node ids or node objects.\n\n`conditions` --\u003e It's used to affect only the nodes which match it. For example if the condition is {checked: true}, the function will affect only the nodes which are checked. You can use all nodes attribute that are present in the node object.\n\n| Function                                                 | Detail                                                               |\n|----------------------------------------------------------|----------------------------------------------------------------------|\n| checkNode(nodeId, depth)                                 | Check a node                                                         |\n| uncheckNode(nodeId, depth)                               | Uncheck a node                                                       |\n| getSelectedNode()                                        | Return the selected node if you have selected a node                 |\n| getCheckedNodes(argWanted, format = false)               | Return all checked nodes                                             |\n| getExpandedNodes(argWanted, format = false)              | Return all expanded nodes                                            |\n| checkAllNodes()                                          | Check all nodes                                                      |\n| uncheckAllNodes()                                        | Uncheck all nodes                                                    |\n| expandNode(nodeId, depth)                                | Expand a node                                                        |\n| collapseNode(nodeId, depth)                              | Collapse a node                                                      |\n| selectNode(nodeId, depth)                                | Select a node and deselect the previously selected node if it exists |\n| expandAllNodes()                                         | Expand all nodes                                                     |\n| collapseAllNodes()                                       | Collapse all nodes                                                   |\n| deselectAllNodes()                                       | Deselect all nodes                                                   |\n| findNode(nodeId, maxDepth = 9999)                        | Find and return a node                                               |\n| getVisibleNodes(fullNode = false)                        | Get all visible nodes                                                |\n| getNodesData(argWanted, conditions = {}, format = false) | Customizable function that returns nodes                             |\n\n### Get the tree instance\n\nIf you want to call any tree method, you need to get the instance.\n\nTo get the tree instance you just need to be in the vue instance and use `this.$refs['my-tree-ref']`\nThen you can use a method like that: `this.$refs['my-tree-ref'].myMethod()`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinz3872%2Fvuejs-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinz3872%2Fvuejs-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinz3872%2Fvuejs-tree/lists"}