how to integrate it into a table with primeng scroll

[matiasAS]

Hello, I need help to integrate the component into a table with primeng scroll.

My current code is:

<div class="p-fluid mb-4">
  <div class="p-grid align-items-center">
    <!-- Fecha Inicio -->
    <div class="p-col-4">
      <label for="startDatePicker">Fecha Inicio:</label>
      <p-calendar
        id="startDatePicker"
        [(ngModel)]="rangeDates[0]"
        dateFormat="mm/dd/yy"
        showIcon
        [showOnFocus]="false"
        [focusTrap]="false"
        placeholder="MM/DD/YYYY"
      ></p-calendar>
    </div>

    <!-- Fecha Fin -->
    <div class="p-col-4">
      <label for="endDatePicker">Fecha Fin:</label>
      <p-calendar
        id="endDatePicker"
        [(ngModel)]="rangeDates[1]"
        [showOnFocus]="false"
        dateFormat="mm/dd/yy"
        showIcon
        placeholder="MM/DD/YYYY"
      ></p-calendar>
    </div>

    <!-- Botón de Filtrar -->
    <div class="p-col-4">
      <button
        pButton
        pRipple
        label="Filtrar Datos"
        icon="pi pi-filter"
        class="p-button-primary"
        (click)="filterData()"
      ></button>
    </div>
  </div>
</div>

<div
  #scrollContainer
  class="p-3"
  infiniteScroll
  [infiniteScrollContainer]="'.p-datatable-wrapper'"
  [infiniteScrollThrottle]="1000"
  [infiniteScrollDistance]="2"
  [infiniteScrollUpDistance]="2"
  (scrolled)="onScroll()"
  (scrolledUp)="scrolledUp()"
  [scrollWindow]="false"
>
  <p-table
    #dt1
    class="p-datatable-gridlines custom-table"
    [value]="datasourceTable"
    [tableStyle]="{ 'min-width': '50rem', width: '100%' }"
    [paginator]="false"
    [virtualScrollDelay]="1000"
    [scrollHeight]="'500px'"
    [lazy]="false"
    [scrollable]="true"
    [virtualScroll]="false"
    [virtualScrollItemSize]="56"
    [rows]="50"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
  >
    <ng-template pTemplate="header">
      <tr>
        <th>Fecha medición</th>
        <th>Fecha medición (UTC-4)</th>
        <th>Fecha medición CL</th>
        <th>Volumen (L)</th>
        <th>Volumen acumulado (L)</th>
        <th>Flujo (L/s)</th>
        <th>Nivel freático (m)</th>
        <th>Enviar a DGA</th>
        <th>Verificador MEE</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-element>
      <tr>
        <td>{{ element.time }}</td>
        <td>{{ element.datetime_utc_4 }}</td>
        <td>{{ element.datetime_cl }}</td>
        <td>{{ element.volume }}</td>
        <td>{{ element.accumulate_volume }}</td>
        <td>{{ element.flow }}</td>
        <td>{{ element.level_sensor_meters }}</td>
        <td>
          <p-button
            [label]="element.it_must_be_sent_to_dga ? '✔' : '✘'"
            [class]="
            'p-button-' +
            (element.it_must_be_sent_to_dga ? 'success' : 'danger')
          "
          ></p-button>
        </td>
        <td>{{ element.proof_number }}</td>
      </tr>
    </ng-template>

    <ng-template pTemplate="loadingbody">
      <tr>
        <td colspan="9">
          <p-skeleton [ngStyle]="{'width': '100%'}"></p-skeleton>
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>

pero el evento no reacciona al scroll

alguien me podria ayudar?

best regards
Matias

[matiasAS]

i resolved integration, work good