< DHTMLX Suite 9.0: Grid Widget with Tree Mode, Data Grouping, Customizable Totals, Input Masks, and Much More

JavaScript Tree

dhtmlxTree is an easily configurable JavaScript/HTML tree with convenient drag-n-drop, inline editing, and wide customization options.
Part of the state-of-the-art Suite UI library.

Product Features

  • Cross-browser compatibility
  • Rich JavaScript API
  • Flexible customization
  • Data loading from JSON
  • Editable items (inline editing)
  • Inline editing
  • Keyboard navigation
  • Collapsed mode
  • Multiselection
  • Advanced drag-and-drop capabilities
  • Checkboxes (two/three states)
  • Custom folders
  • Dynamic data rendering
  • Custom templates for tree nodes
  • Accessibility support

DHTMLX Suite Demos with JavaScript Tree

Build User-Friendly Navigation with JavaScript Tree Widget

Here are key features of DHTMLX Tree you can set to create intuitive hierarchical navigation interfaces for your web apps.

Easily managing tree items
The widget provides an enhanced drag-n-drop functionality allowing users to reorder items in a tree, copy a dragged item, and drag items between trees. You can add checkboxes to tree items and configure their behavior as well as enable inline text editing via double click.
Adding custom templates
DHTMLX Tree allows you to modify its look and feel by setting custom templates with HTML content and adding events to any of its nodes. For instance, you can enable your users to delete a tree item from the UI by clicking a corresponding icon.
Data sorting and filtering
Filtering and sorting provide different ways to customize the data view. For example, you can focus on a specific set of tree items that contain the letter A by filtering its content. Besides, it’s possible to sort tree nodes in ascending or descending order.

How to Start Building a JavaScript Tree

Take 5 quick steps to create a simple HTML tree with DHTMLX:
1
Create an HTML file
2
Include the Tree source files in the header
3
Add a container with an id - e.g. “tree_container”
4
Initialize the widget with the dhx.Tree object constructor
5
Specify the necessary configuration properties

Why Choose a Tree Component by DHTMLX?

Create a modern JavaScript/HTML5 tree
dhtmlxTree is a feature-rich JavaScript tree view library that allows you to quickly add a nice-looking tree structure on a web page. The component provides a high-performance navigation system with dynamic data rendering, keyboard shortcuts, and inline editing. Advanced drag-n-drop enables reordering items on the fly with an ability to save elements dragged from an original tree.
Control your tree with JavaScript API
Rich API gives you an advantage of configuring the behavior and appearance of your JavaScript tree the way you need. You can equip tree items with checkboxes and manage them with the help of API enabling, disabling, checking, and unchecking the checkboxes of your choice. Besides, you can transform tree items into custom folders.
Customize the UI of your tree
Flexible customization makes it possible to change every aspect of the look and feel of your tree widget. You can create new CSS classes with the styling that would match your web app. You can replace the default Material-based icon font pack with a custom one to complement the UI of your JavaScript tree. The ability to create custom templates makes it easier to adjust the appearance of the Tree elements to your needs.
Integrate with Angular, React, and Vue.js
Our widgets, including dhtmlxTree, come with support for the most widespread frameworks in the developer community - Angular, React, and Vue.js. We provide special wrappers to integrate our components into your projects. It’s possible to try them out during a 30-day evaluation period.

Other Suite Widgets

dhtmlxTree Licensing

Individual Commercial Enterprise Ultimate
License Terms
Individual
Commercial
Enterprise
Ultimate
Developers
Individual
1
Commercial
5
Enterprise
20
Ultimate
Projects
Individual
1
Commercial
1
Enterprise
5
Ultimate
Use in SaaS (unlimited end-users)
Individual
Commercial
Enterprise
Ultimate
Source code
Individual
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Individual
Commercial
Enterprise
Ultimate
Support Plan
Individual
Standard Support
Commercial
Premium Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
Individual
1 year
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
Individual
Major, minor, and maintenance updates
Commercial
Major, minor, and maintenance updates
Enterprise
Major, minor, and maintenance updates
Ultimate
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Individual
10
Commercial
30
Enterprise
50
Ultimate
Response Time
Individual
72h
Commercial
48h
Enterprise
48h
Ultimate
24h
Personal Account Manager
Individual
Commercial
Enterprise
Ultimate
Up to 40% off
If you choose the whole Suite library instead
of buying DHTMLX UI components separately:

Suite Individual - $799

Suite Commercial - $1699

Suite Enterprise - $3499

Suite Ultimate - $6999

demo-screenshot

File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

If you have an open-source (GNU GPL v2) project and you are not interested in PRO features, you may use DHTMLX Tree Standard Edition for free.
It comes without official technical support, but you can use the community forum instead.

Need help with dhtmlxTree integration into your app? Contact us