< Meet dhtmlxSuite 6.1 with inline editing, multiselection, multiple drag-n-drop & much more

React Tree Grid

An effective React tree table that allows working with large data volumes. The component of an advanced Suite UI library.

How It Works

Take the following 5 quick steps to build React TreeGrid with DHTMLX:
1
Create a TreeGrid.js file and import files and styles of TreeGrid
2
Create TreeGrid class, which extends the Component class
3
Add an empty container for TreeGrid with the reference to it in the el property using the ref property
4
When the component is initialized, initialize TreeGrid and attach the instance of TreeGrid to the container with the reference to it in the el property
5
Specify a set of configuration properties if needed

Product Features

  • Cross-browser compatibility
  • IE11+ support
  • Flexible customization
  • Rich JavaScript API
  • Data loading in the JSON format
  • Multiline header and footer
  • Columns and rows spans
  • Custom templates for the content of cells
  • Marking cells with min and max values
  • Adding custom marks to cells
  • Auto-calculated values in footer/header
  • Frozen columns
  • Auto width for columns
  • Highlighting a selected cell and row
  • Sorting data
  • Filtering data
  • Exporting data to Excel

Why Choose DHTMLX React Tree Grid?

Multifunctional React tree grid widget

DHTMLX tree table is an extension of Greed component that is aimed to display and allow working with the nested tabular data. The widget deploys all of the robust grid functionality, provides enhanced drag-and-drop, the ability to set frozen columns and display totals like sums, minimal, maximal or average values in specific units of a footer or a header.

Robust performance with massive data

Set up filtering and sorting features that enable working more efficiently with large data sets. A variety of API methods empower users to load data on the fly, scroll the React tree table content to particular coordinates and grid cells. You can create tree tables with an unlimited number of rows (by dynamically expanding and collapsing table rows) and export data into an Excel file.

Sufficient React tree grid customization

You can specify table sizes, highlight a selected cell and the row it belongs to via the configuration properties. Design a tree table according to your specifications by creating custom CSS classes with advanced settings and assign them to any element you want to adapt, including headers, footers, entire rows, particular table cells or the whole tree grid.

Additional support for Angular and Vue.js

dhtmlxTreeGrid allows you to build flexible React tree tables. Besides, this Suite UI widget (just like the rest components) goes with support for the commonly used Angular and Vue.js frameworks. Specially developed wrappers are available with a free 30-day evaluation and can be integrated into your projects to decide if the DHTMLX UI library meets your needs.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

dhtmlxTreeGrid 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 dhtmlxTreeGrid integration into your app? Contact us