Get started with ng-table CDN

import { Component } from '@angular/core';
import { DataSource } from 'ng-table';

@Component({
  selector: 'app-ng-table-example',
  template: `
    <ng-table [dataSource]="dataSource" class="ng-table" [columns]="columns">
      <ng-template let-dt="datasource" let-gt="getTracker" let-filter="filter">
        <ag-grid-angular
          class="ag-theme-balham"
          [rowData]="dt.data"
          [columnDefs]="columns"
          (gridReady)="onGridReady($event, gt)"
          (gridSizeChanged)="onGridSizeChanged($event)"
          (filterChanged)="onFilterChanged($event)"
          (firstDataRendered)="onFirstDataRendered($event)"
          (selectionChanged)="onSelectionChanged($event)"
        ></ag-grid-angular>
      </ng-template>
    </ng-table>
  `
})
export class NgTableExampleComponent {
  dataSource: DataSource;
  columns: any[];

  constructor() {
    this.columns = [
      { title: 'Name', name: 'name' },
      { title: 'Age', name: 'age' },
      { title: 'City', name: 'city' }
    ];

    this.dataSource = new DataSource({
      count: 0,
      getAll: () => new Promise((resolve) => {
        this.http.get('https://api.example.com/data').subscribe((data: any[]) => {
          resolve(data);
        });
      })
    });
  }

  onGridReady(event, getTracker) {
    this.dataSource.viewChange.next();
  }

  onGridSizeChanged(event) {
    this.dataSource.viewChange.next();
  }

  onFilterChanged(filter) {
    filter.apply();
    this.dataSource.viewChange.next();
  }

  onFirstDataRendered(event) {
    // Handle first data rendering
  }

  onSelectionChanged(event) {
    // Handle selection change
  }
}