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

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-

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-

Downloads-

PrimeNG DataTable Component Incell Editing Example

PrimeNG Tutorial - Incell Editing using DataTable Component

Overview

Technology Stack

Table Of Contents :

Implementation

Downloads-

Top Popular Post :