Vue tree-grid overview Example

This sample 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

_gridcontrol_header_table

USA	327892000	2.2 %	3.9%	37.0902° N, 95.7129° W	9147590 km ²	UTC -5 to -10
Washington, D.C.	693972	4.7 %	4.3%	38.9072° N, 77.0369° W	184827 km ²	UTC -5
New York	8175133	1.9 %	3.9%	40.7128° N, 74.0060° W	783.8 km ²	UTC -5
New Mexico	2088070	0.1 %	4.7%	34.5199° N, 105.8701° W	315194 km ²	UTC -7
Alaska	297832	-0.5 %	6.3%	64.2008° N, 149.4937° W	1717856 km ²	UTC -9
Greece	10783625	1.5 %	20.8%	39.0742° N, 21.8243° E	131957 km ²	UTC +2.0
Athens	664046	1 %	7.7%	37.9838° N, 23.7275° E	2929 km ²	UTC +2.0
Arcadia	58799	2.5 %	3%	34.1397° N, 118.0353° W	28.83 km ²	UTC +2.0
Argolis	97044	2.1 %	6.2%	37.6525° N, 22.8582° E	2154 km ²	UTC +2.0
Germany	82293457	2.2 %	3.3%	51.1657° N, 10.4515° E	357386 km ²	UTC +1.0
Berlin	3539234	4.1 %	7.7%	52.5200° N, 13.4050° E	891.8 km ²	UTC +1.0
Bavaria	12997204	3.1 %	2.7%	48.7904° N, 11.4979° E	70550 km ²	UTC +1.0
Saxony	4081308	3.8 %	6.2%	51.1045° N, 13.2017° E	18416 km ²	UTC +1.0
Bangladesh	185584811	7.3 %	4.3%	23.6850° N, 90.3563° E	147570 km ²	UTC +6.0
Dhaka	10356500	7.28 %	7.4%	23.8103° N, 90.4125° E	306.4 km ²	UTC +6.0
Barisal	202242	6.3 %	5%	22.7010° N, 90.3535° E	16.37 km ²	UTC +6.0
Chittagong	3920222	6.3 %	4.7%	22.3569° N, 91.7832° E	168.1 km ²	UTC +6.0
Egypt	99375741	4.2 %	9.9%	26.8206° N, 30.8025° E	1001449 km ²	UTC +2.0
Cairo	7734614	3.7 %	11.3%	30.0444° N, 31.2357° E	528 km ²	UTC +2.0
Alexandria	3811516	4.2 %	5.3%	31.2001° N, 29.9187° E	46.42 km ²	UTC +2.0
Giza	2443203	4.1 %	4.7%	30.0131° N, 31.2089° E	1580 km ²	UTC +2.0
Canada	36953765	3 %	5.8%	56.1304° N, 106.3468° W	9984670 km ²	UTC -3.3 to -8
Ontario	14374084	2.8 %	5.9%	51.2538° N, 85.3232° W	908607 km ²	UTC -5
Quebec	8455402	1.9 %	5.6%	46.8139° N, 71.2080° W	1542056 km ²	UTC -4 to -5
Alberta	4334025	1.6 %	7.8%	53.9333° N, 116.5765° W	661848 km ²	UTC -7
Manitoba	1348809	2.9 %	6%	53.7609° N, 98.8139° W	647797 km ²	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.

Example of overview in Vue tree-grid Component