A Reactjs and Vuejs Tree Component

A Reactjs and Vuejs Tree Component

tree-component .A reactjs and vuejs tree component.

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 rel="stylesheet" href="./node_modules/tree-component/dist/tree.min.css" />

vuejs component

gzip size

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/vue-class-component/dist/vue-class-component.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

gzip size

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;
} | null

changelogs

# 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" />

Download Details:

Author: plantain-00

Source Code: https://github.com/plantain-00/tree-component

vuejs vue react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

A Vuejs and Reactjs Select Component

select2-component A vuejs and reactjs select component

A Vuejs and Reactjs Tour Component

tour-component .A vuejs and reactjs tour component.

Vue vs. React: The Future of Front-End Development

In this post, we'll discuss the strengths and weaknesses of Vue.js and React.js, and also what the future holds for both in Frontend Development. Vue.js and React.js are two popular frontend JavaScript frameworks among web developers worldwide at present

A reactjs and vuejs component of file uploader

A reactjs and vuejs component of file uploader