pagination

metodos para el boton load more

  accounts: AccountProfile[] = [];
  page = 0;
  pageSize = 5;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.loadMore();
  }

 loadMore() {
    this.dataService.getPaginatedData(this.page, this.pageSize).subscribe((newData: AccountProfile[]) => {
      this.accounts = [...this.accounts, ...newData]; 
      this.page++;
    });
  }

  @HostListener('window:scroll', [])
  onScroll(): void {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      this.loadMore();
    }
  }

html del boton 

 <button class="btn btn-primary" (click)="loadMore()">
                                <i class="bi bi-arrow-clockwise"></i>
                                Load More</button>

html del div que cubre la tabla

<div class="table-wrapper">
                            <table class="table table-hover align-middle">
                              <thead class="table-hover">
                                <tr>
                                  <th>Account Name</th>
                                  <th>Account Number</th>
                                  <th>Enabled</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr *ngFor="let account of accounts">
                                  <td>
                                    <a href="#" class="text-decoration-none">{{ account.name }}</a>
                                  </td>
                                  <td>{{ account.number }}</td>
                                  <td>
                                    <div class="form-check form-switch">
                                      <input class="form-check-input" type="checkbox" [(ngModel)]="account.enabled" [disabled]="true" />
                                    </div>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          
                          
CSS

.table-wrapper {
    max-height: 269px; 
    overflow-y: auto;
  }
  

  thead th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 100; 
  }