Angular 10 + PrimeNG 10: DataTable Row Edit Example

Overview

DataTable support editing provides a rapid and user friendly way to manipulate data. As we seen earlier how to do in-cell editing now lets look at how to make DataTable row editing in this post :

Row Editing

Row Editing allow to edit entire row values. Row editing toggles the visibility of the all editors in the row at once and provides additional options to save and cancel editing

The cell editing feature is also enabled. When a cell is clicked on, the edit mode will be activated. Clicking on the outside of a cell or hitting the Enter key switches back to the view mode after updating the value.

We will follow below steps to build this example

1. First we will create an Angular 10 Project + PrimeNG 10 DataTable Project
2. Implement an Example of PrimeNg DataTable row editing with sample data

Lets start

Step 1 : Create an Angular 10 Project + PrimeNG 10 Project:

The new Angular 10 version is available now. The newest release again includes improvements in performance, a smaller bundle size and many more. Moreover, the default is the Ivy renderer.

PrimeNG 10.0.0 release has also recently been available to support Angular 10 and Ivy for first class components and to improve components.

In this article, we begin exploring getting started with latest version of angular 10 and PrimeNg 10 with use of the PrimeNG Chart component with an example.

In previous tutorial we learned how to create an Angular 10 Project + PrimeNG 10 project . Now We will be modifying the example to add row editing component.

Step 2: Implement an Example of PrimeNg DataTable row editing with sample data

For enabling row editing table we will do following changes :

1. Set the editMode="row" on table
2. defining uniquely identify a dataKey for row - for our case we use the "flightNumber" column data as the dataKey
3. add the pEditableRow directive to the editable rows and set model to it. [pEditableRow]="flight"
4. add p-cellEditor tag to each editable cell
5. add one additional last column at end to control to enable for the edit and view modes respectively

Here is code for our my flight template component

<h5>Row Editing</h5>
<p-table [value]="flights" dataKey="flightNumber" editMode="row">
    <ng-template pTemplate="header">
        <tr>
            <th>Flight</th>
            <th>From</th>
            <th>To</th>
            <th style="width:10rem"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-flight let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="flight">
            <td>{{flight.flightNumber}}</td>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="flight.origin" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{flight.origin}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="flight.destination">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{flight.destination}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td style="text-align:center">
                <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(flight)" class="p-button-rounded p-button-text"></button>
                <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(flight)" class="p-button-rounded p-button-text p-button-success p-mr-2"></button>
                <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(flight, ri)" class="p-button-rounded p-button-text p-button-danger"></button>
            </td>
        </tr>
    </ng-template>
</p-table>

Next in the my-flights.component.ts we will add event handlers onRowEditInit, onRowEditSave and onRowEditCancel. These get called if the cell edit is initiated or cancelled.

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

import {Flight} from '../model/flight';
import { FlightsService } from 'src/app/service/flights.service';

@Component({
  selector: 'app-my-flights',
  templateUrl: './my-flights.component.html',
  styleUrls: ['./my-flights.component.scss']
})
export class MyFlightsComponent implements OnInit {
  public flights : Flight[];

  constructor(private flightService: FlightsService) {}

  ngOnInit() {
    this.flights = this.flightService.getFlightsMockData();
    //this.getFlightsData();
  }

  // get the data from backend service api
  private getFlightsData() {
    this.flightService.getFlightsData().subscribe(data => {
      this.flights = data;
    });
  }

  onRowEditInit(flight: Flight) {
    console.log(flight);
    console.log('Edit Init Event Called');
    //this.clonedProducts[product.id] = { ...product };
  }

  onRowEditSave(flight: Flight) {
    console.log(flight);
    console.log('Edit Save Event Called');
   
  }

  onRowEditCancel(flight: Flight, index: number) {
    console.log(flight);
    console.log(this.flights[index]);
    console.log('Edit Cancel Event Called');
  }

}

Since we are doing edit we have to update app.module.ts to include FormsModule as below

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyFlightsComponent } from './my-flights/my-flights.component';
import { FlightsService } from 'src/app/service/flights.service';



@NgModule({
  declarations: [
    AppComponent,
    MyFlightsComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ButtonModule,
    TableModule
  ],
  providers: [FlightsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now If we goto localhost:4200 and we can see the following output with paginated data

Download Source Code

The full source code for this article can be found on below.
Download it here - Angular PrimeNG Datatable Row Edit Example