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