Looking to implement a Material table with expandable rows in Angular.
table-tree.html
<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"&grm;
<tr>{{element.creationDate}}</tr>
<tr>{{element.requestId}}</tr>
</td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td
mat-cell
*matCellDef="let element"
[attr.colspan]="columnsToDisplay.length"
>
<div
class="example-element-detail"
[@detailExpand]="element == expandedInfo ? 'expanded' : 'collapsed'"
>
<div class="example-element-position">{{element.creationDate}}</div>
<div class="example-element-description>
{{element.serialNumberProductRefToSupply}}
</div>
<div class="example-element-description">
{{element.serialNumberOriginSupplyToDestination}}
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr
mat-row
*matRowDef="let element; columns: columnsToDisplay;"
class="example-element-row"
[class.example-expanded-row]="expandedInfo === element"
(click)="expandedInfo = element"
></tr>
<tr
mat-row
*matRowDef="let row; columns: ['expandedDetail']"
class="example-detail-row"
></tr>
</table>
table-tree.ts
import { Component } from '@angular/core';
import {
animate,
state,
style,
transition,
trigger
} from '@angular/animations';
@Component({
selector: 'table-tree',
styleUrls: ['table-tree.css'],
templateUrl: 'table-tree.html',
animations: [
trigger('detailExpand', [
state(
'collapsed',
style({ height: '0px', minHeight: '0', display: 'none' })
),
state('expanded', style({ height: '*' })),
transition(
'expanded <=> collapsed',
animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
)
])
]
})
export class TableTree {
dataSource = MoveOrderData;
columnsToDisplay = [
'Creation Date',
'Request ID',
'Issue',
'Request Type',
'Managed by',
'Product ref to supply',
'Origin supply to Destination'
];
rowsToDisplay = [
'creationDate',
'requestId',
'issue',
'requestType',
'managedBy',
'serialNumberProductRefToSupply',
'serialNumberOriginSupplyToDestination'
];
expandedInfo: MoveOrderAuthorizations;
}
export interface MoveOrderAuthorizations {
creationDate: string;
requestId: number;
issue: string;
requestType: string;
managedBy: string;
serialNumberProductRefToSupply: string;
serialNumberOriginSupplyToDestination: string;
}
const MoveOrderData: MoveOrderAuthorizations[] = [
{
creationDate: `01/01/2021`,
requestId: 139322,
issue: ``,
requestType: `Evacuation`,
managedBy: `AGV`,
serialNumberProductRefToSupply: `ML132345XO1211321AND11432001`,
serialNumberOriginSupplyToDestination:`SA-11EOL-LN001`
},
{
creationDate: `01/01/2021`,
requestId: 139323,
issue: `Destination not found`,
requestType: `Supply`,
managedBy; `AGV`,
serialNumberProductRefToSupply: `ML132345XO1211321AND11432002`,
serialNumberOriginSupplyToDestination: `RE-11WIP-11E03`
}
];
In table-tree.ts, there are defined arrays for the columns and rows data.
columnsToDisplay = [
'Creation Date',
'Request ID',
'Issue',
'Request Type',
'Managed by',
'Product ref to supply',
'Origin supply to Destination'
];
rowsToDisplay = [
'creationDate',
'requestId',
'issue',
'requestType',
'managedBy',
'serielNumberProductRefToSupply',
'serialNumberOriginSupplyToDestination'
];
Despite initial difficulties, progress is being made but some issues remain unresolved. Feel free to check out the code on Stackblitz > https://stackblitz.com/edit/tab-tree?file=main.ts
Your support is greatly appreciated! :)