[Table] Add inline editing for inputs

CaerusKaru commented 7 years ago

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 commented 7 years ago

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

andrewseguin commented 7 years ago

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 commented 7 years ago

Is there an eta or reasonably simple workaround?

willshowell commented 7 years ago

@pueaau for a workaround

create a simple dialog component that includes only an input and closes on enter
attach click listener to editable column cell
open dialog on click
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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

kushwahashiv commented 7 years ago

@andrewseguin any timeline to get this feature?

willshowell commented 7 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

trydalch commented 5 years ago

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 commented 5 years ago

@andrewseguin Any update on this old thread?

narendrasinghrathore commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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

erickhora commented 5 years ago

Any updates on this?

kseamon commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

@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 commented 4 years ago

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