How To Create Nested Table Structure In Angular?

Place the following code in html file.

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8"> <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay"> <th mat-header-cell *matHeaderCellDef> {{column}} </th> <td mat-cell *matCellDef="let element"> {{element[column]}} </td> </ng-container> <ng-container matColumnDef="expand"> <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th> <td mat-cell *matCellDef="let element"> <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()"> </button> </td> </ng-container> <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns --> <ng-container matColumnDef="expandedDetail"> <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length"> <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"> <div> <div class="example-element-name"> Name: {{element.name}} </div> <div class="example-element-weight">Address: {{element.address}} </div> </div> </div> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr> <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;" class="example-element-row" [class.example-expanded-row]="expandedElement === element" (click)="expandedElement = expandedElement === element ? null : element"> </tr> <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr> </table>

Expand the row using the click function:-

<button mat-icon-button aria-label="expand row"

(click)="(expandedElement = expandedElement === element ? null : element);">

      </button>

The following code will display the details in the column

 <ng-container matColumnDef="expandedDetail">

    <td mat-cell *matCellDef="let element"

[attr.colspan]="columnsToDisplayWithExpand.length">

      <div class="example-element-detail"

           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">

        <div>

         

          <div class="example-element-name"> Name: {{element.name}} </div>

          <div class="example-element-address">Address: {{element.address}} </div>

        </div>

      </div>

    </td>

  </ng-container>

Add the following code in .css

table {

    width: 100%;

  }

 

  tr.example-detail-row {

    height: 0;

  }

 

  tr.example-element-row:not(.example-expanded-row):hover {

    background: whitesmoke;

  }

 

  tr.example-element-row:not(.example-expanded-row):active {

    background: #efefef;

  }

 

  .example-element-row td {

    border-bottom-width: 0;

  }

 

  .example-element-detail {

    overflow: hidden;

    display: flex;

  }

 

  .example-element-diagram {

    min-width: 80px;

    border: 2px solid black;

    padding: 8px;

    font-weight: lighter;

    margin: 8px 0;

    height: 104px;

  }

 

  .example-element-symbol {

    font-weight: bold;

    font-size: 40px;

    line-height: normal;

  }

 

  .example-element-description {

    padding: 16px;

  }

 

  .example-element-description-attribution {

    opacity: 0.5;

  }

  

Write the following code in ts file.

import { Component } from '@angular/core';

import {animate, state, style, transition, trigger} from '@angular/animations';

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

  animations: [

    trigger('detailExpand', [

      state('collapsed', style({height: '0px', minHeight: '0'})),

      state('expanded', style({height: '*'})),

      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),

    ]),

  ]

})

export class AppComponent {

  title = 'angularnestedtable';

  dataSource = ELEMENT_DATA;

  columnsToDisplay = ['name', 'weight'];

  columnsToDisplayWithExpand = [...this.columnsToDisplay, 'expand'];

  expandedElement!: PeriodicElement | null;

}

 

export interface PeriodicElement {

  name: string;

  address: string;

  weight: number;

}

 

const ELEMENT_DATA: PeriodicElement[] = [

  {

    name: 'Anand',

    address: 'Noida',

    weight: 56,

  },

  {

 

    name: 'Balaji',

    address: 'Patna',

    weight: 72,

  },

  {

    name: 'Ved',

    address: 'Boring Road',

    weight: 85,

  }

];

The output will be :