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

JavaScript TreeGrid Control

JavaScript TreeGrid control offers a convenient way of working with large data sets presented in hierarchical HTML5 tree tables. It is a perfect fit for dynamic dashboards, reports, CRM systems, and other data-heavy applications. Available as a PRO functionality of the DHTMLX Grid component.

Try JavaScript TreeGrid Live Demo

Open a demo on desktop
Being an integral part of DHTMLX Grid, the TreeGrid component is a robust data visualization and management tool,
ideal for web apps that require hierarchical data structures.
Capterra Shortlist 2024
GetApp Category Leaders 2024
Software Advice Front Runners 2024
Best Meets Requirements
High Performer EMEA
Users Most Likely To Recommend
Easiest to Use

Improve User Experience with Our JavaScript TreeGrid Widget

Handy hierarchical data management

The DHTMLX TreeGrid component makes it easy to display hierarchical parent-child relationships using collapsible rows. It also features comprehensive drag-and-drop functionality, allowing end-users to reorder rows and columns within a grid. Developers can control drag-and-drop behavior by enabling or disabling it for specific columns in the nested data table.

Advanced user interactivity

The component simplifies nested tabular data management with built-in inline editing, sorting, filtering, and searching options. End-users can modify text directly in cells, select dates via a date picker, toggle checkboxes, or choose values from a combo box. Additionally, sorting can be enabled with a simple click on column headers, with options to customize or disable this feature.

Smooth navigation through big data

Lazy loading optimizes performance by rendering data dynamically as end-users expand tree branches, reducing initial load times for extensive data structures. By integrating the JavaScript pagination widget, you allow your users to navigate quickly between pages using buttons or an input field. This eliminates the need for excessive scrolling, streamlining access to specific rows and improving the overall user experience.

Why Choose DHTMLX JavaScript TreeGrid Control?

Feature-rich JavaScript tree grid
DHTMLX tree grid deploys advanced drag-and-drop, the ability to work with frozen columns and rows, and show resulting values like sums, minimal, maximal or average values in particular cells of a footer or header.
Fast performance with large data sets
The ability to dynamically expand table rows makes our JavaScript treegrid control a perfect solution for displaying tree tables with an unlimited number of rows. Filtering and sorting features contribute to a more convenient work with a large amount of data.
Data export to Excel
Our JavaScript treegrid widget allows exporting data to Excel, making it easy to share and analyze hierarchical datasets outside your web app. End-users can generate an Excel file that preserves the structure of the TreeGrid, including nested rows and columns.
A highly customizable HTML5 tree table
DHTMLX TreeGrid allows you to create completely customizable JavaScript tree tables. Styling a treegrid according to your needs takes little effort, as you just need to create new CSS classes with custom settings and apply them to the required elements.
Support for Angular, React, and Vue.js
Our JavaScript/HTML5 TreeGrid goes with support for the widely used client-side frameworks - Angular, React, and Vue.js. We suggest using specially-designed wrappers for a smooth integration in your projects.
Start with a free trial
Download the DHTMLX Grid trial version and get access to the PRO functionality free of charge for 30 days. You can also rely on the assistance of our official technical support team during evaluation.

DHTMLX Demos with JavaScript/HTML5 TreeGrid

 
Documentation
Explore the documentation
The DHTMLX documentation offers detailed guides and tutorials to streamline your learning experience with the data grid widget and accelerate your development process.
Samples
Experiment with code snippets
Test the JavaScript and HTML code of the treegrid mode of the Grid widget, share snippets with your team or DHTMLX support specialists, and seamlessly integrate ready-made code into your web app.
Free trial
Download JS Grid free trial
Download a free 30-day trial of DHTMLX Grid. Access PRO functionality and get help from the DHTMLX tech support team throughout the trial period.
Optimus
Use Optimus framework
Learn how to accelerate the development of DHTMLX-based web applications with DHTMLX Optimus - a lightweight JavaScript framework.
Templates
Apply CSS templates
Explore this page to learn how to build a user-friendly JavaScript web app with DHTMLX Suite in just a few steps and discover a variety of CSS templates to enhance your design.
Community forum
Browse DHTMLX community forum
Besides the official tech support channel during evaluation, you can learn from fellow developers on our community forum. We also monitor topics and answer common questions.

Latest Blog Posts

Front-End Performance Issues: Causes and Ways to Address Them with Frameworks and UI Libraries
Data Analysis with DHTMLX JavaScript Libraries
DHTMLX Grid: How to Create a Data Table in JavaScript
What's new
Discover the recently launched DHTMLX Grid versions, fresh developer guides, and tutorials with code snippets and practical tips from our tech team.
Get up to 40% off all UI widgets
If you choose the whole Suite library instead of buying DHTMLX Grid and other UI components separately:
Suite Individual - $799
Suite Commercial - $1699
Suite Enterprise - $3499
Suite Ultimate - $6999
Send
a Question