export class DataTableLazyDemo implements OnInit {
datasource: Car[];
cars: Car[];
cols: Column[];
totalRecords: number;
constructor(private carService: CarService) { }
ngOnInit() {
//datasource imitation
this.carService.getCarsLarge().then(cars => {this.datasource = cars; this.totalRecords = this.datasource.length;});
this.cols = [
{field: 'vin', header: 'Vin'},
{field: 'brand', header: 'Brand'},
{field: 'year', header: 'Year'},
{field: 'color', header: 'Color'}
];
}
loadCarsLazy(event) {
//in a real application, make a remote request to load data using state metadata from event
//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
//imitate db connection over a network
setTimeout(() => {
this.cars = this.datasource.slice(event.first, (event.first + event.rows));
}, 250);
}
}
<p-dataTable [value]="cars" [columns]="cols" [lazy]="true" [rows]="10" [paginator]="true"
[totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)">
<header>List of Cars</header>
</p-dataTable>