Angular Material Design Table – Inline Edit Example

First, make sure you have Angular Material installed in your project by running the following command:

ng add @angular/material

Create a component that will house your table and implement inline editing functionality. For example, let’s call it TableComponent:

import { Component } from '@angular/core';

export interface UserData {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  displayedColumns: string[] = ['id', 'name', 'email', 'edit'];
  dataSource: UserData[] = [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
  ];
  editedRowIndex: number;

  startEditing(index: number) {
    this.editedRowIndex = index;
  }

  cancelEditing() {
    this.editedRowIndex = -1;
  }

  saveRow(row: UserData) {
    // Perform the save operation here, such as making an API call
    console.log('Saving row', row);
    this.editedRowIndex = -1;
  }
}

In the HTML template (table.component.html), create the table and include the inline editing functionality:

<table mat-table [dataSource]="dataSource">
  <!-- Displayed columns -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef>ID</th>
    <td mat-cell *matCellDef="let row">{{ row.id }}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let row">
      <ng-container *ngIf="editedRowIndex !== row.id; else editCell">
        {{ row.name }}
      </ng-container>
      <ng-template #editCell>
        <input [(ngModel)]="row.name" placeholder="Name">
      </ng-template>
    </td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef>Email</th>
    <td mat-cell *matCellDef="let row">
      <ng-container *ngIf="editedRowIndex !== row.id; else editCell">
        {{ row.email }}
      </ng-container>
      <ng-template #editCell>
        <input [(ngModel)]="row.email" placeholder="Email">
      </ng-template>
    </td>
  </ng-container>

  <ng-container matColumnDef="edit">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
      <ng-container *ngIf="editedRowIndex !== row.id; else saveCancel">
        <button mat-icon-button (click)="startEditing(row.id)">
          <mat-icon>edit</mat-icon>
        </button>
      </ng-container>
      <ng-template #saveCancel>
        <button mat-icon-button color="primary" (click)="saveRow(row)">
          <mat-icon>done</mat-icon>
        </button>
        <button mat-icon-button color="warn" (click)="cancelEditing()">
          <mat-icon>cancel</mat-icon>
        </button>
      </ng-template>
    </td>
  </ng-container>

  <!-- Table rows -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

In this example, the name and email columns are editable. When you click the edit button, the input fields are shown for editing. Upon clicking the save button, the changes are saved and the row returns to a non-editable state. The cancel button allows you to discard the changes and revert to the original values.

To use this TableComponent, include it in your main component or any other relevant component.

The startEditing, cancelEditing, and saveRow methods control the editing state and allow you to perform actions such as saving changes or canceling the editing process.