Inline editing in the Angular Material data table

Question

Consider an example below. Is it possible to make the angular material data table with inline editing feature? Or making cells under specific columns as editable on load itself (see the image below where Email column fields are editable). If so could you share the sample code?

Angular Material data Table with dynamic rows

Solution 1

Well this isn't clean inline editing, but - I'm looking for the same thing - this is close enough for my purposes:

https://stackblitz.com/edit/inline-edit-mat-table?file=app%2Fapp.component.html

[The idea is to have a small popup when you click on the cell]

My alternative Idea would be (though with more work) to replace all cells with Inputfields and bind them to the correct value, which would - for the user- have the exact desired use-case

Solution 2

This is actually an open issue in Angular Material: Table: Add inline editing for inputs. Unfortunately, it's currently not implemented, but you can find some ideas for solutions in the comments to that issue.

The section "inline text editing" under Data Tables > Behavior in the Material Design Guide shows how this should look like.

Solution 3

In the Latest versions of Angular Material 11 | 10

You can call .renderRows() method after updating the data of a row

addRowData(row_obj){
   var d = new Date();
   this.dataSource.push({
     id:d.getTime(),
     name:row_obj.name
   });
   this.table.renderRows();
 }

 deleteRowData(row_obj){
    this.dataSource = this.dataSource.filter((value,key)=>{
      return value.id != row_obj.id;
    });
 }

Source Tutorial link

Solution 4

<td mat-cell *matCellDef="let row">
  <mat-form-field floatLabel="never">
    <input matInput placeholder="Topic" [value]="row.topic" [(ngModel)]="row.topic">
  </mat-form-field>
</td>

View more solutions