Lazy loading is a very crucial feature to handle huge datasets. This feature provides the loading of data chunks through paging, sorting, and filtering operations instead of loading all the data at once. The lazy loading is enabled by setting the lazy mode (lazy="true") and carrying user actions using onLazyLoad callback with the the event object as a parameter. The event object holds the pagination, sorting, and filter data.

It is also required to display a logical number of records to be displayed for pagination configuration using projection query. This is needed because we can retrieve only the current page data in the lazy loading. There is no information available related to the remaining records. Hence, it is required to show the paginator links based on actual records in the data source. This can be achieved through the totalRecords property on a Table component.

The component with lazy loading feature would be written as follows:

<p-dataTable [value]="browsers" [lazy]="true" [rows]="10" 
  [paginator]="true" [totalRecords]="totalRecords" 
  (onLazyLoad)="loadBrowsersLazy($event)">
  <p-header>List of browsers</p-header>
  <p-column field="engine" header="Engine" [sortable]="true" 
  [filter]="true">
  </p-column>
  <p-column field="browser" header="Browser" [sortable]="true" 
  [filter]="true">  
  </p-column>
  <p-column field="platform" header="Platform" [sortable]="true" 
  [filter]="true">
  </p-column>
  <p-column field="grade" header="Grade" [sortable]="true" 
  [filter]="true">
  </p-column>
</p-dataTable>

The component class defines lazy loading callback to retrieve data on demand as shown:

loadBrowsersLazy(event: LazyLoadEvent) {
  //event.first = First row offset
  //event.rows = Number of rows per page
  //event.sortField = Field name to sort with
  //event.sortOrder = Sort order as number, 1 for asc and -1 for dec
  //filters: FilterMetadata object having field as 
  //key and filter value, 
  //filter matchMode as value

  this.browserService.getBrowsers().subscribe((browsers: any) =>
    this.browsers = browsers.slice(event.first, 
    (event.first + event.rows)));
}

As a demonstration of lazy loading, we used a pagination operation for retrieving the data. We can also use sorting and filtering features. The following screenshot shows a snapshot result to illustrate as an example:

In the preceding snapshot, we can clearly observe that the information on page 4 is retrieved dynamically from the remote data source. Refer to the events section for more details about the lazy loading event callback.