a-styles.txt

import { Component } from '@angular/core';
import { GridApi, GridReadyEvent, IGetRowsParams } from 'ag-grid-community';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  columnDefs = [
    { field: 'id', sortable: true, filter: true },
    { field: 'name', sortable: true, filter: true },
    { field: 'age', sortable: true, filter: true },
    { field: 'email', sortable: true, filter: true },
  ];
  defaultColDef = {
    flex: 1,
    minWidth: 100,
    resizable: true,
  };
  rowData: any[] = [];
  private gridApi!: GridApi;

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent): void {
    this.gridApi = params.api;

    // Set up the datasource for infinite scrolling
    const dataSource = {
      getRows: (params: IGetRowsParams) => {
        const startRow = params.startRow;
        const endRow = params.endRow;

        this.http
          .get<any[]>('/api/data', {
            params: {
              start: startRow.toString(),
              end: endRow.toString(),
            },
          })
          .subscribe((data) => {
            params.successCallback(data, 1000000); // Assume server returns total rows
          });
      },
    };

    params.api.setDatasource(dataSource);
  }
}