[Table] Add inline editing for inputs

[CaerusKaru]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Clicking on a text field should launch a simple edit dialog with an md-input. Hitting Enter would then close the dialog and save the input as the new value for the text field.

What is the use-case or motivation for changing an existing behavior?

This behavior is described in the Data Table section of the Material spec, found here, and would be useful to have as its own component.

Is there anything else we should know?

Accessibility is a real concern here, and there doesn't seem to be much discussion/affordance defined in the spec for possible solutions. The text field itself could be defined as a button with aria-role="button", but that may be deceptive.

cc @andrewseguin @jelbourn

[CaerusKaru]

@andrewseguin Will this feature be exclusive to md-table, or will it be an independent component?

[andrewseguin]

We haven't yet designed how this will be implemented, so I can't give a definite answer. But I would imagine that this could be something that could be decoupled from the table similar to how we did MdSort and MdPaginator

[pueaau]

Is there an eta or reasonably simple workaround?

[willshowell]

@pueaau for a workaround

1. create a simple dialog component that includes only an input and closes on enter
2. attach click listener to editable column cell
3. open dialog on click
4. mutate data in response to user input

https://plnkr.co/edit/wL23b5C7bggjKPgo66rk?p=preview

To make it feel more inline, you can of course use the dialog position/size properties

[pueaau]

Thanks, that's already helpful. I wish there was something that allows for efficient data entry, roughly along the lines of this example: http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#row-editing

I guess for that to work I'd need to replace the cell with a form field, but that seems a bit hacky.

[willshowell]

@pueaau I don't know, it might not be so hacky...

<md-cell *cdkCellDef="let row">
  <div class="cell-wrapper">
    <input *ngIf="rowEditable(row.id)" type="text" [value]="row.name" (keydown)="checkEnterKey($event, row.id)">
    <span *ngIf="!rowEditable(row.id)" class="cell-data">{{row.name}}</span> 
  </div>
</md-cell>

Alternatively, use ComponentFactoryResolver to instantiate the inline editor component inside a cell as needed.

Or you could also try creating a custom overlay component that connects its position to the cell element and doesn't include fancy animations for quick editing.

[shyamal890]

Would be awesome to have excel type editing in md-table.

[kushwahashiv]

@andrewseguin any timeline to get this feature?

[willshowell]

Here is a demo of a workaround closer to the spec:

https://stackblitz.com/edit/material2-beta12-es19ub?file=app%2Fapp.component.html

It does require a 3rd party component, but it might inspire a good temporary solution until an official one is developed.

[BuffDogg]

Table seems to have the ability to throw in material UI elements for editing. Stackblitz below shows a quick and dirty example.

https://stackblitz.com/edit/angular-g5u7cy?file=app%2Ftable-editing-example.html

[obchap]

@BuffDogg That suggestion is a good start but the binding doesn't happen correctly. You still have to rebind the data to the table every time you make an edit or your updates won't work.

[BuffDogg]

@VtoCorleone can you explain what you mean? I'm very new to Angular. The example I posted seems to be working fine for me. I can edit and the data changes in the view and the model. What do you mean "rebind every time"?

[DaveNavarro]

Hello everyone,

This has been a great discussion and now that Angular Material 6 has been released, I'm wondering if there has been any movement on this feature request?

What can we do with Angular Material 6?

[ngehlert]

Are there any official responses beside @andrewseguin ? Issue more than a year old, and no proper suggestion how to achieve the behavior described in the material spec. I don't like the version with mat-menu or mat-dialog, since both have their drawbacks. The suggested 3rd party tools are not big/supported enough to use them in a production environment.

Are there plans to implement some sort of inline edit/popover/... as separate component? ( I like having it separated like MatSort or MatPaginator)

[hiepxanh]

for note purpose, I think maybe someone can use this for template work:

