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

Secrecy

Answer 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

Conjunctive

Answer 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.

Benitobenjamen

ny solution for this? – Wellmannered

Answer 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

Eyeleteer

Answer 4

I have created Inline editing in the Angular Material data table with filter and pagination also.

Following functionality, I have added into the mat-table with FormArray example:

1. Filter
2. Go to a specific page.
3. inline editing in the material data table.
4. Add a new row.
5. Edit the existing row.
6. Delete the row.

Here is an example for that Mat-table-inline-editing-project-Link

Jens

commited the data after click on cancel button – Pantsuit

Answer 5

One can use the [(ngModel)] for editing the fields.

Here is a code snippet:

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

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let element">
            <mat-form-field floatLabel="never">
                <input matInput placeholder="Name" 
                   [value]="element.name" [(ngModel)]="element.name">
            </mat-form-field>
        </mat-cell>
    </ng-container>

Here is an example for that at https://stackblitz.com/edit/angular-mat-table-inline-editing?file=app%2Ftable-editing-example.html Credits to the author, I am just adding this for completeness

Oxytetracycline

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Bridgers

@Bridgers Ok. you can remove the neg now :) – Oxytetracycline

Answer 6

I think the most simple and straightforward solution is:

1. In your ts file you just create a variable, let say "showInputComments = true"

2.     <ng-container matColumnDef="comments">
         <th mat-header-cell *matHeaderCellDef>COMMENTS</th>
         <td mat-cell *matCellDef="let element">
          <!-- don't show your value in a string -->
           <ng-container *ngIf="!showInputComments ">
             {{element.comments}}
           </ng-container>
   
           <!-- show your value in a input-->
           <div *ngIf="showInputComments ">
             <input [value]="element.comments" />
           </div>
         </td>
       </ng-container>
   

3. you style your input

Propylene

Answer 7

<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>

Abutting

Please edit your answer to offer an explanation of what you're doing here, and why this approach might be preferable over the previous five answers. Does this rely on new syntax that is preferred over the original, older answers? Does this address limitations in those answers? That will help future readers better understand why they should consider this suggestion. – Raeraeann

Answer 8

I find inline edit risky as there can be numerous alternate scenarios you need to handle if the user starts triggering multiple row updates and the design would start wobbling due to the inline fields. Alternatively, I have designed a table which will focus on one row at a time using a drawer because using dialogs for your form will detach the form and the table and logically the form should be a part of the table. So, its better not to use dialogs for preserving context.

I have made a guide for the same. You can find the guide here.

Drawer behavior on add/edit

Edit behavior

Add behavior

Doctrine

Please remember that excessive self-promotion might be considered as spam on SO – Marvelous

Answer 9

I basically need what neilnikkunilesh does, except for the fact that cancelling an edit function should revert the UI back to its original state, and it doesn't.

Oldenburg