❤
npm
Sign UpSign In

es6-tree

0.3.4 • Public • Published

es6-tree

tree view for web with vanilla ES6 Javascript
Using Octicons from Github

Default es6-tree example 1 Customized es6-tree example 2

  • Override styles easily
  • Select event as node is clicked
  • Select node from outside
  • Supports anchor with href

Dependencies

none

Usage

<head>
    <link rel="stylesheet" href="/es6tree.css">
    <link rel="stylesheet" href="/icons/octicons.css">
</head>
<body>
    <div id="tree-div"></div>
</body>
import EsTree from "es6-tree";
const tree = new EsTree('tree-div', config, data);

Config

You can pass null to use default config.
Types will be mapped to the type in your data, customize their styles like this:

const config = {
    types: {
        folder: {
            css: "icon icon-file-directory"
        },
        file: {
            css: "icon icon-file"
        }
    }
};

Data

const data = [{
    id: "master-node",
    name: "#",
    type: "main",
    expanded: true,
    children: [{
            id: "folder-1",
            type: "folder",
            name: "A folder",
            children: [{
                    id: "article-1",
                    name: "An article",
                    type: "file",
                    href: "/blog/1"
                },
                {
                    id: "article-2",
                    name: "Another article",
                    type: "file"
                }
            ]
        }]
}];

Events

On select

tree.on("select", (n) => {
    console.log(`Node with id ${n.id} and type ${n.type} selected`);
});

Methods for interaction

select(id)

Select a node with code, will open all parent nodes as well

tree.select("article-2");

open(id)

Open a node that has children with code

tree.open("folder-1");

Override styles

color on hover nodes

.es6-tree summary:hover {
    background: purple;
}

color for selected node

.es6-tree span[selected="true"]{
    background-color: red;
}

color on icon

.es6-tree .node-text.icon-file::before {
    color: #e6d06c;
}

Readme

Keywords

Package Sidebar

Install

npm i es6-tree

Repository

github.com/atlemagnussen/es6-tree

Homepage

github.com/atlemagnussen/es6-tree#readme

Weekly Downloads

1

Version

0.3.4

License

MIT

Unpacked Size

132 kB

Total Files

17

Last publish

Collaborators

  • atle
Try on RunKit
Report malware