Angular 10 Tree Grid To Show Hierarchical Data Component

Angular Tree Grid to show hierarchical data. It supports sub-grid/nested-grid. If the data needs to be grouped by fields, check out this ngtreegrid package. If the head needs fixing/freezing and the body needs to be scrollable, check out the Fix Header Grid package.

angular tree grid material, angular tree table example, angular material tree grid example, angular tree component, ngx angular tree grid library

How to make use of it:

Installation:

npm i angular-tree-grid

1. Import the AngularTreeGridModule into your application’s module.

import {AngularTreeGridModule} from 'angular-tree-grid';

2. Add it to your import collection.

@NgModule({
      imports: [
        AngularTreeGridModule
      ]
    })

3. The data should look like the one below. The data must contain a unique field (identifier) and a parent field (parent) which is a foreign key for the identifier.

data= [
   { id: 1, name: 'Ashok', age: 60, parent: 0},
   { id: 2, name: 'Sam', age: 40, parent: 1},
   { id: 3, name: 'Sriya', age: 36, parent: 1},
   { id: 4, name: 'Prakash', age: 20, parent: 2},
   { id: 5, name: 'Sneha', age: 21, parent: 3},
   { id: 6, name: 'Pritam', age: 60, parent: 34},
   { id: 7, name: 'Roshan', age: 40, parent: 6},
   { id: 8, name: 'Suraj', age: 36, parent: 6},
   { id: 9, name: 'Swarup', age: 20, parent: 8},
   { id: 10, name: 'Aditya', age: 21, parent: 8},
 ];

Angular Tree Component Plugin/Github


See Demo And Download

Official Website(debabratapatra): Click Here

This superior jQuery/javascript plugin is developed by debabratapatra. For extra Advanced Usage, please go to the official website.

Share