Inline text editing with Mat-table:

Question

Does anyone have a good solution to adding inline text editing to a column where you can edit and save and re-edit with mat table like in this example: https://material.io/design/components/data-tables.html#behavior it look like it's still an open issue on gitHub: https://github.com/angular/material2/issues/5982

Answer 1

inside your matColumnDef you should have a <th></th> and a <td></td>, simply add input to the <td></td> with reactive forms.

---

if you wish it to be practically the same as the material example, you could create a position absolute element inside a positioned-relative element inside the that would propmt on click, receive and input, and close after some logic, to update the formControl.

Still, you'd need formControls, and to edit the matColumnDef.

example taken from the link of the github request

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