PrimeNG Tutorial - DataTable Component Row Editing Example

PrimeNG Tutorial - DataTable Component Row Editing Example


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-
  • In Place Cell Editing -
    Here we can edit only a single cell value.
  • Row Editing -
    Here we can edit entire row values
In the previous tutorial we had implemented the in place cell editing for PrimeNG Datatable. In this tutorial we will be performing row editing for modifying the PrimeNG Datatable.

Technology Stack

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

Video Tutorial

Table Of Contents :


Implementation

Develop Angular Application

  • 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. Row editing toggles the visibility of the all editors in the row at once and provides additional options to save and cancel editing. Row editing functionality is enabled by setting the to "row" on table, defining a dataKey to uniquely identify a row - for our case we use the name column data as the dataKey. Also we add the pEditableRow directive to the editable rows and define the UI Controls with pInitEditableRow, pSaveEditableRow and pCancelEditableRow directives respectively. Each row editable cell has helper component to define the input-output templates for the edit and view modes respectively. Whether to make a particular row cell editable is optional. Below we make the Author and Price cells editable while the name cell is not editable.
    
    <p-table [value]="books" dataKey="name" editMode="row">
        <ng-template pTemplate="header">
            <tr>
                <th>Name</th>
                <th>Author</th>
                <th>Price</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
            <tr [pEditableRow]="rowData">
                <td>
                    {{rowData.name}}
                </td>
                <td>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.author">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.author}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.price">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.price}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td style="text-align:center">
                    <button *ngIf="!editing" pButton type="button" pInitEditableRow icon="pi pi-pencil"
                        class="ui-button-info" (click)="onRowEditInit(rowData)"></button>
                    <button *ngIf="editing" pButton type="button" pSaveEditableRow icon="pi pi-check"
                        class="ui-button-success" style="margin-right: .5em" (click)="onRowEditSave(rowData)"></button>
                    <button *ngIf="editing" pButton type="button" pCancelEditableRow icon="pi pi-times"
                        class="ui-button-danger" (click)="onRowEditCancel(rowData, ri)"></button>
                </td>
            </tr>
        </ng-template>
    </p-table>
    
  • In the book-data component we add the functions onRowEditInit, onRowEditSave and onRowEditCancel. These get called if the cell edit is initiated,saved 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);
      }
    
      onRowEditInit(book: Book) {
        console.log('Row edit initialized');
      }
    
      onRowEditSave(book: Book) {
        console.log('Row edit saved');
      }
    
      onRowEditCancel(book: Book, index: number) {
        console.log('Row edit cancelled');
      }
    
    }
    
    
  • If we now go to - localhost:4200/books we see the following-
    PrimeNG DataTable Row Editing

Downloads-

PrimeNG DataTable Component Row Edit Example