PrimeNG Tutorial - DataTable Lazy Loading Example

Overview

In previous tutorial we had implemented PrimeNG Tutorial - DataTable Pagination (Paginator) Example to implement pagination for the data table. We were loading all the data to be displayed by the datatable. However this is not an ideal implementation if the datasets are huge. In this tutorial using lazy loading we will be loading only chunks of data to be displayed by the datatable and not the entire dataset.

Video Tutorial

Implementation

We will be modifying the code had implemented PrimeNG Datatable component with Pagination and eager loading previously. If we run the application and go to localhost:4200/books we get the following book list-
So previously we were loading all the data at once using eager loading.
We will retrieve only the current page data for the datatable. When the user clicks on the next button, then a call will again be made to retrieve the data for the page to be displayed. So suppose if we are displaying 10 records on each page for the datatable, then any given time only 10 record will be fetched from the datatable.

We will first make changes to the book component html file to implement lazy loading for the datatable.

lazy - We set the lazy load property to true to enable lazy loading for the datatable
onLazyLoad - Use onLazyLoad callback with the the event object as a parameter for loading the next records whenever user clicks on previous or next button.
loading - Used for loading spinner animation.

<p-table [columns]="cols"  [value]="books" [lazy]="true" (onLazyLoad)="loadCustomers($event)"
 [paginator]="true" [rows]="10" totalRecords="totalRecords" [loading]="loading">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

In real world scenario, we will be making use of a database and then load chunks of data as required by making a call to it. In this example we will be creating a list of records named virtualDatabase. We will then be fetching the records as required from it using lazy loading.
We will make changes to the book component typescript code to implement lazy loading -

import { Component, OnInit } from '@angular/core';
import { Book, BookService } from '../service/book.service';
import { LazyLoadEvent } from 'primeng/api';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})
export class DatatableComponent implements OnInit {

  books: Book[];

  virtualDatabase: Book[];

  cols: any[];

  totalRecords: number;

  loading: boolean;

  constructor(private bookService: BookService) { }

  ngOnInit() {
    this.bookService.getBooks().
      then(books => {
        this.virtualDatabase = books,
        this.totalRecords = books.length;
      });



    this.cols = [
      { field: 'name', header: 'Name' },
      { field: 'author', header: 'Author' },
      { field: 'price', header: 'Price' }
    ];

  }

  loadCustomers(event: LazyLoadEvent) {
    this.loading = true;

    // in real world scenario when the loadCustomers will be called we will make a call to the real database
    //to fetch the required records
    //event.first = offset of the first row. For example in our case it will be 1 for the first page, 11 for the second page and so on.
    //event.rows = Rows to be displayed per page in the datatable. In our case it will be 10
    setTimeout(() => {
      if (this.virtualDatabase) {
        this.books = this.virtualDatabase.slice(event.first, (event.first + event.rows));
        this.loading = false;
      }
    }, 1000);
  }

}

If we now go to - localhost:4200/books we see the following-

Downloads-

PrimeNG DataTable Lazy Load Example

PrimeNG Tutorial - DataTable Lazy Loading Example

Overview

Table Of Contents :

Implementation

Downloads-

Top Popular Post :