PrimeNG Tutorial - DataTable Component Incell Editing

PrimeNG Tutorial - Incell Editing using DataTable Component


Overview

In previous tutorial we had implemented PrimeNG Tutorial - Datatable Hello World Example . We will be modifying the source code we had developed in previous tutorial for the Datatable.
Datatable cell editing can be of two types-
  • Incell Editing -
    Here we can edit only a single cell value.
  • Row Editing -
    Here we can edit entire row values
In this tutorial we will be performing Incell editing for modifying the PrimeNG Datatable. In the next tutorial we will be implementing the row editing for PrimeNG Datatable

Technology Stack

We will be making use of-
  • Angular 8
  • PrimeNG

Video Tutorial

Table Of Contents :


Implementation

  • In previous tutorial we had implemented PrimeNG Datatable component. If we run the application and go to localhost:4200/books we get the following book list-
    PrimeNG DataTable
  • For editing table we will be making use of p-cellEditor tag. Incell editing is enabled by adding pEditableColumn directive to an editable cell that has a p:cellEditor helper component to define the input-output templates for the edit and view modes respectively. Whether to make a particular cell editable is optional. Below we make the Author and Price cells editable while the name cell is not editable.
    
    <p-table [value]="books" (onEditInit)="onEditInit($event)" (onEditCancel)="onEditCancel($event)">
        <ng-template pTemplate="header">
            <tr>
                <th>Name</th>
                <th>Author</th>
                <th>Price</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-book>
            <tr>
                <td>{{book.name}}</td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="book.author" required>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{book.author}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="book.price">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{book.price}}
                        </ng-template>
                    </p-cellEditor>
                </td>
            </tr>
        </ng-template>
    </p-table>
    
  • In the book-data component we add the functions onEditInit and onEditCancel. These get called if the cell edit is initiated or cancelled.
    
    import { Component, OnInit } from '@angular/core';
    import { BookService, Book } from '../service/book.service';
    
    @Component({
      selector: 'app-book-data',
      templateUrl: './book-data.component.html',
      styleUrls: ['./book-data.component.css']
    })
    export class BookDataComponent implements OnInit {
    
      books: Book[];
    
      constructor(private bookService: BookService) { }
    
      ngOnInit() {
          this.bookService.getBooks().
          then(books => this.books = books);
      }
    
      onEditInit(event): void {
        console.log(this.books);
        console.log('Edit Init Event Called');
      }
    
      onEditCancel():void {
        console.log(this.books);
        console.log('Edit Cancel Event Called');
      }
    
    }
    
    
  • If we now go to - localhost:4200/books we see the following-
    PrimeNG DataTable Incell Editing

Downloads-

PrimeNG DataTable Component Incell Editing Example