To create an inline editable table row using the MatTable component in Angular, you will need to use Angular Material (@angular/material
) for UI components, along with Angular's built-in data binding to manage the state of each row when the user clicks the Edit button.
Here's a step-by-step guide to implement this:
Step 1: Set Up Angular Material
First, you need to install Angular Material in your project. If you haven't already, run the following commands:
ng add @angular/material
During the installation, you will be prompted to select a theme and some other configuration options. You can choose the default options for now.
Step 2: Install Required Angular Material Modules
Next, you need to import the relevant Angular Material modules. Open your app.module.ts
and import the necessary Material components:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MatTableModule } from '@angular/material/table'; import { MatInputModule } from '@angular/material/input'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, MatTableModule, MatInputModule, MatButtonModule, MatIconModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
Step 3: Create the Table with Inline Editable Rows
Now, let's define the table with the edit functionality. We will use Angular Material's mat-table
and two-way binding to make the table rows editable when the "Edit" button is clicked.
1. app.component.ts (Controller)
This TypeScript file will contain the logic to handle the inline editing.
import { Component } from '@angular/core'; interface Employee { id: number; name: string; position: string; salary: number; } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { employees: Employee[] = [ { id: 1, name: 'John Doe', position: 'Software Engineer', salary: 70000 }, { id: 2, name: 'Jane Smith', position: 'Product Manager', salary: 85000 }, { id: 3, name: 'Mark Johnson', position: 'Designer', salary: 65000 }, ]; editingRowIndex: number | null = null; originalEmployeeData: Employee | null = null; // Start editing a row startEditing(rowIndex: number) { this.editingRowIndex = rowIndex; this.originalEmployeeData = { ...this.employees[rowIndex] }; } // Save the edited row saveEditing(rowIndex: number) { this.editingRowIndex = null; this.originalEmployeeData = null; } // Cancel editing a row cancelEditing(rowIndex: number) { if (this.originalEmployeeData) { this.employees[rowIndex] = { ...this.originalEmployeeData }; } this.editingRowIndex = null; this.originalEmployeeData = null; } }
2. app.component.html (Template)
In this HTML file, we will create the table using mat-table
, and conditionally render the inputs for inline editing based on whether the row is being edited or not.
<div class="container"> <h2>Employee Table</h2> <table mat-table [dataSource]="employees" class="mat-elevation-z8"> <!-- ID Column --> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef>#</th> <td mat-cell *matCellDef="let employee">{{ employee.id }}</td> </ng-container> <!-- Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef>Name</th> <td mat-cell *matCellDef="let employee; let i = index"> <ng-container *ngIf="editingRowIndex !== i"> {{ employee.name }} </ng-container> <ng-container *ngIf="editingRowIndex === i"> <input matInput [(ngModel)]="employee.name" /> </ng-container> </td> </ng-container> <!-- Position Column --> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef>Position</th> <td mat-cell *matCellDef="let employee; let i = index"> <ng-container *ngIf="editingRowIndex !== i"> {{ employee.position }} </ng-container> <ng-container *ngIf="editingRowIndex === i"> <input matInput [(ngModel)]="employee.position" /> </ng-container> </td> </ng-container> <!-- Salary Column --> <ng-container matColumnDef="salary"> <th mat-header-cell *matHeaderCellDef>Salary</th> <td mat-cell *matCellDef="let employee; let i = index"> <ng-container *ngIf="editingRowIndex !== i"> {{ employee.salary | currency }} </ng-container> <ng-container *ngIf="editingRowIndex === i"> <input matInput [(ngModel)]="employee.salary" type="number" /> </ng-container> </td> </ng-container> <!-- Actions Column --> <ng-container matColumnDef="actions"> <th mat-header-cell *matHeaderCellDef>Actions</th> <td mat-cell *matCellDef="let employee; let i = index"> <ng-container *ngIf="editingRowIndex !== i"> <button mat-raised-button (click)="startEditing(i)">Edit</button> </ng-container> <ng-container *ngIf="editingRowIndex === i"> <button mat-raised-button color="primary" (click)="saveEditing(i)">Save</button> <button mat-raised-button color="warn" (click)="cancelEditing(i)">Cancel</button> </ng-container> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> </div>
3. app.component.css (Styles)
Here are some basic styles to make the table look nice:
.container { margin: 20px; } table { width: 100%; } button { margin-right: 5px; } input { width: 100%; padding: 5px; }
Step 4: Define displayedColumns
in app.component.ts
We need to define the columns that will be displayed in the table.
displayedColumns: string[] = ['id', 'name', 'position', 'salary', 'actions'];
Step 5: Run the Application
Run the application using:
ng serve
How It Works:
- The table displays employee details with columns for ID, Name, Position, Salary, and Actions.
- When the "Edit" button is clicked, it transforms the text into input fields for inline editing.
- The user can modify the fields, and there are buttons to either Save or Cancel the changes.
- If the Save button is clicked, the changes are applied, and the row stops being editable.
- If the Cancel button is clicked, the changes are discarded, and the row returns to its original state.
Summary of Key Features:
- MatTable: Angular Material's
mat-table
is used to create the table structure. - Two-way Data Binding (
ngModel
): For inline editing of each row. - Conditional Rendering: Each cell toggles between displaying static data and input fields based on the editing state of the row.
- Angular Material Components: Buttons, input fields, and table elements are styled using Angular Material components (
mat-button
,mat-input
, etc.).
With this setup, you now have a table with editable rows and Angular Material's styling.
Comments
Post a Comment
You are responsible person and please write responsibly