Angular Data Grid - Local Virtual Scrolling

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DataSourceOptions as DataSourceConfig } from 'devextreme-angular/common/data'; import { DxDataGridModule, DxDataGridTypes } from 'devextreme-angular/ui/data-grid'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], imports: [ DxDataGridModule, ], }) export class AppComponent { dataSource: DataSourceConfig; constructor(service: Service) { this.dataSource = service.generateData(100000); } customizeColumns(columns: DxDataGridTypes.Column[]) { columns[0].width = 70; } onContentReady(e: DxDataGridTypes.ContentReadyEvent) { e.component.option('loadPanel.enabled', false); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #gridContainer { height: 440px; }

import { Injectable } from '@angular/core'; export class Employee { id: number; firstName: string; lastName: string; gender: string; birthDate: Date; } const employees: Employee[] = []; const surnames: string[] = [ 'Smith', 'Johnson', 'Brown', 'Taylor', 'Anderson', 'Harris', 'Clark', 'Allen', 'Scott', 'Carter']; const names: string[] = [ 'James', 'John', 'Robert', 'Christopher', 'George', 'Mary', 'Nancy', 'Sandra', 'Michelle', 'Betty']; const gender: string[] = ['Male', 'Female']; let s = 123456789; @Injectable() export class Service { random() { s = (1103515245 * s + 12345) % 2147483647; return s % (10 - 1); } generateData(count: number) { let i: number; const startBirthDate = Date.parse('1/1/1975'); const endBirthDate = Date.parse('1/1/1992'); for (i = 0; i < count; i += 1) { const birthDate = new Date(startBirthDate + Math.floor( this.random() * (endBirthDate - startBirthDate) / 10, )); birthDate.setHours(12); const nameIndex = this.random(); const item = { id: i + 1, firstName: names[nameIndex], lastName: surnames[this.random()], gender: gender[Math.floor(nameIndex / 5)], birthDate, }; employees.push(item); } return employees; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>