Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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> 
like image 356
Sundhar Avatar asked Jul 19 '17 07:07

Sundhar


People also ask

How do I add edit/delete buttons in each row of a DataTable?

You can use DataTable createdRow attribute to add edit /delete buttons in an empty action column (include the empty column in columnDef). This way you can add row UID in buttons, which will make it easier to trigger click actions.

How do I add edit and delete button for JQ grid for every row?

Mention editLink and deleteLink in colModel name of edit and delete for display Edit and Delete button in jqgrid for each row. Show activity on this post. I got it, Just take additional column, and add formaater actions as model class. That's it.

How to add edit button in data table?

The edit button type is added to DataTables by Editor and provides a pre-defined button that will call the edit() method to trigger the editing of the selected rows in the DataTable.


1 Answers

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>  
like image 161
Abdulrahman Alsoghayer Avatar answered Oct 12 '22 11:10

Abdulrahman Alsoghayer