<form [formGroup]="myServiceFormGroup">
      <ng-template matStepLabel>Add your services</ng-template>
      <!-- <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field> -->
      <table mat-table [dataSource]="serviceInfos.value" [trackBy]="trackByIndex" formArrayName="serviceInfos" class="mat-elevation-z8">

          <!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition" -->
          <!-- index Column -->
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Service Name </th>
            <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i"> 
            <input type="text" formControlName="name" placeholder="Service name"> 
            </td>
          </ng-container>
        
          <!-- name Column -->
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Service Name </th>
            <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i"> 
            <input type="text" formControlName="name" placeholder="Service name"> 
            </td>
          </ng-container>
        
          <!-- time Column -->
          <ng-container matColumnDef="time">
            <th mat-header-cell *matHeaderCellDef> time </th>
            <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i"> 
                <input type="text" formControlName="time" placeholder="Time"> 
            </td>
          </ng-container>
        
          <!-- price Column -->
          <ng-container matColumnDef="price">
            <th mat-header-cell *matHeaderCellDef> Price </th>
            <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i"> 
                <input type="text" formControlName="price" placeholder="Price"> 
            </td>
          </ng-container>
        
          <!-- staff Column -->
          <ng-container matColumnDef="staff">
            <th mat-header-cell *matHeaderCellDef> Staff </th>
            <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i"> 
                <input type="text" formControlName="staff" placeholder="Staff"> 
            </td>
          </ng-container>
        
          <!-- btn Column -->
          <ng-container matColumnDef="btn">
            <th mat-header-cell *matHeaderCellDef> Staff </th>
            <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i"> 
              <button (click)="removeStaff(i)" color="primary" mat-icon-button>
                <mat-icon>close</mat-icon>
              </button>
            </td>
          </ng-container>
        
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></tr>
        </table>

        <button (click)="addService()">add more...</button>
        <pre>{{myServiceFormGroup.value | json }}</pre>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
   </form>

this.myServiceFormGroup = this._formBuilder.group({
    serviceInfos: this._formBuilder.array([])
  });

[ghost]

@hiepxanh can u write code for getting all updated values from mat table?

[trydalch]

Re-upping questions raised by @ngehlert . Any official response?

Looking at the board, it's labeld P4 (https://github.com/angular/material2/projects/13#card-5230521) and may not be supported w/o community help. Has anyone begun working on this?

Are there any official responses beside @andrewseguin ? Issue more than a year old, and no proper suggestion how to achieve the behavior described in the material spec. I don't like the version with mat-menu or mat-dialog, since both have their drawbacks. The suggested 3rd party tools are not big/supported enough to use them in a production environment.

Are there plans to implement some sort of inline edit/popover/... as separate component? ( I like having it separated like MatSort or MatPaginator)

[pantonis]

@andrewseguin Any update on this old thread?

[narendrasinghrathore]

@andrewseguin @ErinCoughlan Any implementation we can see in v7.3.6. Cannot find any documentation though it was discussed in talk almost 1.5 years back. Youtube talk

[narendrasinghrathore]

I had implemented my own inline editing , you can take reference from here Credit goes to netbasal Hope it help you to get a an idea and customize on your own needs. ✌

[derekkite]

Look in https://github.com/angular/material2/tree/2f009d00da9a9f18e480af64f62bbf9286332664/src/cdk-experimental/popover-edit there is an edit popover directive

Look at the spec file, it shows how to use it. It will do a single cell edit with buttons. I think there is lots of flexibility, I'm looking at the possibility of clicking on a row and tab / shift-tab back and forth, with a reactive form. Lots here.

[LanderBeeuwsaert]

@derekkite cool! I'm trying to add this to a project to experiment with; however if I add to package.json: "@angular/cdk-experimental": "^7.3.7" the module is not in that branch it seems; and also not in the 8.0.0 next branch. Any idea how I might get it?

[LanderBeeuwsaert]

ok, found it, it's only included in the 8.0.0 branch.

[erickhora]

Any updates on this?

[kseamon]

Popover edit should be usable now from experimental. The main thing I still need to add is a select style popover. There are also still some open questions about keyboard interactions that I’m working out with Jeremy, UX, and the a11y team. And then docs, of course.

Not sure when it’s going to graduate from experimental, but if I had to guess I’d hope in time for version 9.

[kseamon]

Of course, beware that while it’s in experimental, there can be breaking changes at any time, though I don’t have any planned right now.

[mdaslamknlgit]

Hi

In mat-table inline editing how to setfocus the input field

Ex: 1st row i have mat-select when i select cash cursor should be in next input field

can any help

thanks

[janakgithub]

I have to load the data from back end, and this is a tabular data, then give the option to edit tabular data inline.. and submit the full table with one button, the save button should not be there for each row. Is there any update on mat table inline edit, with an option to submit the edited data.

[dzena]

@kseamon I took a look at the implementation. Looks really good. Thank you!

Do you think that popover-edit will make it out of the experimental with v10?

Keep on rocking.

[kseamon]

It's tough to say when popover-edit will escape experimental. The main thing holding it up is a finalized spec for a11y / keyboard interaction from the UX folks. The current behavior is not quite right (too many tab stops), and we'll also want to make sure it plays nicely with the keyboard controls for column-resize (also in experimental).