Angular 10 + PrimeNG 10: DataTable In-Cell Edit Example

Overview

DataTable support editing provides a rapid and user friendly way to manipulate data. DataTable editing can be done with below two ways :

• In-cell Editing : allow to edit a single cell value at a time
• Row Editing : allow to edit entire row values

In-cell Editing

Let see how we can do DataTable more interactive with the cell editing feature.

The cell editing feature is enabled just by setting the editable property on both table and column levels. 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. The cell editing feature would be written as follows:

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 in-cell 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 in-cell editing component.

Step 2: Understand Various input component available with PrimeNG in- cell Editing

By default, the editable mode enables the input component on the click of a particular cell. We can also use other input components such as DropDown, MultiSelect, Calendar, and so on, for a customized input editing. In the preceding example, we can edit the cells using Input and Dropdown components.

Step 3: Implement an Example of PrimeNg DataTable in-cell editing with sample data

We will use the p-cellEditor tag for the editing table. In-cell editing is allowed by adding the pEditableColumn directive to an editable cell with the helper component p:cellEditor to define the input templates for the edit and display modes.

If it is optional to render a specific cell editable. Below, although the flight name cell is not editable, we make the From and To columns cells editable.

Here is code for our my flight template component

<h5>Cell Editing</h5>
<p-table [value]="flights" (onEditInit)="onEditInit($event)" (onEditCancel)="onEditCancel()">
    <ng-template pTemplate="header">
        <tr>
            <th>Flight</th>
            <th>From</th>
            <th>To</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-flight>
        <tr>
            <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>
        </tr>
    </ng-template>
</p-table>

Next in the my-flights.component.ts we will add event handlers onEditInit and onEditCancel. 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;
    });
  }

  onEditInit(event): void {
    console.log(this.flights);
    console.log("Edit Init Event Called");
  }

  onEditCancel(): void {
    console.log(this.flights);
    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

Next we will see Angular PrimeNG Datatable Row Edit Example.

Download Source Code

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