angular material tree to display organization structure

Question

I want to display organization structure using angular material tree with position, salary, year of services as properties.

class Employee {
  name: string;
  position: string;
  salary: number;
  yearofServices: number;
  reports: Employee[];
 }

For example,

[ 
  {id: 1,
   name:'employee1',
   position: 'president',
   salary: 250000,
   yearofServices: 20,
   reports: [
    {
      id: 2,
      name:'employee2',
      position: 'manager',
      salary: 200000,
       yearofServices: 10,
    },
   {
      id: 3,
      name:'employee3',
      position: 'manager',
      salary: 190000,
       yearofServices: 15,
    }
   ];
]

We want to display four columns:

Name Position Salary YearOfService

Name column is a tree structure according to organization reports hierarchy. For example, if a manager has three reports, the manager node will have three sub nodes.

Is it possible to do this using angular material tree control?

Answer 1

It is possible, see an example here: https://stackblitz.com/edit/angular-m77g7e-semvxp?file=app%2Ftable-basic-example.html

Referenced in https://github.com/angular/components/issues/15187.

Another option is to have two mat-tree components, one for traversing the hierarchy, the other for the fixed columns. You can use the treeControl.isExpanded(node) to toggle visibility on both components. (This will work for the cdk-tree component too.)