JavaScript Tree UI widget

JavaScript Tree allows you to present hierarchically organized data in a nice and logical manner. With the help of this Webix UI framework widget you can clearly see all levels of dependency within the data in your web app.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Samples of PHP, Node.js, .NET integration
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Expand/collapse by click

Webix Tree JS nodes containing child nodes can be easily expanded or collapsed with a single click in order to keep the screen clear of superfluous information.

Click on the 'plus' icon to see the whole tree

Dynamic Data loading

Dynamic data loading allows for asynchronous JavaScript tree level loading. Initially only first-level items can be loaded. Afterwards, when you open the tree branch, its ID is sent to the server and the related data is dynamically loaded.

Click on the 'plus' icon to load the branch

Two/Three state checkboxes

The widget features two- and three-state checkbox modes. The latter mode provides the additional checkbox state - the indeterminate checkbox. It allows checking all JavaScript tree subitems by clicking the parent checkbox while indicating whether some of the nested checkboxes are not selected.

The sample demonstrates use of 3-state (the 1st tree) and standard 2-state checkboxes (the 2nd tree).

Keyboard navigation

This JavaScript Tree provides you with keyboard navigation and hotkey management, which allows you to make fewer mouse manipulations while working with the widget.

Click on any item and use arrows keys to navigate via keyboard

CRUD operations

The widget allows making a great number of CRUD operations with data: adding, deleting, copying and pasting and even in-line editing.

Click on any item to edit it.

Icons

The design of Webix widget is entirely defined with CSS which makes working on apps quicker and simpler. You can use a set of icons to decorate the Webix Tree JS.

Drag-and-drop

Advanced JavaScript drag-and-drop properties enable you to drag tree items not only within the same Tree or between Trees, but even between Tree and Datatable, List, Dataview and TreeTable.

Select multiple items (Ctrl+click) and start to drag. The tooltip will display the total number of the items being dragged

Saving the JavaScript Tree state

This widget allows you to save the state of the Tree to cookie, local or session storage to restore it later. The state object contains data concerning open and selected nodes. The functionality can be used to prevent end users from loosing the state of their Tree during page reload.

Click on 'Save state', collapse, expand and select items. Then click 'Restore state'

Clipboard

You can use clipboard while working with this component. This feature can be used in several modes: after you have copied the contents of a selected item with the Ctrl+C action, you can either paste the text to another node directly, or create its child item with the copied text. Besides, you can specify a custom logic for the paste operation.

Click on any item and press Ctrl+C to copy it. Set the cursor into the textarea and press Ctrl+V to paste the copied text.

Filtering

The JavaScript Tree component supports different filtering modes. You can define whether children of the filtered items should be displayed. Also, you can specify that the parents of the filtered items should be expanded. Finally, you can set the nesting level for filtering. Combining these three options, you can define filtering rules that suit you in the best way.

Sorting

The widget nodes can be sorted. You can define custom sorting logic to meet your particular requirements. For example, it's possible to sort only parent nodes while keeping the children as they are.