tree-component
A reactjs and vuejs tree component.
features
- vuejs component
- reactjs component
- open and close
- select and deselect
- disabled
- loading
- highlighted
- checkbox
- custom icon or no icon
- drag and drop
- no dots
- large and small
- default and dark theme
- contextmenu(vuejs and reactjs only)
- node id
- custom node(vuejs and reactjs only)
- drag and drop between different tree
- composition model(reactjs children and vuejs slot)
link css
<link rel="stylesheet" href="./node_modules/tree-component/dist/tree.min.css" />vuejs component
npm i tree-vue-component
import { Node, Tree } from "tree-vue-component";
app.component('node', Node)
app.component('tree', Tree)or
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/tree-vue-component/dist/tree-vue-component.min.js"></script><tree :data="data"
@toggle="toggle($event)"
@change="change($event)">
</tree>the online demo: https://plantain-00.github.io/tree-component/packages/vue/demo
reactjs component
npm i tree-react-component
import { Tree } from "tree-react-component";or
<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/tree-react-component/dist/tree-react-component.min.js"></script><Tree data={data}
toggle={this.toggle}
change={this.change}>
</Tree>the online demo: https://plantain-00.github.io/tree-component/packages/react/demo
properties and events of the component
| name | type | description |
|---|---|---|
| data | TreeData[] | the data of the tree |
| checkbox | boolean? | show checkbox for node |
| draggable | boolean? | whether the node is draggable |
| nodots | boolean? | the tree will have no dots |
| size | string? | can also be "large", "small" |
| theme | string? | can be "default"(the default theme), "dark" |
| dropAllowed | (dropData: common.DropData) => boolean | optional, a function to show whether the drop action is allowed |
| zindex | number? | z-index of contextmenu |
| preid | string? | the node id prefix, eg: if preid = "test_", then a node's id can be test_1-2-3 |
| toggle | (eventData: EventData) => void | triggered when opening or closing a node |
| change | (eventData: EventData) => void | triggered when selecting or deselecting a node |
| drop | (dropData: DropData) => void | triggered when drag a node, then drop it |
| dragTarget | DragTargetData | drag target, used when drag and drop between different tree |
| changeDragTarget | (dragTarget: DragTargetData) => void | triggered when drag target changed |
tree data structure
type TreeData<T = any> = {
text?: string;
value?: T; // anything attached to the node
icon?: string | false; // the icon class string, or no icon if is false
state: TreeNodeState;
children?: TreeData<T>[];
contextmenu?: string | Function; // the contextmenu component, props: (data: ContextMenuData<T>)
component?: string | Function; // the node component, props: (data: TreeData<T>)
};
type TreeNodeState = {
opened: boolean; // whether the node show its children
selected: boolean;
disabled: boolean; // disabled node can not be selected and deselected
loading: boolean; // show the loading icon, usually used when loading child nodes
highlighted: boolean;
openable: boolean; // can open or close even no children
dropPosition: DropPosition;
dropAllowed: boolean; // whether the drop action is allowed
};
const enum DropPosition {
empty,
up,
inside,
down,
}
// For javascript users, the enum type can not imported from the package,
// it is just number(0,1,2,3 in order), so you can use this instead:
const DropPosition = {
empty: 0,
up: 1,
inside: 2,
down: 3
}event data structure
type EventData<T = any> = {
data: TreeData<T>; // the data of the node that triggered the event
path: number[]; // the index array of path from root to the node that triggered the event
};drop data structure
type DropData<T = any> = {
sourceData: TreeData<T>;
sourcePath: number[];
sourceRoot: TreeData<T>[];
targetData: TreeData<T>;
targetPath: number[];
};contextmenu data structure
type ContextMenuData<T = any> = {
data: TreeData<T>;
path: number[];
root: TreeData<T>[];
parent?: any;
};drag target data structure
type DragTargetData<T = any> = {
root: TreeData<T>[];
target: HTMLElement;
} | nullchangelogs
# v5
// vue 2
import 'tree-vue-component'
# v6
// vue 3
import { Node, Tree } from "tree-vue-component"
app.component('node', Node)
app.component('tree', Tree)# v4
npm i tree-component
# v5
npm i tree-vue-component
npm i tree-react-component
npm i tree-angular-component// v4
import "tree-component/vue";
import { Tree } from "tree-component/react";
import { TreeModule } from "tree-component/angular";
// v5
import "tree-vue-component";
import { Tree } from "tree-react-component";
import { TreeModule } from "tree-angular-component";// v4
<link rel="stylesheet" href="./node_modules/tree-component/tree.min.css" />
// v5
<link rel="stylesheet" href="./node_modules/tree-component/dist/tree.min.css" />// v3 angular AOT:
import { TreeModule } from "tree-component/angular";
// v4 angular AOT:
import { TreeModule } from "tree-component/aot/angular";// v3
import "tree-component/vue";
import { TreeComponent, NodeComponent } from "tree-component/angular";
import { Tree } from "tree-component/react";
// v2
import "tree-component/dist/vue";
import { TreeComponent, NodeComponent } from "tree-component/dist/angular";
import { Tree } from "tree-component/dist/react";// v2:
<link rel="stylesheet" href="./node_modules/tree-component/tree.min.css" />
// v1:
<link rel="stylesheet" href="./node_modules/jstree/dist/themes/default/style.min.css" />