Handling tons of data with lazy DataTable

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...