A modern fork/re-implementation of dnd-tree-view from Sparklin Labs, rewritten to be fully compatible with the Web Platform using EventTarget and native ES2022 features.

💃 Getting Started

This package is available in the Node Package Repository and can be easily installed with npm or yarn.

$ npm i @jolly-pixel/arbor
# or
$ yarn add @jolly-pixel/arbor

👀 Usage example

import { TreeView } from "@jolly-pixel/arbor";

const container = document.querySelector<HTMLDivElement>(
  "#tree"
);

const tree = new TreeView(container, {
  multipleSelection: true,
  dragStartCallback(event, node) {
    // Optional: cancel drag for some nodes
    console.log("Dragging", node.textContent);

    return true;
  },
  dropCallback(event, location, nodes) {
    // Optional: handle drop and return false to cancel move
    console.log("Dropped", nodes, "at", location);

    return true;
  }
});

const group = document.createElement("li");
group.textContent = "Group A";

const item = document.createElement("li");
item.textContent = "Item A.1";

tree.append(group, "group");
tree.append(item, "item", group);

Then you can include a minimal stylesheets

.tree {
  list-style: none;
}

.tree .group > .toggle::before {
  content: "▸";
  display: inline-block;
  margin-right: 5px;
  cursor: pointer;
}

.tree .group.collapsed > .toggle::before {
  content: "▾";
}

📚 API

• TreeView

✨ Contributors guide

If you are a developer looking to contribute to the project, you must first read the CONTRIBUTING guide.

Once you have finished your development, check that the tests (and linter) are still good by running the following script:

$ pnpm run test
$ pnpm run lint

CAUTION

In case you introduce a new feature or fix a bug, make sure to include tests for it as well.

🚀 Running the examples

One interactive example live in the examples/ directory and are served by Vite. Start the dev server from the package root:

pnpm --filter @jolly-pixel/arbor preview

📃 License

MIT