This React Tree Grid example demonstrates the overview of basic Tree Grid features such as sorting, filtering, conditional formatting, column template and scrolling.
Province | Population (Million) | GDP Rate % | Credit Rating | Unemployment Rate | Coordinates | Area | Time Zone |
|---|---|---|---|---|---|---|---|
 USA | 327.892 | 2.2 % | 9147590 km2 |  UTC -5 to -10) | |||
Washington, D.C. | 0.693972 | 4.7 % | 184827 km2 | UTC -5) | |||
New York | 8.175133 | 1.9 % | 783.8 km2 | UTC -5) | |||
New Mexico | 2.08807 | 0.1 % | 315194 km2 | UTC -7) | |||
Alaska | 0.297832 | -0.5 % | 1717856 km2 | UTC -9) | |||
 Greece | 10.783625 | 1.5 % | 131957 km2 | UTC +2.0) | |||
Athens | 0.664046 | 1 % | 2929 km2 | UTC +2.0) | |||
Arcadia | 0.058799 | 2.5 % | 28.83 km2 | UTC +2.0) | |||
Argolis | 0.097044 | 2.1 % | 2154 km2 | UTC +2.0) | |||
 Germany | 82.293457 | 2.2 % | 357386 km2 | UTC +1.0) | |||
Berlin | 3.539234 | 4.1 % | 891.8 km2 | UTC +1.0) | |||
Bavaria | 12.997204 | 3.1 % | 70550 km2 | UTC +1.0) | |||
Saxony | 4.081308 | 3.8 % | 18416 km2 | UTC +1.0) | |||
 Bangladesh | 185.584811 | 7.3 % | 147570 km2 | UTC +6.0) | |||
Dhaka | 10.3565 | 7.28 % | 306.4 km2 | UTC +6.0) | |||
Barisal | 0.202242 | 6.3 % | 16.37 km2 | UTC +6.0) | |||
Chittagong | 3.920222 | 6.3 % | 168.1 km2 | UTC +6.0) | |||
 Egypt | 99.375741 | 4.2 % | 1001449 km2 | UTC +2.0) | |||
Cairo | 7.734614 | 3.7 % | 528 km2 | UTC +2.0) | |||
Alexandria | 3.811516 | 4.2 % | 46.42 km2 | UTC +2.0) | |||
Giza | 2.443203 | 4.1 % | 1580 km2 | UTC +2.0) | |||
 Canada | 36.953765 | 3 % | 9984670 km2 | UTC -3.3 to -8) | |||
Ontario | 14.374084 | 2.8 % | 908607 km2 | UTC -5) | |||
Quebec | 8.455402 | 1.9 % | 1542056 km2 | UTC -4 to -5) | |||
Alberta | 4.334025 | 1.6 % | 661848 km2 | UTC -7) | |||
Manitoba | 1.348809 | 2.9 % | 647797 km2 | UTC -6) |
The Tree Grid is used to represent the hierarchical data in a tabular format, combining the visual representation of Grid and TreeView controls. It represents the data from datasource such as an array of JSON objects, OData web services, or DataManager binding data fields to columns or self-referential datasource.
In this demo, Tree Grid features such as sorting, filtering, conditional formatting, column template and scrolling are used.
More information on the Tree Grid instantiation can be found in this documentation section.