"Edit / Delete" button for each row & header column is 'Action' in the md-table component

Question

I am quite new in the angular 4 world and I'm trying to add "Edit / Delete" button for each row & header column is 'Action' in the md-table component in Angular Material design with Angular 4. how can I do this? customized header column & buttons for each row. any template available to do this? below is my HTML code.

userinfo.html

<!-- ID Column -->
<ng-container cdkColumnDef="username">
<md-header-cell *cdkHeaderCellDef> User Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.username}} </md-cell>
</ng-container>

<!-- Email Column -->
<ng-container cdkColumnDef="email">
<md-header-cell *cdkHeaderCellDef> Email </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.email}} </md-cell>
</ng-container>

<!-- First Name Column -->
<ng-container cdkColumnDef="userFirstName">
<md-header-cell *cdkHeaderCellDef> First Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.userFirstName}} </md-cell>
</ng-container>

<!-- Last Name Column -->
<ng-container cdkColumnDef="userLastName">
<md-header-cell *cdkHeaderCellDef> Last Name </md-header-cell>
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.userLastName}} </md-cell>
</ng-container> 

<!-- Phone Column -->
<ng-container cdkColumnDef="userMobile">
<md-header-cell *cdkHeaderCellDef> Phone </md-header-cell>
<md-cell *cdkCellDef="let row" > {{row.userMobile}} </md-cell>
</ng-container> 

<!-- Role Column -->
<ng-container cdkColumnDef="authority">
<md-header-cell > Role </md-header-cell>
<md-cell *cdkCellDef="let row" > {{row.authority}} </md-cell>
</ng-container> 

<!-- Action Column 
<md-header-cell > Action </md-header-cell>
<md-cell  > <button md-raised-button >Edit</button> </md-cell> -->

<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>

score 49 · Answer 1 · edited Mar 20 '22 at 10:50

49

You are on the right track, you just need to add an actions item to displayedColumns list:

    displayedColumns = ["username", "email", "userFirstName" ...  , "actions"];

and:

    <ng-container cdkColumnDef="actions">
        <md-header-cell > Actions </md-header-cell>
        <md-cell *cdkCellDef="let row" >
             <button md-raised-button >Edit</button> 
        </md-cell>
    </ng-container>

edited Mar 20 '22 at 10:50

David Wolf

1,400
1
9
18

answered Jul 22 '17 at 07:21

Abdulrahman Alsoghayer

16,462
7
51
56

12

this answer helped me. I had done this like this .... Action Edit – Usman Iqbal Nov 24 '17 at 07:05
1

i'm need to achieve the same functionality of action buttons but my material table is in a custom component, i'm unable to figure out ho should i add action button html to the generic custom component, as all pages need different action buttons, any help would be appreciated . – Harshit Chawla Aug 09 '18 at 09:37
then how pass that row Data to that button click event ? all data of that row like "username , email ..." ?! (click)="buttonClicked(fill this)" – Sajadox Dec 13 '21 at 09:19

score 26 · Answer 2 · answered Jan 21 '19 at 16:34

26

For those looking for 6 and above

In your .ts

displayedColumns = ["username","email","userFirstName" ...  ,"actions"];

and in your html

<ng-container matColumnDef="action">
  <th mat-header-cell *matHeaderCellDef> Action </th>   
  <td mat-cell *matCellDef="let element"> 
    <button mat-raised-button >Edit</button> 
  </td>
</ng-container>

answered Jan 21 '19 at 16:34

Prashant

375
4
7

This is an accurate solution. – Thanasis Namikazee Aug 18 '22 at 20:27

score 14 · Answer 3 · edited Apr 04 '19 at 09:33

14

<ng-container matColumnDef="actions">
  <mat-header-cell *matHeaderCellDef>Actions </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button mat-icon-button matTooltip="Click to Edit" class="iconbutton" color="primary">
        <mat-icon aria-label="Edit">edit</mat-icon>
      </button>
    <button mat-icon-button matTooltip="Click to Delete" class="iconbutton" color="warn">
        <mat-icon aria-label="Delete">delete</mat-icon>
      </button>
  </mat-cell>
</ng-container>

edited Apr 04 '19 at 09:33

adiga

34,372
9
61
83

answered Apr 04 '19 at 09:32

Thirupathi P

141
1
2

6

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – adiga Apr 04 '19 at 09:33

score 0 · Answer 4 · edited May 30 '21 at 01:04

.ts file code:

export interface tableColumns 
{ 
    username:string, 
    email:string, 
    userFirstName:string, 
    ..., 
    actions: string 
} 
displayedColumns: string[] = [ 'username','email','userFirstName', ... ,'actions'];

dataSource: MatTableDataSource; // for table dataSource

HTML file code:

<table mat-table [dataSource]="dataSource" matSort>

    <!-- ID Column -->
    <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header> User Name </th>
    <td mat-cell *matCellDef="let row"> {{row.username}} </td>
    </ng-container>
    
    <!-- Email Column -->
    <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header> Email </th>
    <td mat-cell *matCellDef="let row"> {{row.email}} </td>
    </ng-container>
    
    
    <!-- First Name Column -->
    <ng-container matColumnDef="userFirstName">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header> First Name </th>
    <td mat-cell *matCellDef="let row"> {{row.userFirstName}} </td>
    </ng-container>
    
    <!-- Last Name Column -->
    <ng-container matColumnDef="userLastName">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header> Last Name </th>
    <td mat-cell *matCellDef="let row"> {{row.userLastName}} </td>
    </ng-container>
    
    <!-- Phone Column -->
    <ng-container matColumnDef="userMobile">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header> Phone </th>
    <td mat-cell *matCellDef="let row"> {{row.userMobile}} </td>
    </ng-container>
    
    <!-- Role Column -->
    <ng-container matColumnDef="authority">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header>Role </th>
    <td mat-cell *matCellDef="let row"> {{row.authority}} </td>
    </ng-container>
    
    
    <!-- Action Column-->
    <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef> Action </th>
    <td mat-cell *matCellDef="let row"><button mat-raised-button color="primary">Edit</button> </td>
    </ng-container>
    
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

"Edit / Delete" button for each row & header column is 'Action' in the md-table component

4 Answers4

.ts file code:

HTML file code: