< DHTMLX Suite 7.2 with a New Form Control, Multiselect Editor for Grid, Custom Scrollbar, and Much More

JavaScript TreeGrid Control

JavaScript TreeGrid control offers a convenient way of working with a large amount of data presented in hierarchical HTML5 tree tables.
It is a perfect fit for dynamic dashboards, reports, CRM systems, and other data-heavy applications.

JavaScript TreeGrid Features

  • Columns' drag-n-drop
  • Grouping data
  • Sorting data
  • Filtering data
  • Ability to hide/show rows
  • Auto-calculated values in footer/header
  • Number formatting
  • Multiline cell content
  • Templates for tooltips
  • Marking cells with min and max values
  • Content alignment
  • Custom HTML content
  • Multiline header and footer
  • Vertical and horizontal spans
  • TypeScript support
  • Flexible customization
  • Touch support
  • Frozen columns
  • Data editing
  • Exporting data to Excel
  • Custom templates for the content of cells
  • Ability to be initialized without data
  • Adding custom marks to cells
  • Ability to disable tooltips
  • Adjusting columns' width
  • Auto width for columns
  • Highlighting a selected cell and row
  • Automatic adding of an empty row to the end of Grid
  • Cross-browser compatibility
  • IE11+ support
  • Rich JavaScript API
  • Data loading in the JSON format

How to Create a JavaScript Tree Grid

Follow these 5 simple steps to build a JavaScript/HTML5 tree table with DHTMLX:
1
Create an HTML file
2
Include the source files of the TreeGrid component in the header
3
Add a container with an id - e.g. “treegrid_container”
4
Initialize the widget with the dhx.TreeGrid object constructor
5
Set the configuration settings if needed and load data into the tree grid

Why Choose DHTMLX JavaScript TreeGrid Control?

Feature-rich JavaScript tree grid

DHTMLX tree grid deploys all of the powerful functionality of the grid and offers a flexible and robust solution for adding a full-featured javascript treegrid into web applications. The component provides advanced drag-and-drop, the ability to work with frozen columns, 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 and collapse table rows makes our JavaScript treegrid control a perfect solution for displaying tree tables with an unlimited number of rows. A range of API methods enables you to scroll the treegrid table to specific coordinates and cells. Filtering and sorting features contribute to a more convenient work with a large amount of data. Besides, it’s possible to export data to Excel.

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 elements you’d like to modify: header and footer cells, entire rows, particular table cells or the whole tree table. Besides, you can apply custom styling to mark cells on the basis of a predefined logic.

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. In order to integrate the component into your projects based on these frameworks, you can download a free 30-day evaluation version of the Suite library together with other UI widgets and benefit from our official technical support.

Other Suite Widgets

DHTMLX TreeGrid Licensing

Commercial Enterprise Ultimate
License Terms
Commercial
Enterprise
Ultimate
Developers
Commercial
5
Enterprise
20
Ultimate
Projects
Commercial
1
Enterprise
5
Ultimate
SaaS
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Commercial
Enterprise
Ultimate
Support Plan
Commercial
Standard Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
Commercial
Minor & major updates
Bug fixes
Enterprise
Minor & major updates
Bug fixes
Ultimate
Minor & major updates
Bug fixes
Emergency bug fixes
Tickets
Commercial
10
Enterprise
30
Ultimate
Response Time
Commercial
72h
Enterprise
48h
Ultimate
24h
Personal Acccount Manager
Commercial
Enterprise
Ultimate
demo-screenshot

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

Up to 40% off

If you choose the whole Suite library instead
of buying DHTMLX UI components separately:

Suite Commercial - $799

Suite Enterprise - $1699

Suite Ultimate - $3499

Need help with DHTMLX TreeGrid integration into your app? Contact us