I have the below data
[
{
_id: c9d5ab1a,
subdomain: wing,
domain: aircraft,
part_id: c9d5ab1a,
info.mimetype: application/json,
info.dependent: parent,
nested: [
{
domain: aircraft,
_id: c1859902,
info.mimetype: image/jpeg,
info.dependent: c9d5ab1a,
part_id: c1859902,
subdomain: tail
}
]
},
{
_id: 1b0b0a26,
subdomain: fuel,
domain: aircraft,
part_id: 1b0b0a26,
info.mimetype: image/jpeg,
info.dependent: no_parent
}
]
Here if info.dependent: parent
then it is nested and if info.dependent: no_parent
then it does not have a child. I tried to create a dynamic table but I am stuck on how to make it collapsible/expandable with a nested table.
Here is my code on stackblitz.
<mat-table class= mat-elevation-z8 [dataSource]=dataSource>
<ng-container [matColumnDef]=col *ngFor=let col of displayedColumns>
<mat-header-cell *matHeaderCellDef> {{ col }} </mat-header-cell>
<mat-cell *matCellDef=let element> {{ element[col] }} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef=displayedColumns></mat-header-row>
<mat-row *matRowDef=let row;columns:displayedColumns></mat-row>
</mat-table>
.ts
public data = [
{
_id: c9d5ab1a,
subdomain: wing,
domain: aircraft,
part_id: c9d5ab1a,
info.mimetype: application/json,
info.dependent: parent,
nested: [
{
domain: aircraft,
_id: c1859902,
info.mimetype: image/jpeg,
info.dependent: c9d5ab1a,
part_id: c1859902,
subdomain: tail
}
]
},
{
_id: 1b0b0a26,
subdomain: fuel,
domain: aircraft,
part_id: 1b0b0a26,
info.mimetype: image/jpeg,
info.dependent: no_parent
}
];
dataSource = new MatTableDataSource([]);
displayedColumns = ['_id', 'subdomain', 'domain', 'part_id', 'info.mimetype', 'info.dependent'];
constructor(){
this.displayedColumns = this.displayedColumns;
this.dataSource = new MatTableDataSource(this.data);
}
The nested format is like below
row 1 --> _id ,subdomain,domain,info.dependent
When we click on that particular row, then it has to expand and display the nested data in a table with the column names and row data.
nested: [
{
domain: aircraft,
_id: c1859902,
info.mimetype: image/jpeg,
info.dependent: c9d5ab1a,
part_id: c1859902,
subdomain: tail
}
]