Inspire Tree

Inspired Javascript Tree

Plugin / form widgetTree / Explorer component
helion3/inspire-treewww.inspire-tree.com/inspire-tree

README

Badge

Inspire Tree


Inspire Tree is a performance-driven UI tree component. This core library is "headless" (just an API, no DOM) but we do provide a DOM rendering library. We also have some basic example implementations in other popular libraries/frameworks: AngularJS, Angular2, React, and Inferno.

- Website & Demos
- API Docs
- Changelog


8.0 Overhaul & Modernization


Progress is currently underway to completely overhaul this repository for typescript support, monorepo design, better deployments, better tests, etc.

I have no plans to overhaul the API, only to modernize the code and improve it.

I don't have a timeline.

Features:


- Detailed and fluent API.
- Typescript Support.
- Events everywhere.
- Load data directly, via promises, or callbacks.
- Load child nodes directly or dynamically (or a mix of both).
- Tri-state checkboxes (optional).
- Multiselect (optional).
- Inline editing (optional).
- Search by plain string, RegExp, custom matcher, or external resources (optional).
- Sorting (optional).
- AMD and CommonJS support (RequireJS, Node/Webpack).
- Supports multiple instances on a single page.
- API methods to simplify moving nodes between instances.
- Solid coverage by automated tests.

Installation


- Yarn: yarn add --dev inspire-tree or
- NPM npm install --save-dev inspire-tree

If you're using InspireTree in a browser environment, and are not using a module bundler like
Webpack, Browserify, rollup, etc, you'll need to ensure lodash is available.

Usage


At the very least you must provide data source

  1. ```js
  2. var tree = new InspireTree({
  3.     data: [{
  4.         text: 'A node'
  5.     }]
  6. });
  7. ```

Node objects must have at least a text property. Additional properties are listed below in "Node Configuration".

Usage with Inspire Tree DOM


If you're using our DOM rendering, you need to pass in two arguments: the tree instance, and a DOM target (css selector):

  1. ```js
  2. new InspireTreeDOM(tree, {
  3.     target: '.tree'
  4. });
  5. ```

For more information regarding InspireTreeDOM, see the README.

Data Loading and Initialization Errors


InspireTree will try to load nodes on initialization. If an error occurs, it
will be caught in a promise that's cached as tree._loader.promise. This allows you to track the promise returned,
which can't be returned from the InspireTree constructor. This behavior may change in future major releases.

Any calls to load-related methods can use the returned promise normally.