import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-table-virtualscroll',
  templateUrl: './prime-table-virtualscroll.component.html',
  styleUrls: ['./prime-table-virtualscroll.component.scss'],
})
export class PrimeTableVirtualscrollComponent implements OnInit {
  constructor() {}
 
  cars: any[] = fileCars;
  cols: any[] = [];
  colors: string[] = ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow'];
  brands: string[] = ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma'];
 
  ngOnInit(): void {
    this.cars = Array.from({ length: 10000 }).map(() => this.generateCar());
 
    this.cols = [
      { field: 'vin', header: 'Vin' },
      { field: 'year', header: 'Year' },
      { field: 'brand', header: 'Brand' },
      { field: 'color', header: 'Color' },
    ];
  }
 
  generateCar(): any {
    return {
      vin: this.generateVin(),
      brand: this.generateBrand(),
      color: this.generateColor(),
      year: this.generateYear(),
    };
  }
 
  generateVin() {
    let text = '';
    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
    for (var i = 0; i < 5; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
 
    return text;
  }
 
  generateColor() {
    return this.colors[Math.floor(Math.random() * Math.floor(7))];
  }
 
  generateBrand() {
    return this.brands[Math.floor(Math.random() * Math.floor(10))];
  }
 
  generateYear() {
    return 2000 + Math.floor(Math.random() * Math.floor(19));
  }
}

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { LazyLoadEvent } from 'primeng/api';
 
@Component({
  selector: 'app-prime-table-virtualscroll',
  templateUrl: './prime-table-virtualscroll.component.html',
  styleUrls: ['./prime-table-virtualscroll.component.scss'],
})
export class PrimeTableVirtualscrollComponent implements OnInit {
  constructor(private ref: ChangeDetectorRef) {}
 
  cars: any[] = [];
  cols: any[] = [];
  colors: string[] = ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow'];
  brands: string[] = ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma'];
  selectedCars: any[] = [];
 
  virtualCars: any[] = [];
 
  ngOnInit(): void {
    this.cars = Array.from({ length: 10000 }).map(() => this.generateCar());
 
    this.virtualCars = Array.from({ length: 10000 });
 
    this.cols = [
      { field: 'vin', header: 'Vin' },
      { field: 'year', header: 'Year' },
      { field: 'brand', header: 'Brand' },
      { field: 'color', header: 'Color' },
    ];
  }
 
  generateCar(): any {
    return {
      vin: this.generateVin(),
      brand: this.generateBrand(),
      color: this.generateColor(),
      year: this.generateYear(),
    };
  }
 
  generateVin() {
    let text = '';
    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
    for (var i = 0; i < 5; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
 
    return text;
  }
 
  generateColor() {
    return this.colors[Math.floor(Math.random() * Math.floor(7))];
  }
 
  generateBrand() {
    return this.brands[Math.floor(Math.random() * Math.floor(10))];
  }
 
  generateYear() {
    return 2000 + Math.floor(Math.random() * Math.floor(19));
  }
 
  loadCarsLazy(event: LazyLoadEvent) {
    //simulate remote connection with a timeout
    setTimeout(() => {
      //load data of required page
      let loadedCars = this.cars.slice(event.first, event.first + event.rows);
 
      //populate page of virtual cars
      Array.prototype.splice.apply(this.virtualCars, [...[event.first, event.rows], ...loadedCars]);
 
      //trigger change detection
      this.virtualCars = [...this.virtualCars];
      this.ref.detectChanges();
    }, Math.random() * 3000 + 250);
  }
}