Fancytree

<!-- [](https://github.com/mar10/grunt-yabs) --> <!-- [](https://travis-ci.com/github/mar10/fancytree) --> <!-- [](https://github.com/prettier/prettier) -->

Fancytree is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading.

NOTE

Fancytree is considered feature-complete. <br> The code is still maintained and bugfixes will be commited. However do not expect new major features.

For a modernized and more capable alternative, consider upgrading to Wunderbaum.

Demo

Get Started

• Try the live demo.
• Read the documentation.
• Check the Q&A forum or Stackoverflow if you have questions.
• Play with jsFiddle, CodePen, or Plunker.
• Contribute

ES6 Quickstart

import $ from "jquery";

import 'jquery.fancytree/dist/skin-lion/ui.fancytree.less';  // CSS or LESS

import {createTree} from 'jquery.fancytree';

import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';

const tree = createTree('#tree', {
  extensions: ['edit', 'filter'],
  source: {...},
  ...
});
// Note: Loading and initialization may be asynchronous, so the nodes may not be accessible yet.

See module loader support and API docs.

Credits

Thanks to all contributors.

<!-- ### Browser Status Matrix [](https://saucelabs.com/u/sauce-fancytree) -->