Display data hierarchically, its optimized design provides high performance and load millions of records in just a few seconds.

Bind data seamlessly with various local and remote data sources such as JSON, OData, WCF, and RESTful web services with the help of a data manager.

Angular TreeGrid is designed to visualize self-referential and hierarchical in a tabular format. This in turns displays the relationship between parent and child records.

The Angular Tree Grid performs create, read, update, and delete operations (CRUD) with observable data. It edits with an Array of JSON or remote data service with the data manager.

The Tree Grid has a highly responsive layout and an optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS.

Using templates, users can create a custom UI in the Angular Tree Grid based on their application need using a wide range of template options.

Cutting edge design with 5+ built-in themes such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the online Theme Studio tool to customize themes of Angular Tree Grid easily.

Globalization and localization

Enables users from different locales to use the Tree Grid by formatting dates, currency, and numbering to suit their preferences.

• html
• ts

<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='350' childMapping='subtasks'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90><e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>

import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';

@Component({
    selector: 'ej2-treegrid-container',
    templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
    public data: Object[] = [];

    ngOnInit(): void {
        this.data = sampleData;
    }
}

Skeleton loading indicator

The Tree Grid shows the shimmer effect as a loading indicator while fetching data and binding it to the tree grid during initial rendering, refreshing, or after performing grid actions like sorting, filtering, and more. The Tree Grid offers two types of effects, spinner and shimmer.

• Shimmer loading indicator documentation
• Example for shimmer loading indicator

Column

Columns define the schema of a data source in Angular Tree Grid. Features include formatting, column definitions, text wrapping, column chooser, column menu, column reordering, and other important features.

• More details on column behaviors

Paging

Through paging, a segment of data can be viewed from the assigned data source. The Angular Tree Grid offers built-in pager UI with options to customize its entire UI. It also has an on-demand paging mode for effective data retrieval from remote web services.

• More details on paging features

Sorting

The Angular Tree Grid allows users to sort a column by simply clicking on the header. A Ctrl + header click performs multi-sorting. Sort data in either ascending or descending order.

• More details on sorting features

Filtering

Filtering helps view specific or related records that meet a given filtering criteria. It supports various filter types that include powerful Excel-like filter. The Angular Tree Grid filter allows users to choose appropriate filter types, define their own custom filtering logic, and customize the filtering UI based on their application needs. Filtering with related parent or child records can be defined.

• More details on filtering features

Selection

Angular Tree Grid allows selecting rows or cells. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.

• More details on selection features

Editing

The Angular TreeGrid provides full support to create, read, update, and delete operations (CRUD). In addition to built-in editor components to edit a particular column value, using template support users can create custom editor components that suit their application needs. It performs editing operations with JSON collection or remote data service with the help of data manager.

• More details on editing features

Aggregation

Aggregates for column values can easily be displayed using the aggregate feature. Aggregates can be customized to show their value in every hierarchy with a set of predefined summary types.

• More details on aggregation

Angular TreeGrid component allows you to set tooltips for treegrid cells. Hover over the tree nodes to display tooltip text.

• Custom tooltip documentation