I am trying to make my Angular Material data table expand on the row when I click a button. Here is my code and a stackblitz example. Currently it expands within the column but I'm trying to expand the row when the user clicks the toggle button.
HTML
<table mat-table [dataSource]="dataSource"> <ng-container matColumnDef="title"> <th mat-header-cell *matHeaderCellDef> Title </th> <td mat-cell *matCellDef="let element"> {{element.title}} </td> </ng-container> <ng-container matColumnDef="location"> <th mat-header-cell *matHeaderCellDef> City </th> <td mat-cell *matCellDef="let element"> {{element.location.city}} </td> </ng-container> <ng-container matColumnDef="startDate"> <th mat-header-cell *matHeaderCellDef> Start Date </th> <td mat-cell *matCellDef="let element"> {{element.startDate}} </td> </ng-container> <ng-container matColumnDef="deviceType"> <th mat-header-cell *matHeaderCellDef> Device Type </th> <td mat-cell *matCellDef="let element"> {{element.deviceType}} </td> </ng-container> <ng-container matColumnDef="status"> <th mat-header-cell *matHeaderCellDef> Status </th> <td mat-cell *matCellDef="let element"> {{element.status}} </td> </ng-container> <ng-container matColumnDef="expand"> <th mat-header-cell *matHeaderCellDef> View More </th> <td mat-cell *matCellDef="let element; let i = index"> <div (click)="toggleFloat(i)">View</div> <div *ngIf="expanded[i] == true"> {{element.contributorProfiles}} </div> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> TS
dataSource looks like this
[ { "title": "bob", "codes": [ "Basketball" ], "description": null, "brief": "asdas", "locationId": "9614632c-d64d-4bf3-bb8f-5c38919f221c", "startDate": "2020-07-08T00:00:00.000+0000", "endDate": "2020-07-10T23:00:00.000+0000", "submissionDueDate": "2020-08-26T23:59:59.000+0000", "workAcceptanceDate": "2020-08-26T23:59:59.000+0000", "deviceType": "Photography", "photography": { "minimumDpi": 300, "shortestSideLength": 2800 }, "videography": null, "fees": 22, "accreditationRequired": false, "accreditationReason": null, "subjects": "test", "editors": null, "additionalEditorInformation": null, "imageId": null, "id": "b6b99931-c6a3-476a-8c3a-9e2535823c13", "status": "Created", "createdBy": { "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979", "email": "[email protected]", "firstname": "Bhavic", "surname": "Naran", "cell": null, "status": "ACTIVE", "requestedOn": null }, "location": { "id": "9614632c-d64d-4bf3-bb8f-5c38919f221c", "country": "Bhutan", "city": "Lhuentse" }, "editorProfiles": [ { "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979", "email": "[email protected]", "firstname": "Bhavic", "surname": "Naran", "cell": null, "status": "ACTIVE", "requestedOn": null } ], "contributorProfiles": [] }, { "title": "tester kalpesh", "codes": [ "Basketball" ], "description": null, "brief": "123", "locationId": "aec466d9-9fb6-4718-9b1f-5fad429f7145", "startDate": "2020-06-24T00:00:00.000+0000", "endDate": "2020-07-03T23:00:00.000+0000", "submissionDueDate": "2020-08-26T23:59:59.000+0000", "workAcceptanceDate": "2020-08-26T23:59:59.000+0000", "deviceType": "Photography", "photography": { "minimumDpi": 300, "shortestSideLength": 2800 }, "videography": null, "fees": 55, "accreditationRequired": false, "accreditationReason": "none", "subjects": "55", "editors": null, "additionalEditorInformation": null, "imageId": null, "id": "3fdf9972-9b21-4a6e-b650-4141f5c6809e", "status": "Assigned", "createdBy": { "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979", "email": "[email protected]", "firstname": "Bhavic", "surname": "Naran", "cell": null, "status": "ACTIVE", "requestedOn": null }, "location": { "id": "aec466d9-9fb6-4718-9b1f-5fad429f7145", "country": "South Africa", "city": "Johannesburg" }, "editorProfiles": [ { "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979", "email": "[email protected]", "firstname": "Bhavic", "surname": "Naran", "cell": null, "status": "ACTIVE", "requestedOn": null } ], "contributorProfiles": [ { "id": "95ac8466-8d98-47ab-95f8-24eb7b7cc27b", "email": "[email protected]", "firstname": "Kalpesh", "surname": "Mithal", "cell": "0884441122", "appliedStatus": "Created" } ] } ] Stackblitz example is here
1 Answer
Try this I hope You help. In You exapmle first is lost "multiTempalteDataRows" second for columns definition use this
displayedColumns = ['title','location','startDate','deviceType','status', 'more']; And finaly add third row for details
<tr mat-row *matRowDef="let row; columns: ['expanded']"></tr> Html
<table mat-table [dataSource]="dataSource" multiTemplateDataRows> <ng-container matColumnDef="title"> <th mat-header-cell *matHeaderCellDef> Title </th> <td mat-cell *matCellDef="let element"> {{element.title}} </td> </ng-container> <ng-container matColumnDef="location"> <th mat-header-cell *matHeaderCellDef> City </th> <td mat-cell *matCellDef="let element"> {{element.location.city}} </td> </ng-container> <ng-container matColumnDef="startDate"> <th mat-header-cell *matHeaderCellDef> Start Date </th> <td mat-cell *matCellDef="let element"> {{element.startDate}} </td> </ng-container> <ng-container matColumnDef="deviceType"> <th mat-header-cell *matHeaderCellDef> Device Type </th> <td mat-cell *matCellDef="let element"> {{element.deviceType}} </td> </ng-container> <ng-container matColumnDef="status"> <th mat-header-cell *matHeaderCellDef> Status </th> <td mat-cell *matCellDef="let element"> {{element.status}} </td> </ng-container> <ng-container matColumnDef="more"> <th mat-header-cell *matHeaderCellDef> More </th> <td mat-cell *matCellDef="let element"> <button (click)="expanded = expanded === element ? null : element">More</button> </td> </ng-container> <ng-container matColumnDef="expanded"> <td mat-cell *matCellDef="let element"> <div [@detailExpand]="element == expanded ? 'expanded' : 'collapsed'"> <span> this is your incredible expandable details </span> </div> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: ['expanded']"></tr> </table> 
