Adequate Infosoft
Question:
How To Create Nested Table Structure In Angular?
You can use components in Angular to create nested table structures that show the hierarchy of your data. Write the following code in the HTML file:
Use the click function to expand the row:
<button mat-icon-button aria-label="expand row"
(click)="(expandedElement = expandedElement === element ? null : element);">
</button>
Use the below given code to 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>
Now add the below given 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 :
S
Suggested blogs:
>How to add number together and despite using parseFloat I still get NaN
>A complete guide on Life Cycle of Angular Component
>Setting up the local environment for Angular development
>How can I include Angular Material in Angular 17?
